使用说明

该博文记录Sakura主题的修改过程,包括了对Sakura主题主要文件的解析、博客使用插件的代码和使用说明,以及对Sakura主题html文件和css文件的修改,并分享修改博客过程中可能会使用到的网站。建议在了解基础的html、css、javascript的前提下修改html文件和css文件。

修改详情

文件目录及内容

themes\Sakura\layout文件夹 —— 存放Sakura主题的ejs文件,确定了主题的网页结构

  • archive.ejs —— 归档界面
  • bangumi.ejs —— 番剧界面
  • category.ejs —— 分类目录界面
  • donate.ejs —— 赞赏界面
  • index.ejs —— 首页
  • layout.ejs —— 默认布局
  • links.ejs —— 友链
  • page.ejs —— 分页默认界面(修改分页界面在_widget文件夹下的common-page.ejs文件中)
  • post.ejs —— 文章默认界面(修改文章默认界面在_widget文件夹下的common-article.ejs文件中)
  • tag.ejs —— 标签目录界面
  • _widget文件夹

    • category-items.ejs —— 分类和标签目录界面的文章块
    • common-article.ejs —— 文章默认界面
    • common-page.ejs —— 分页默认界面
    • index-items.ejs —— 首页文章块
  • _partial文件夹

    • aplayer.ejs —— 播放器
    • category-archive.ejs —— 分类标签目录界面组成部分
    • comment.ejs —— 留言板
    • footer.ejs —— 网页尾部
    • head.ejs —— head部分
    • header.ejs —— 博客的导航框
    • headtop.ejs —— 首页封面界面
    • mheader.ejs —— 手机端导航框
    • startdash.ejs —— 首页start:dash板块

themes\Sakura\source文件夹 —— 存放Sakura主题的css文件和js文件,修饰网页和动态效果

  • botui.js —— 关于我的页面的对话效果
  • sakura-app.js —— Sakura的动态效果
  • font.css —— 设置网页字体和图标
  • style.css —— Sakura主题样式

基础修改

  1. 通过hexo s本地博客预览,使用浏览器中的开发者工具(F12)选择想要修改的基础元素根据所属板块在上文的文件目录寻找对应的文件。如果是修改元素的css样式可以在开发者工具的Styles栏中元素右上角有对应的文件名和对应行数。

  1. 推荐使用Visual Studio Code软件进行修改,找到需要修改的文件使用查找功能(Ctrl+F)能够快速定位目标位置。

通过以上两步便可以简单对Sakura的主题进行细节方面的修改。

字体修改

  1. 下载字体文件,放在博客存放字体的文件夹中。

  2. 在font.css文件中插入代码。

    @font-face {
      font-family: 'Caleigh';        /* 字体名字 */
      src: url('https://cdn.jsdelivr.net/gh/Eutopun/CDN@v0.69/fonts/Caleigh.otf'); /* 存放在CDN中的fonts文件夹中的字体文件路径 */
    }
    

英文字体网推荐:站长素材网

FontAwesome图标修改

  • 如果在修改FontAwesome图标过程中出现更换图标Unicode后,图标没有发生变化,可以尝试下该修改方式
.icon-search:before {
  font-family: 'FontAwesome';
  content: "\f002";
  font-weight: 900;
}
  • 导航框上的图标动画修改需要在主题配置文件中添加动画效果名称并在对应元素加上animated-hover。

播放器图标

  1. 在APlayer.min.js文件中(原文件导入Aplayer.min.js默认是来自官网,需要重新设置Aplayer.min.js文件的访问路径),通过查找 ‘svg’ 标签定位Aplayer播放器的按钮图标,把svg图标放在新建html文件中可以确认图标

  2. 图标可以在Iconfont-阿里巴巴矢量图标库中进行选择

  3. 夜间模式时,播放器的按钮图标有阴影残留,删除对应的box-shadow

  4. 播放器底部歌词显示框可调成透明,在style.css文件中添加如下代码

    .aplayer.aplayer-fixed .lrc-show{
        background: transparent !important;
    }
    

文章底部时间

在footer.ejs文件底部插入代码(我插入在

之间)

<span id="timeDate"></span>
<span id="times"></span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("08/2/2020 09:44:00");//此处修改时间(月/日/年 时:分:秒)
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已在核爆之前苟活了 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
    setInterval("createtime()",250);
</script>

删除右下视频播放

建议将代码注释,说不定以后想用
  1. themes\Sakura\_config.yml注释以下代码段
# 视频地址为https://cdn.jsdelivr.net/gh/honjun/hojun@1.2/Unbroken.mp4,配置如下
# movies:
#   url: https://cdn.jsdelivr.net/gh/honjun/hojun@1.2
#   多个视频用逗号隔开,随机获取。支持的格式目前已知MP4,Flv。其他的可以试下,不保证有用
#   name: Unbroken.mp4
  1. themes\Sakura\layout\_partial\footer.ejs删除“movies”键值对

以后需要视频播放可复制:
"movies":{"url": "<%- theme.movies.url %>","name":"<%- theme.movies.name%>","live":"close"}

"movies":{"url": "<%- theme.movies.url %>","name":"<%- theme.movies.name%>","live":"open"},
  1. themes\Sakura\source\js\sakura-app.js分别注释以下代码段
从 splay 到 LV 全部注释
// splay: function () {
    //   $('#video-btn').addClass('video-pause').removeClass('video-play').show()
    //   $('.video-stu').css({
    //     'bottom': '-100px'
    //   })
    //   $('.focusinfo').css({
    //     'top':
            • 
            •
            •
        //     s.onended = function () {
    //       $('#bgvideo').attr('src', '')
    //       $('#video-add').hide()
    //       _btn.addClass('loadvideo').removeClass('video-pause')
    //       _btn.removeClass('videolive')
    //       _btn.removeClass('haslive')
    //       $('.focusinfo').css({
    //         'top': '49.3%'
    //       })
    //     }
    //   })
    //   $('#video-add').on('click', function () {
    //     Siren.addsource()
    //   })
    // },
注释零散的部分(可直接通过查找定位)
// if (Poi.movies.live == 'open') Siren.liveplay()
// Siren.livepause()
// Siren.LV()
  1. css部分如果需要删除,可自行根据上文的基础修改进行更改

网页侧边栏(黑夜模式、音乐、留言板)

感谢cungudafa大佬的实现,我只是知识的搬运工

一言

可以在一言官网中选择喜欢的分类,感谢一言团队的创作和开源分享

<div class="entry-content">
  <div class="poem-wrap">
    <div class="poem-border poem-left">
    </div>
    <div class="poem-border poem-right">
    </div>
    <h1>
    一言</h1>
    <p id="hitokoto">:D 获取中...</p>
    <p align="right" id="afrom">
    </p>
  </div>
</div>
<!-- 现代写法,推荐(不支持 IE) -->
<script>
  fetch('https://v1.hitokoto.cn/?c=b&c=c&c=d&c=h&c=i&c=j&c=k')
    .then(response => response.json())
    .then(data => {
      const hitokoto = document.getElementById('hitokoto')
      const afrom = document.getElementById('afrom')
      hitokoto.innerText = data.hitokoto
      afrom.innerText = '——【' + data.from + '】';
    })
    .catch(console.error)
</script>

注释原先的诗歌两首的js内容

1.
// function get_poem (poem_ele, info_ele) {
//   var poem = document.querySelector(poem_ele)
//   var info = document.querySelector(info_ele)
//   var xhr = new XMLHttpRequest()
//   xhr.open('get', 'https://v2.jinrishici.com/one.json')
//   xhr.withCredentials = true
//   xhr.onreadystatechange = function () {
//     if (xhr.readyState === 4) {
//       var data = JSON.parse(xhr.responseText)
//       poem.innerHTML = data.data.content
//       info.innerHTML = '【' + data.data.origin.dynasty + '】' + data.data.origin.author + '《' + data.data.origin.title + '》'
//     }
//   }
//   xhr.send()
// }
2,3.
// if ($('div').hasClass('poem-wrap')) {
//   get_poem('#poem', '#info')
// }

资源分享

结尾

第一篇文章,如果对文章存疑或者文章有错误,衷心的希望能在留言板中指出或留下足迹,在确认其真实性后,会对文章进行修改,力求做到严谨地对待技术!!!


如果以后再也见不到你,那祝你早安,午安,晚安。