索引：blogの搭建之next

不知不觉已经有两千多行了啊。。。~~虽然大部分是代码~~

甚至还有很多小地方我没写进去。如果当初搞一个更新日志的话，现在至少得有一百多条了吧。

前言

很久以前在一个wordpress博客上看到了$sakura$主题，很对我口味。

然而我是hexo博客，不想转到wordpress上~~我现在也没钱买服务器~~，于是默默收藏了起来，要是以后我用wordpress就用这个主题。

前几天没事翻了翻hexo的主题，居然发现有人把$sakura$搬到了hexo上。

于是果断抛弃$next$立刻用了四天时间转到$sakura$主题并大量魔改，追求足够美观而尽量精简。

$sakura$很多配置当然比不上懒人必备的$next$，存在着很多能魔改的地方~~给了我颓废的契机~~，但教程实在是少。

只能凭借少量的教程、自己的$YY$和半吊子现学现卖的html,css,js来搞。~~（以及抄袭+搬代码）~~

本文记录我修改$sakura$主题的过程（也算是个教程），其中部分内容同样适用于其他hexo主题。同时声明一点：我会写在这里面的都是网上没有教程或难以找到的东西，常见的问题还是请找万能百度或更万能的谷歌。

在我退役前会不定期更新。

感谢以下教程对我的帮助：

https://github.com/honjun/hexo-theme-sakura/blob/master/README-zh_cn.md

https://yremp.club/2019/05/26/teach/

https://blog.csdn.net/u014630987/article/details/78670258

http://moxfive.xyz/2015/10/25/hexo-tag-cloud/

https://github.com/wizardforcel/hexo-theme-landfarz/blob/master/layout/_partial/post/tag.ejs

https://yremp.live/sakura-js/

https://www.tomori.xyz/2019/06/15/emojis-plug-in-unit-for-bilibili/

https://zxsama.top/7990d08f

也感谢wordpress作者mashiro和hexo作者hojun创造出$sakura$这一主题以及Tian-Xing对本文的纠错。

基本配置

Mathjax

纠错

markdown与$\LaTeX$冲突会导致公式渲染出错，尤其是两个下划线会被转移成斜体。

之前用$next$的时候是通过修改kramed源文件解决的，于是还是选择把hexo-renderer-marked换成hexo-renderer-kramed，请自行用npm安装。

在\node_modules\kramed\lib\rules\inline.js 中，第$11$行：

-  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
+  escape: /^\\([`*\[\]()#$+\-.!_>])/,

第$20$行：

-  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

加速

一般$mathjax$源都是$cloudflare$，然而是国外的，速度怎么样我放张图自己体会：

（测速工具）

于是我把源换成了国内的$bootcdn$：

在\themes\sakura\layout\_widget\common-article.ejs中，修改：

-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML"></script>
+   <script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/latest.js?config=TeX-MML-AM_CHTML"></script>

在\themes\sakura\source\js\sakura-app.js中，修改：

-         $.getScript('//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML', function () {
+         $.getScript('https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_CHTML', function () {

再放送：

代码高亮

刚用的时候代码框十分诡异而且压根就没有高亮。找了几种方法并不可行。

最后发现应该是$hexo$自带的高亮冲突了，只要把站点配置文件中：

highlight:
  enable: true

$true$改为$false$就行了。

搜索

搜索一直不能用啊。。。

经过一晚上的配置毫无进展，最后在$hexo$博客群里问了下$dalao$，就是少了个插件。

git bash中执行：

npm install hexo-generator-json-content --save

Fancybox

update on 2020.1.12：

去$sakura$的github页面发现其实已经配置好$Fancybox$了。。。只需要以｛% fb_img src caption %｝的格式引用即可。其中src为地址，caption为描述（可以不加）。

不过这样是没法通过内嵌html自定义图片样式的，还是需要自己配置。

$Fancybox$就是那个点击图片进行幻灯片放映所有图片的东西。

$sakura$其实已经引入了$Fancybox$的js和css了，但是图片没有处理成对应的格式。

在\themes\sakura\layout\_widget\common-article.ejs中添加：

<script>
function imgInit(){
    var imgs=document.getElementsByClassName('entry-content').item(0).getElementsByTagName('img'),dsrc=record.getAttribute("data-src");
    for(var i=0;i<imgs.length;++i){
        var element = document.createElement("a"),record=imgs[i];
        element.setAttribute("data-fancybox","gallery");
        element.setAttribute("href",dsrc||imgs[i].src);
        imgs[i].parentNode.appendChild(element);
        imgs[i].parentNode.removeChild(imgs[i]);
        element.appendChild(record);
    }
}
imgInit();

</script>

添加``支持

作为$next$前用户，我很喜欢的便捷性。

简单来说，截取了文章开头，以其原本的亚子显示。

然而$sakura$是不支持的，只能用description属性，不支持markdown和$\LaTeX$。

经过我的瞎改努力钻研，终于搞出来了。

主页

添加

在\themes\sakura\layout\_widget\index-items.ejs中找到：

      <div class="float-content">

删除下面的：

        <p style="text-align:left"><%= post.description %></p>
        <div class="post-bottom">
          <a href="<%- url_for(post.path) %>" class="button-normal">
            <i class="iconfont icon-caidan"></i>
          </a>
        </div>

在上面添加：

          <% if(post.excerpt) { %>
        <div class="readmore">
          <%- post.excerpt %>
         </div>
        <% } else { %>
        <p style="text-align:left"><%= post.description %></p>
        <% } %>

配置样式

在\themes\sakura\sourcr\css\style.css中，添加：

.readmore{
    text-align:left;
    position:relative;
    margin-top:10px;
}
.readmore a {
    color:#08f;
    text-decoration:underline dotted rgba(0,0,0,.1)
}
.readmore a:hover {
    color:#05f !important;
    text-decoration:underline #05f
}
.readmore p {
    color:#5c5c5c;
    line-height:27px;
    margin: 0;
}
.readmore hr {
    margin-top:40px;
    margin-bottom:40px;
    display:block;
    border:0;
    text-align:center;
    background:none
}
.readmore hr:before {
    display:inline-block;
    margin-left:.6em;
    color:rgba(0,0,0,.8);
    position:relative;
    top:-30px;
    font-size:28px;
    letter-spacing:.6em
}
.readmore img{transform:none!important;}
.readmore blockquote {
    margin-bottom: 10px;
    padding:10px 15px;
    border-radius: 1.3rem;
}
.readmore blockquote:before {
    font-size:1.2rem;
    top:-5px;
    left:-2px;
}
.readmore blockquote:after {
    font-size:1.2rem;
    bottom:-15px;
    right:0px;
}

这里我只添加了<a>,<p>,<hr>,<blockquote>的样式和对<img>$BUG$的修复，其他有需要的得把.entry-content的搬过来。

这样有标签的会优先显示，否则显示description。

js支持

一些仅用于文章里的js例如$\LaTeX$也要作用于。

以$\LaTeX$为例：

添加到\themes\sakura\layout\index.ejs中。

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML"></script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
  </script>

其他的例如$Fancybox$和下文的模糊字体请自行添加。

解决「显示更多」js不加载问题

这里用了个非常丑陋的方法：暴力设定时器。也懒得改了。

在\themes\sakura\source\sakura-app.js中找到函数：

mashiro_global.post_list_show_animation = new function () {

整个修改为：

var previousFlag=false;
mashiro_global.post_list_show_animation = new function () {
  this.ini = function (ajax) {
    $('article.post-list-thumb').each(function (i) {
      if (ajax) {
        var window_height = $(window).height()
      } else {
        if ($('.headertop').hasClass('headertop-bar')) {
          var window_height = 0
        } else {
          var window_height = $(window).height() - 300
        }
      }
      if (!mashiro_global.landing_at_home) {
        window_height += 300
      }
      var article_height = $('article.post-list-thumb').eq(i).offset().top
      if ($(window).height() + $(window).scrollTop() >= article_height) {
        $('article.post-list-thumb').eq(i).addClass('post-list-show')
        previousFlag=true;
      }
      $(window).scroll(function () {
        var scrolltop = $(window).scrollTop()
        if (scrolltop + window_height >= article_height && scrolltop) {
          $('article.post-list-thumb').eq(i).addClass('post-list-show')        
          previousFlag=true;
        }
      })
    })
  }
}()
setInterval(function(){
if(previousFlag && MathJax){
    previousFlag=false;
    if(MathJax)MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
},1000);

其他的请自行添加到定时器setInterval里。

文章列表

文章列表用截断会比较丑陋，空白区域太小了还不支持换行。

一开始我保留了desciription，但因为两者差距太大了，主页和文章列表无法统一。我强迫症犯了，直接暴力解决：删掉文章描述！

光删掉之后太空荡了，于是用文章信息如日期、分类、标签代替了，右上角的日期就去掉了。

在\themes\sakura\layout\_widget\category-items.ejs中，找到：

  <div class="p-time">
      <i class="iconfont icon-time">
      </i>
    <%= date(post.date, 'YYYY-M-D') %></div>

替换为：

<div class="category-meta" style="margin:8px 0 0 17.4%">
        <span><i class="fa fa-calendar"></i>&nbsp;
          <%= date(post.date, 'YYYY-M-D') %></span><em>·</em>
        <span>
        <i class="fa fa-archive"></i>&nbsp;
        <% post.categories.each((category)=>{ %>
          <a href="<%- url_for(category.path) %>" class="set-color"><%= category.name %><em>·</em></a>
        <% }) %>
        </span>
        <span><i class="fa fa-tags"></i>
        <% post.tags.each((tag)=>{ %>
            <a href="<%- url_for(tag.path) %>" class="set-color"><%= tag.name %><em>·</em></a>
          <% }) %>
        </span>
        <style>
        .set-color:hover{color: #3ca0ff;}
        </style>
      </div>

其中<style>里面规定了链接颜色，我用的自己的主题色，需要自行修改（默认为orange）。

在\themes\sakura\source\css\style.css中，添加：

.category-meta,.category-meta a {
    color:#888;
    font-size:13px
}
.category-meta em {
    margin: 0 5px;
    color: #666;
}

大清洗

为了追求简洁，去掉了不少东西。

网易云播放器

目前我并不想把音乐放到$blog$上，留着影响加载速度。

在\themes\sakura\layout\layout.ejs里注释掉下面这两行：

  <%- partial('_partial/mheader', null, {cache: !config.relative_link}) %>
  <%- partial('_partial/aplayer', null, {cache: !config.relative_link}) %>

这样就可以了。如果想再精简的话可以在\themes\sakura\source\css\style.css里注释掉有关aplayer的部分。

主页的视频功能

主页右下角有一个播放键，可以放上视频播放的。

显然我用不着。。。

在\themes\sakura\layout\_partial\headertop.ejs中只注释掉下面这两行：

    <div id="video-btn" class="loadvideo videolive">
    </div>

不知道为啥注释掉其他有关video的部分会出现一些神奇的$bug$

打赏和转载

在\themes\sakura\layout\_widget\common-articles.ejs中注释掉以下部分：

<div class="single-reward">
  <div class="reward-open">赏<div class="reward-main">
    <ul class="reward-row">
      <li class="alipay-code"><img src="<%- (theme.cdn || '') + theme.donate.alipay%>"></li>
      <li class="wechat-code"><img src="<%- (theme.cdn || '') + theme.donate.wechat%>"></li>
    </ul>
  </div>
</div>
</div>
<div style="text-align:center; width: 100%" class="social-share share-mobile" data-disabled="diandian, tencent"></div>
<footer class="post-footer">
  <div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow"><i class="fa fa-creative-commons" aria-hidden="true"></i> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a></div>
  <div class="post-tags">
  </div>
  <div class="post-share">
  <div class="social-share sharehidden share-component"></div>
  <i class="iconfont show-share icon-forward"></i>
</div>
</footer><!-- .entry-footer -->

复制附加版权信息

复制的时候会额外加上一段“著作权归作者所有。。。”，很不方便。

在\themes\sakura\source\js\sakura-app.js中找到：

    var htmlData = '' + '著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>' + '作者：' + mashiro_option.author_name + '<br>' + '链接：' + window.location.href + '<br>' + '来源：' + mashiro_option.site_name + '<br><br>' + window.getSelection().toString().replace(/\r\n/g, '<br>')
    var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权，非商业转载请注明出处。\n' + '' + mashiro_option.author_name + '\n' + '链接：' + window.location.href + '\n' + '来源：' + mashiro_option.site_name + '\n\n' + window.getSelection().toString().replace(/\r\n/g, '\n')

改为：

    var htmlData = window.getSelection()
    var textData = window.getSelection()

如果要去掉复制成功的信息的话删去：

      addComment.createButterbar('复制成功！<br>Copied to clipboard successfully!', 1000)

页面底部版权信息和转发功能

在\themes\sakura\layout\_partial\footer.ejs中，注释掉：

  <p style="color: #666666;">&copy 2018</p>

在\themes\sakura\layout\_widget\common-page.ejs中，删除：

      <footer class="post-footer">
        <div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow"><i class="fa fa-creative-commons" aria-hidden="true"></i> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a></div>
        <div class="post-tags">
        </div>
        <div class="post-share">
          <div class="social-share sharehidden share-component"></div>
          <i class="iconfont show-share icon-forward"></i>
        </div>
      </footer><!-- .entry-footer -->
    </article>
      <!-- #post-## -->
      <section class="author-profile">
        <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
          <a href="/about/" class="profile gravatar"><img src="<%- (theme.cdn || '') + theme.avatar%>" itemprop="image" alt="<%- theme.siteName %>" height="70" width="70"></a>
          <div class="meta">
            <span class="title">Author</span>
            <h3 itemprop="name">
            <a href="<%- theme.url%>" itemprop="url" rel="author"><%- theme.siteName %></a>
            </h3>
          </div>
        </div>
        <hr>
        <p><i class="iconfont icon-write"></i><%- theme.description%></p>
      </section>

代码框打开功能

点击代码框的标题会全屏显示代码，感觉很影响阅读体验。

在\themes\sakura\source\js\sakura-app.js中，注释掉：

  $('pre').on('click', function (e) {
    if (e.target !== this) return
    $(this).toggleClass('code-block-fullscreen')
    $('html').toggleClass('code-block-fullscreen-html-scroll')
  })

外观美化

个性化css

$next$有一个custom.styl文件可以自己写$css$，于是给$sakura$搞了一个。

其实很简单，在\themes\sakura\source下新建一个code.css的文件，在\themes\sakura\layout\layout.ejs中第二行<body class="...">下面添加：

  <style type="text/css">
    @import url("/code.css");
  </style>

就可以在code.css里编辑$css$啦。比如改鼠标样式、字体都可以在里面搞。

主题工具

就是左下角那个。

这玩意我研究了很长时间。也非常实用，在保留简洁性的前提下给访客高度的个性化能力。

添加

在themes\sakura\layout\layout.ejs中：

  <div class="scrollbar" id="bar">
  </div>

前面添加：

 <%- partial('_partial/setdisplay') %> 
 <%- partial('_partial/set', null, {cache: !config.relative_link}) %>

原版是在<%- partial('_partial/mheader', null, {cache: !config.relative_link}) %>前添加的，但要这样字体切换会出$bug$。

在\themes\sakura\layout\_partial中新建set.ejs，内容：

<div class="changeSkin-gear no-select"> 
    <div class="keys" id="setbtn"> 
        <span id="open-skinMenu"> 
            SCHEME TOOL | 主题工具 &nbsp;
            <i class="iconfont icon-gear inline-block rotating">
            </i> 
        </span>
    </div> 
</div>

新建setdisplay.ejs，内容：

<div class="skin-menu no-select" id="mainskin" style="position: fixed"> 
    <div class="theme-controls row-container">
          <p style="text-align:center;font-family:'Monaco';font-weight:bold;color:#444"><i style="color:grey" class="fa fa-chevron-left"></i> background <i style="color:grey" class="fa fa-chevron-right"></i></p>
        <ul class="menu-list"> <li id="white-bg"> 
            <i class="fa fa-television" aria-hidden="true">
            </i>
            </li> 
            <li id="sakura-bg"> 
                <i class="iconfont icon-sakura">
                </i>
            </li>
            <li id="gribs-bg">
                <i class="fa fa-slack" aria-hidden="true">
                </i>
            </li>
            <li id="KAdots-bg">
                <i class="iconfont icon-dots">
                </i>
            </li>
            <li id="totem-bg">
                <i class="fa fa-optin-monster" aria-hidden="true">
                </i>
            </li>
            <li id="pixiv-bg">
                <i class="iconfont icon-pixiv">
                </i>
            </li>
            <li id="bing-bg">
                <i class="iconfont icon-bing">
                </i>
            </li>
            <li id="dark-bg">
                <i class="fa fa-moon-o" aria-hidden="true">
                </i>
            </li>
        </ul>
    </div>
    <canvas id="night-mode-cover">
    </canvas>
</div>

还要修点$bug$：

在\themes\sakura\source\js\sakura-app.js中，找到函数$('.skin-menu #dark-bg').click(function ()，函数最底下添加：

setCookie('bgImgSetting','https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/starry_sky.png',30)

把所有形如：

$('.changeSkin-gear, .toc').css('background', 'none')
或
$('.changeSkin-gear, .toc').css('background', 'rgba(255,255,255,0.8)')

里的.changeSkin-gear,删掉。

这只是初始版，后面还有更高级的。

更换图片

$bing$主题是从$bing$随机图片api获取一张图片做背景，可以更换。

在\themes\sakura\source\js\sakura-app.js中，下面两句：

 changeBGnoTrans('#bing-bg', 'https://api.shino.cc/bing/')

else if (bgurl == 'https://api.shino.cc/bing/')

其中的网址换成其他url。

随机图片url可以点这里哦

其他主题类似，找到url位置修改。

位置和外观

在set.ejs里直接用css美化，可能还要修正setdisplay.ejs。

参考配置：

set.ejs：

<div class="changeSkin-gear no-select" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; visibility: visible; bottom: 0px;"> 
  <div class="keys" id="setbtn"> 
    <button id="open-skinMenu">
        <style>
        button#open-skinMenu{
            transition: all 0.2s linear 0s;
            outline:none;
            position:fixed;
            bottom:13px;
            left:15px;
            font-size:16px;
            background-color: rgba(255,255,255,.95);
            border-radius: 20px;
            box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1), 0 3px 8px 0 rgba(0,0,0,0.1);
        }
        button#open-skinMenu:hover{
            transition: all 0.2s linear 0s;
            background-color: rgb(255, 165, 0);
            color: rgba(255,255,255);
        }
        </style>
        <i class="iconfont icon-gear inline-block rotating">
      </i> 
        SCHEME TOOL | 主题工具 
    </button>
  </div> 
</div>

其中：

            position:fixed;
            bottom:13px;
            left:15px;

用于把位置移到左边去，不需要可以删掉；如果需要，还要更改setdisplay.ejs（第一行）：

<div class="skin-menu no-select" id="mainskin" style="position: fixed;bottom:65px;left:31px;">

字体切换

wordpress上有字体切换功能。

翻了翻sakura-app.js，发现字体切换功能函数已经写好了，直接用就行。

setdisplay.ejs中，在<canvas id="night-mode-cover">前添加：

  <hr>
  <p style="text-align:center;font-family:'Monaco';font-weight:bold;color:#444"><i style="color:grey" class="fa fa-chevron-left"></i> font <i style="color:grey" class="fa fa-chevron-right"></i></p>
  <div class="font-family-controls row-container">
    <button type="button" class="control-btn-serif " data-mode="serif" onclick="mashiro_global.font_control.change_font()">Serif</button>
    <button type="button" class="control-btn-sans-serif" data-mode="sans-serif" onclick="mashiro_global.font_control.change_font()">Sans Serif</button>
  </div>

在sakura-app.js中，找到：

  this.ini = function () {
    if (document.body.clientWidth > 860) {
      if (!getCookie('font_family') || getCookie('font_family') == 'serif') { $('body').addClass('serif') }
    }
    if (getCookie('font_family') == 'sans-serif') {
      $('body').removeClass('sans-serif')
      $('.control-btn-serif').removeClass('selected')
      $('.control-btn-sans-serif').addClass('selected')
    }
  }

改为：

  this.ini = function () {
    var font = getCookie('font_family')
    if (document.body.clientWidth > 860) {
      if (! font || font == 'serif') { 
        $('body').addClass('serif') 
        $('.control-btn-serif').addClass('selected')
      }
    }
    if (font == 'sans-serif') {
      $('body').addClass('sans-serif').removeClass('serif')
      $('.control-btn-sans-serif').addClass('selected')
    }
  }

在\themes\sakura\source\css\style.css中，找到.font-family-controls button {，下面添加：

    outline: none;

找到：

.serif {
    font-family:'Source Han Serif SC','Source Han Serif','source-han-serif-sc','PT Serif','SongTi SC','MicroSoft Yahei',Georgia,serif
}

改为：

.serif {
    font-family:'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif', source-han-serif-sc, 'PT Serif', 'SongTi SC', 'MicroSoft Yahei', Georgia, serif
}

换字体后主页的startdash可能会被挤变形，需要在style.css中找到：

.top-feature-row {
    width:100%;
    height:auto;
    margin-top:55px
}

把width改大点就行。

加特技

本人的创新，添加背景特效及开关。

樱花雨特效来自yremp.live。彩带特效来自主题butterfly。

（顺便吐槽一下彩带特效：彩带只会在较靠上的区域生成。当文章较长时，翻到下面彩带就出不来了。~~咱也看不懂js源码也不会改~~）

setdisplay.ejs中，在<canvas id="night-mode-cover">前添加：

  <hr>
  <p style="text-align:center;font-family:'Monaco';font-weight:bold;color:#444"><i style="color:grey" class="fa fa-chevron-left"></i> script <i style="color:grey" class="fa fa-chevron-right"></i></p>
  <div class="theme-controls row-container">
  <ul class="menu-list">
    <li id="empty-effect">
      <i class="fa fa-ban">
      </i>
    </li>
    <li id="sakura-rain-effect">
      <i class="iconfont icon-sakura">
      </i>
    </li>
    <li id="snowy-effect">
      <i class="fa fa-snowflake-o">
      </i>
    </li>
    <li id="lines-effect">
      <i class="fa fa-chevron-left">
      </i>
    </li>
    <li id="colorful-belts-effect">
      <i class="fa fa-map"></i>
      </i>
    </li>
    <li id="words-rain-effect">
      <i class="fa fa-font"></i>
    </li>
    <li id="point-rain-effect">
      <i class="iconfont icon-dots"></i>
    </li>
    <li id="rain-drop-effect">
      <i class="fa fa-tint"></i>
    </li>
  </ul>
  </div>

在\themes\sakura\source\js\sakura-app.js中，找到：

  function closeSkinMenu () {

前面添加：

  $('.skin-menu #empty-effect').click(function(){
    sakuraEffectClear()
    snowEffectClear()
    lineEffectClear()    
    beltEffectClear()
    wordEffectClear()    
    pointEffectClear()
    rainEffectClear()
    closeSkinMenu()
  })

  $('.skin-menu #sakura-rain-effect').click(function(){
    var effect = sakuraEffectClear()
    if(!effect) {
        effect = document.createElement("script")
        effect.setAttribute("src","https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js")
        effect.setAttribute("id","sakura-effect")
        document.getElementsByTagName("body").item(0).appendChild(effect)
        setCookie('sakuraEffectCookie','use',30)
    }
    closeSkinMenu()
  })
  $('.skin-menu #snowy-effect').click(function(){
    var effect = snowEffectClear()
    if(!effect){
        effect = document.createElement("script")        
        effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.3.3/js/snow.js")
        effect.setAttribute("id","snow-effect")
        document.getElementsByTagName("body").item(0).appendChild(effect)
        setCookie('snowyEffectCookie','use',30)
    }
    closeSkinMenu()
  })
  $('.skin-menu #lines-effect').click(function(){
    var effect = lineEffectClear()
    if(!effect){
        effect = document.createElement("script")        
        effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.3.3/js/line.js")
        effect.setAttribute("id","line-effect")
        document.getElementsByTagName("body").item(0).appendChild(effect)
        setCookie('linesEffectCookie','use',30)
    }    
    closeSkinMenu()
  })
  $('.skin-menu #colorful-belts-effect').click(function(){
    var effect = beltEffectClear()
    if(!effect){
        effect = document.createElement("script")        
        effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.0/js/piao.js")
        effect.setAttribute("id","belt-effect")
        document.getElementsByTagName("body").item(0).appendChild(effect)
        setCookie('beltsEffectCookie','use',30)
    }
    closeSkinMenu()
  })
  $('.skin-menu #words-rain-effect').click(function(){
    var effect = wordEffectClear()
    if(!effect){
        effect = document.createElement("script")        
        effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.0/js/coderain.js")
        effect.setAttribute("id","words-effect")
        document.getElementsByTagName("body").item(0).appendChild(effect)
        setCookie('wordsEffectCookie','use',30)
    }
    closeSkinMenu()
  })
  $('.skin-menu #point-rain-effect').click(function(){
      var effect = pointEffectClear()
      if(!effect){        
        effect = document.createElement("script")        
        effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.3/js/pointrain.js")
        effect.setAttribute("id","point-effect")
        document.getElementsByTagName("body").item(0).appendChild(effect)
        setCookie('pointEffectCookie','use',30)
      }
      closeSkinMenu()
  })
  $('.skin-menu #rain-drop-effect').click(function(){
      var effect = rainEffectClear()
      if(!effect){        
        effect = document.createElement("script")
        effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.5/js/raindrop.js")
        effect.setAttribute("id","raindrop-effect")
        document.getElementsByTagName("body").item(0).appendChild(effect)
        setCookie('rainEffectCookie','use',30)
      }
      closeSkinMenu()
  })
  function sakuraEffectClear(){
    var effect = document.getElementById("sakura-effect")
    if(effect){
        effect.parentNode.removeChild(effect)
        effect = document.getElementById("canvas_sakura")
        effect.parentNode.removeChild(effect)
        setCookie('sakuraEffectCookie','',30)
    }
    return effect;
  }
  function snowEffectClear(){
      var effect = document.getElementById("snow-effect")
      if(effect){
        effect.parentNode.removeChild(effect)
        clearInterval(CIYANG)
        var snow = document.getElementById("snowbox")
        while(snow){
            snow.parentNode.removeChild(snow)
            snow = document.getElementById("snowbox")
        }
        setCookie('snowyEffectCookie','',30)
      }
      return effect
  }
  function lineEffectClear(){
      var effect = document.getElementById("line-effect")
      if(effect){
          effect.parentNode.removeChild(effect)
          var lines = document.getElementById("lines")
          lines.parentNode.removeChild(lines)
          setCookie('linesEffectCookie','',30)
      }
      return effect
  }
  function beltEffectClear(){
      var effect = document.getElementById("belt-effect")
      if(effect){
          effect.parentNode.removeChild(effect)
          effect = document.getElementById("belts1")
          effect.parentNode.removeChild(effect)
          setCookie('beltsEffectCookie','',30)
      }
      return effect
  }
  function wordEffectClear(){
      var effect = document.getElementById("words-effect")
      if(effect){
          effect.parentNode.removeChild(effect)
          effect = document.getElementById("coderain")
          effect.parentNode.removeChild(effect)
          setCookie('wordsEffectCookie','',30)
      }
      return effect
  }
  function pointEffectClear(){
      var effect = document.getElementById("point-effect")
      if(effect){
          effect.parentNode.removeChild(effect)
          effect = document.getElementById("point")
          effect.parentNode.removeChild(effect)
          setCookie('pointEffectCookie','',30)
      }
      return effect
  }
  function rainEffectClear(){
      var effect = document.getElementById("raindrop-effect")
      if(effect){
          effect.parentNode.removeChild(effect)
          document.body.removeChild(document.getElementById('rain'))
          setCookie('rainEffectCookie','',30)
      }
      return effect
  }

找到：

if (document.body.clientWidth > 860) {
  checkBgImgCookie()
}

改为：

function checkEffectsCookie() {
  var efurl = getCookie('sakuraEffectCookie')
  if(efurl) {
    var effect = document.createElement("script")
    effect.setAttribute("src","https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js")
    effect.setAttribute("id","sakura-effect")
    document.getElementsByTagName("body").item(0).appendChild(effect)
  }
  efurl = getCookie('snowyEffectCookie')
  if(efurl) {
    var effect = document.createElement("script")        
    effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.3.3/js/snow.js")
    effect.setAttribute("id","snow-effect")
    document.getElementsByTagName("body").item(0).appendChild(effect)
  }
  efurl = getCookie('linesEffectCookie')
  if(efurl) {
    var effect = document.createElement("script")        
    effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.3.3/js/line.js")
    effect.setAttribute("id","line-effect")
    document.getElementsByTagName("body").item(0).appendChild(effect)
  }
  efurl = getCookie('beltsEffectCookie')
  if(efurl){
    var effect = document.createElement("script")        
    effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.0/js/piao.js")
    effect.setAttribute("id","belt-effect")
    document.getElementsByTagName("body").item(0).appendChild(effect)
  }
  efurl = getCookie('wordsEffectCookie')
  if(efurl){
    var effect = document.createElement("script")        
    effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.0/js/coderain.js")
    effect.setAttribute("id","words-effect")
    document.getElementsByTagName("body").item(0).appendChild(effect)
  }  
  efurl = getCookie('pointEffectCookie')
  if(efurl){
    var effect = document.createElement("script")        
    effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.3/js/pointrain.js")
    effect.setAttribute("id","point-effect")
    document.getElementsByTagName("body").item(0).appendChild(effect)
  }
  efurl = getCookie('rainEffectCookie')
  if(efurl){
    var effect = document.createElement("script")
    effect.setAttribute("src","https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.5/js/raindrop.js")
    effect.setAttribute("id","raindrop-effect")
    document.getElementsByTagName("body").item(0).appendChild(effect)
  }
}
if (document.body.clientWidth > 860) {
  checkBgImgCookie()
  checkEffectsCookie()
}

注：我使用了iconfont图标，若按上文教程食用与我博客上的会不一样，需要的请自行更改。

拓展

在原始主题中，文章顶端的图片很扁（比例大概是$4:1$？），个人觉得不美观，就改成其他主题的排版（比例$2:1$）：

说实话自己也没弄明白怎么搞的，可能会出$BUG$，怕误人子弟就不写了。

有兴趣的可以找我私聊。

更换时间和阅读数的图标

就是文章顶部的日历和眼睛图标。

在\themes\sakura\layout\_widget\common-article.ejs中：

        ·</span>
        <%= date(post.date, 'YYYY-M-D') %><span class="bull">

</span>前的·换成<i class="fa fa-calendar" aria-hidden="true"></i>

        ·</span>
      <span id="busuanzi_value_page_pv"></span>次阅读</p>

</span>前的·换成<i class="fa fa-eye" aria-hidden="true"></i>

首页文章描述左对齐

$update$：现在已经加上了支持，其中所有的文字为显示正常均调成左对齐。

吐槽：sakura是不支持阅读全文的，只能用文章的description元素设置。这样就不支持markdown和$\LaTeX$了。。。

首页中，图片靠左的文章描述（description）是右对齐的，看着很别扭。

在\themes\sakura\layout\_widget\index-items.ejs中，找到：

<p><%= post.description %></p>

修改为：

<p style="text-align:left"><%= post.description %></p>

分割线

为啥原版的<hr>都是三个点啊。。。

感谢Tian-Xing找到了<hr>样式的地方。

本以为是通过很深层的html改的，没想到是css。。。

在\themes\sakura\source\css\style.css删除：

hr { 
    box-sizing:content-box;
    height:0
}

hr {
    background-color:#ccc;
    border:0;
    height:1px;
    margin-bottom:1.5em
}

.entry-content hr:before里的：

    content:'...';

最底下添加：

hr {
    height: 3px !important;
    border: none !important;
    background-color: #bfbfbf !important;
    background-image: repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 4px, transparent 8px) !important;
}

~~（搬的next的样式）~~

这还没完，因为除归档外所有列出文章的地方都用<hr>分割了，css同样会起作用。

那就把<hr>改成<br>呗：

在\themes\sakura\layout\_widget\category-items.ejs中，将倒数第二行的<hr>改为<br>。

还有NEXT POST和PREVIOUS POST按钮也要改。直接删除\themes\sakura\layout\_widget\common-article.ejs中，<%= post.prev.title%></h3>和<%= post.next.title%></h3>下面的<hr>。

代码行高亮

wordpress上的$sakura$里，鼠标放到代码上，对应行会高亮。

$F12$查看元素属性就会发现只是一个简单的css实现。

在\themes\sakura\source\css\style.css（如果您配置了个性化css的话也可以在code.css里）中添加：

.hljs-ln-line:hover {
    background-color: rgba(255, 255, 255, .1);
}
.hljs-ln-line.hljs-ln-n:hover{
    background-color: rgba(0,0,0,0) !important;
}

如果没有下面那条，鼠标放在行号上行号会高亮。。。

表情

来自https://www.tomori.xyz/2019/06/15/emojis-plug-in-unit-for-bilibili/

博客源文件夹下安装：

npm i hexo-tag-emojis-bycoda --save

这个版本有点低，到github下载压缩包，将里面的文件覆盖掉\node_modules\hexo-tag-emojis-bycoda的内容。

在\themes\sakura\layout\_partial\head.ejs中，<link rel="stylesheet" href="/css/zoom.css" media="all">下添加：

  <style>
  .emoji-coda {
      display: inline-block !important;
      position: relative;
      width: 45px;
      top: 2px;
      margin: -3px 3px !important;
      padding: 0;
  }
  </style>

修改width一栏可以调整表情大小。

使用方式：

在\node_modules\hexo-tag-emojis-bycoda\emojis找到想用的表情，格式：

{% emoji_coda 文件夹/表情名%}

示例：

表情示例（喝水）{% emoji_coda 2233/heshui %}

表情示例（喝水）

虽然可以直接引用图片实现，但这样表情可以和文字位于一行，而且大小已经预设好了，使用方便。

更改主题颜色

心血来潮把颜色翻新了一遍。

整体

$sakura$颜色以橙色为主，将所有文件（应该只有style.css、sakura-app.js、head.ejs）里orange和#FE9600替换为想要的颜色。

最好是了解十六进制颜色码或rgb/rgba来选择颜色。

主题工具和归档页面的按钮颜色要手动改。

链接

在\themes\sakura\source\css\style.css里找到.entry-content a修改color。

若要修改鼠标放上去的颜色，修改下面的.entry-content a:hover的color即可。

代码块

在style.css里找到.entry-content code修改color和background。

搜索框

修改鼠标放到搜索结果上时背景的颜色。

在\themes\sakura\source\css\insight.styl中，修改第六行的ins-background-orange。

文章信息文字阴影加深

我写文章都会配二次元图，有很多浅色图片，导致文章的标题、时间、阅读量等信息与背景融为一体：

于是加深了一下阴影。在\themes\sakura\layout\_widget\common-article.ejs中，修改：

- <header class="pattern-header single-header">
+ <header class="pattern-header single-header" style="text-shadow: 0 0 7px #000,0 0 7px #000">

效果还是很明显的：

修改文章配图height

在\themes\sakura\source\css\style.css中，找到：

.pattern-attachment-img {
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    background-origin:border-box;
    width :100%;
    height:400px
}

你会找到两个。。。估计是作者的$BUG$，删掉其中一个，修改另一个的height即可。

文章列表图片拉伸问题の解决

其实一直想修。。。

浏览某个分类或标签下的文章下时，配图是被压缩成正方形的：

度娘发现了一个神奇的css属性：object-fit。

在\themes\sakura\source\css\style.css中，找到.feature img，内部添加：

    object-fit: cover;

引用样式修改

对引用内容的样式进行了一定的修改。

修改内容包括：

引号大小缩小
增添浅灰色背景色
边框与引号的位置自适应文本

在\themes\sakura\source\css\style.css中，把blockquote、blockquote:before、blockquote:after三项的内容替换为：

blockquote {
    width:fit-content;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    width:-ms-fit-content;
    width:-o-fit-content;
    margin:0;
    margin-bottom: 20px;
    padding:12px 45px;
    position:relative;
    border-radius: 1.5rem;
    background: rgba(225, 225, 225, .43);
}
blockquote:before {
    content:"\f10d" !important;
    font-size:2rem;
    position:absolute;
    top:-25px;
    left:2px;
    color:#50bdff;
    font-family:FontAwesome
}
blockquote:after {
    content:'\f10e' !important;
    font-size:2rem;
    position:absolute;
    bottom:-25px;
    right:0px;
    color:#50bdff;
    font-family:FontAwesome
}

主要还是为了我自己看着顺眼。

主页startdash美（丑）化

为了实用性舍弃美观性。

$sakura$主页的startdash一栏我都是用来当置顶文章的。但是通过观看了他人访问我的blog的过程和我亲自体验，发现这玩意太不明显了。

上面写着一个颜色很浅难以察觉的top，下面几张图片，怎么看都像是图片展览，除非把鼠标放上去才会发现是文章链接。

于是我直接把标题改到外面去了，同时对其样式进行了调整：

在\themes\sakura\source\css\style.css中：

将.the-feature.from_left_and_right .info里的内容替换为：

    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    background:transparent;
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;
    transition:all .35s ease-in-out

将.the-feature.from_left_and_right .info h3里的内容替换为：

    text-transform:uppercase;
    color:rgba(255, 255, 255);
    text-align:center;
    font-size:22px;
    letter-spacing:1px;
    text-shadow: 0 0 8px #000,0 0 8px #000;
    font-weight:bold;
    padding:10px;
    margin:30px 0 0 0;
    background:transparent;
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;
    transition:all .35s ease-in-out;
    -webkit-transform:translateY(50%);
    -moz-transform:translateY(50%);
    -ms-transform:translateY(50%);
    -o-transform:translateY(50%);
    transform:translateY(50%)

在下面添加：

.the-feature.from_left_and_right .info:hover h3{
    background:rgba(22, 22, 22, 0.85);
    letter-spacing: 0;
    text-shadow: none;
    font-size:17px;
}

在.the-feature.from_left_and_right a:hover .info里添加：

    background: rgba(0,0,0,0.6);

通告栏美化

和startdash一个问题，不够明显。

在上面添加了图标和Notice文字，稍稍加深了边框和文字颜色，微调位置。

在\themes\sakura\source\css\style.css中，找到.notice，修改以下属性：

    padding:17px;
    border:1px dashed #cacacaed;
    color:#707070;
    margin:-10px 0 -25px 0;

在\themes\sakura\layout\index.ejs中，将：

  <% if (theme.notice) { %>
  <div class="notice" style="margin-top:60px">
    <i class="iconfont icon-notification">
    </i>
    <div class="notice-content"><%= theme.notice%></div>
  </div>
  <% } %>

替换为：

  <% if (theme.notice) { %>
  <h1 class="main-title" style="font-family:'Ubuntu',sans-serif;margin-top:60px"> <i class="fa fa-commenting" aria-hidden="true"></i> Notice</h1>
  <div class="notice">
    <i class="iconfont icon-notification"></i>
    <div class="notice-content"><%= theme.notice%></div>
  </div>
  <% } %>

菜单图标美化

基础

推荐先了解一下FontAwesome是什么。

在FontAwesome里找到想要的图标，点进去，复制fa-*一项。

在主题配置文件中，找到menu。

每一栏有path和fa（有的有子菜单submenus），而fa就是对图标样式的控制。把刚才的fa-*替换掉里面的fa-*。

支持iconfont

索引：iconfont是什么？怎么添加

~~众所周知~~$sakura$主题配置文件的菜单图标只支持FontAwesome，由于种类太少需要添加iconfont支持。

其实就是很基础的html知识：

在\themes\sakura\layout\_partial\header.ejs中修改：

- <i class="fa  <%= theme.menus[menu].fa %>" aria-hidden="true"></i>
+ <i class="<%= theme.menus[menu].fa %>"></i>
- <i class="fa <%= theme.menus[menu].submenus[submenu].fa %>" aria-hidden="true"></i>
+ <i class="<%= theme.menus[menu].submenus[submenu].fa %>"></i>

要注意的是原来用FontAwesome的图标要加上fa。

动态图标

鼠标放到菜单上的时候图标会有动画效果。实际上这是来自于这个仓库的特效。被放在了\themes\sakura\source\css\lib.min.css。

食用方法：

首先在这里可以看到预览，找到需要的，把后面的faa-*粘到（原来有的话就替换）主题配置文件里menu->fa。

如果要改速度的话就再加上faa-fast/faa-slow。

这时你会发现iconfont并不支持动画。

解决方案非常简单，在\thems\sakura\source\css\style.css中添加：

.ctz{display: inline-block;}

（把ctz替换成你的FontClass/Symbol前缀）

最后我强迫症，修一个小问题：

有的时候把鼠标放到菜单某一栏上，下面的条已经出来了，但是图标并没有动。

在\themes\sakura\layout\_partial\header.ejs中，删除<span class="faa-parent animated-hover">和其对应的</span>，在它上面的<a href="<%- url_for(theme.menus[menu].path) %>">内部添加class="faa-parent animated-hover"。

板块化

这是目前对$sakura$效果最大的一次改动，直接改变了主题风格。

本来$sakura$在白色背景下文本都是和背景融为一体的，这次将文本主题、目录和评论区都加上了板块并添加了阴影。~~其实我本来只是想优化valine外观来着~~

emm…具体过程没法语言描述，只能靠f12研究了。

可能用得到的核心css：

.gather{
    width:830px;
    margin:0  auto;
    margin-bottom: 25px;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.6);
    background:rgba(255,255,255,0.8) !important;
    border-radius:15px;
}
#vcomments{
    width:800px;
    padding:2.3% 1% 2% 1%;
    margin:0 auto;
}

$2020.10.2update$：

有人好像对这个板块化感兴趣，但是退役后很少打理博客了所以不知道。。。

板块化不算是个简单的改动，需要一定的html基础和魔改主题的经验，我也不好给出一个很标准的模板。大致的思路就是在文章和评论对应的div外再套一个div，我给的css中.gather就是修饰这个div的。还有一些细节比如图片和文章的合并和阴影问题，~~我现在已经忘得差不多了~~可以用f12对着我的网页改。希望这些能帮到你。

杂七杂八

Valine输入框内容更改

在\themes\sakura\layout\_partial\comment.ejs中，修改placeholder一栏即可。

不过我在\themes\sakura\source\js\sakura-app.js中也找到了$Valine$的设置，不放心也改了。

找到以下内容：

    VA: function () {
      if (!valine) {
        var valine = new Valine()
        valine.init({
          el: '#vcomments',
          appId: mashiro_option.v_appId,
          appKey: mashiro_option.v_appKey,
          path: window.location.pathname,
          placeholder: '你是我一生只会遇见一次的惊喜 ...'
        })
      }
    },

同样修改placeholder。

Valine外观美化

评论框的背景：在\themes\sakura\source\css\style.css中，修改#veditor中的background-image。

其他：

/* 输入昵称、邮箱下方虚线的颜色 */
.vinput:focus{border-bottom-color: #3ca0ff !important;}
/* 评论者的昵称颜色 */
.vnick:not(.vinput){color:#006eff!important;}
/* 鼠标悬浮时，评论者的昵称颜色 */
.vnick:not(.vinput):hover{color:#04f!important;}
/* 回复按钮的颜色*/
.vat{
    color:#3ca0ff !important;
    margin-right:3px;
    border:1px solid #3ca0ff;
    border-radius:4px;
    padding:0 0.5% 0 0.5%;
}
/* 评论框的边框 */
.vwrap{
    border:none !important;
    border-radius:12px !important;
    background:rgba(255, 255, 255, 0.3);
    box-shadow:0px 0px 18px #bbb;
    padding:14px;
    margin-top:10px;
}

Valine炸了

最近$leancloud$爆炸了，导致$Valine$无法正常使用。然而我发现原来$next$评论是正常的，于是查阅了一下$next$的$Valine$配置，有了解决方案：

在\themes\sakura\layout\_partial\footer.ejs中，把：

<script src='//unpkg.com/valine@1.3.4/dist/Valine.min.js'></script>

替换为：

<script src='//unpkg.com/valine/dist/Valine.min.js'></script>

我不用Valine啦！（雾）

个人是很喜欢$Valine$的，不过现在$Valine$要实名认证很麻烦。

虽然最后我还是实名了，还是提供一个sakura安装gitalk的教程给弃了$Valine$的同志。

Valine超进化——Volantis！

Volantis是基于Valine的升级版。

进化效果：

评论必须填写昵称和邮箱
可以自定义js（虽然valine也可以）
表情大翻新，甚至可以个性化表情

但是作者说即将关闭volantis的仓库，以后可能没有原版volantis的源码，所以这里直接提供我的js代码。

添加

如果你想直接照搬我的：

在/themes/sakura/layout/_partial/footer.ejs中，找到关于Valine的引用，长这个样子：

<script src="...valine..."></script>

替换为：

<script src="https://cdn.jsdelivr.net/gh/ctz45562/cdn@2.1.4/js/volantis.min.js"></script>

如果你想DIY，下载 https://cdn.jsdelivr.net/gh/ctz45562/cdn@2.1.4/js/volantis.min.js 并引用。

在/themes/sakura/source/css/style.css中，添加：

#v-qq{height:30px;}
#v-tieba{height:35px;}
#v-menhera:not(.v-avoid){max-width: 6.5%;}
#v-chino:not(.v-avoid){max-width: 8%;}

表情强化

需要js基础。

因为volantis.min.js已经经过混淆处理，需要先用一些工具美化回去。

在2300多行，e.exports后面，格式：表情名: 表情路径。

你可以看到里面已经通过上面的函数添加了一些表情，照葫芦画瓢可以添加，比如aru1: b(1),。

如果想要更多表情（我添加了menhera酱和智乃酱的），需要自己写函数或直接用路径添加。

VolantisのDIY

会js的话直接改文件就好了。

比如我把昵称、邮箱、网站的框的内容修改了。

添加标签

标签页

在\themes\sakura\layout\_widget\common-page.ejs中找到：

  <% if (post.photos && post.photos.length){ %>
    <div class="pattern-center ">
      <div class="pattern-attachment-img">
        <img src="<%- theme.lazyloadImg%>" data-src="<%= post.photos %>" class="lazyload" onerror="imgError(this,3)" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;">
      </div>
      <header class="pattern-header ">
        <h1 class="entry-title">
        <%= post.keywords %></h1>
      </header>
    </div>
  <% } %>

在下面添加：

  <% if (page.path === "tags/index.html"){ %>
<div class="site-content">
    <br><br>
    <div class="tag-cloud-title" style="text-align:center">
      目前共计 <%=site.tags.length%> 个标签
    </div>
    <p></p>
    <div class="tags" style="text-align:center">
        <%- tagcloud({
            min_font: 14, 
            max_font: 35, 
            amount: 999, 
            color: true, 
            start_color: 'gray', 
            end_color: 'black',
        }) %>
    </div>
    <style>
        .article-entry ul li:before{
            display: none;
        }
        .article-inner  {
            text-align: center;
        }
        .tags {
            max-width: 40em;
            margin: 2em auto;
            margin-top: 0em;
        }
        .tags a {
            margin-right: 1em;
            border-bottom: 1px solid gray;
            line-height: 65px;
            white-space: nowrap;
        }
        .tags a:hover {
            transition: all 0.15s linear 0s;
            border-bottom-color: #07f !important;
            color: #07f !important;
        }
    </style>
    </div>
<% } %>

文章标签

注：文章标签有多个版本，且除非有特殊说明，每个版本的添加方式都是独立的，请先阅读完或直接跳到最后一项再添加。

v1.0：landfarzの朴素文字

$sakura$在文章界面是不显示标签的。

在\themes\sakura\layout\_widget\common-article.ejs中可以找到

<div class="post-tags"></div>

显然里面啥都没有。。。

如果去掉了页面底部版权信息，这句也被删掉了。没去掉的话就先删掉。

至于怎么添加，我直接十分暴力地魔改了landfarz的代码过来。

在common-article.ejs中找到以下代码：

 <span id="busuanzi_value_page_pv"></span>次阅读</p>

下面添加：

<% if (post.tags && post.tags.length){ %>
      <%  var tags = [];  post.tags.forEach(function(tag){tags.push('<a href="' + config.root + tag.path + '">' + tag.name + '</a>');});%>
        <div class="tags">
          <style scoped>
            a{color: #fff;}
          </style>
          &nbsp<i class="fa fa-tag" aria-hidden="true"></i>&nbsp
          <%- tags.join('&nbsp &nbsp') %>
        </div>
<% } %>

就可以了。

这是添加到顶部，放到下面的话就加进<footer>元素里。若删掉了<footer>再加回去就好了。

v2.0：来自butterflyの支持

看久了感觉只有文字的标签好$low$啊。。。

标签得有标签的亚子，怎么也得带个框啊。

尝试把SPFK的标签样式抄过来。。。

抄不动抄不动

于是把butterfly抄了过来：

在\themes\sakura\source\css\style.css中，添加：

.butterfly-tags{
    display: inline-block;
    width: fit-content;
    margin: 0.4rem 0.4rem 0.4rem 0;
    padding: 0rem 0.5rem;
    border: 1px solid #3187ff;
    border-radius: 1rem;
    background: #fff;
    color: #3187ff;
    text-decoration: none;
    font-size: 14px;
    text-shadow: none;
    transition: all 0.1s linear;
}
.butterfly-tags:hover{
    transition: all 0.1s linear;
    color: #fff;
    background: #3187ff;
}

按v1.0添加html代码，其中第二行>前添加class="butterfly-tags"，删除倒数第三行的&nbsp &nbsp。

v3.0：强♂迫SPFK支持

$butterfly$的样式我还是不满意，肝了一上午的尝试有了最终方案：

在common-article.ejs中找到以下代码：

 <span id="busuanzi_value_page_pv"></span>次阅读</p>

下面添加：

      <% if (post.tags && post.tags.length){ %>
      <%  var tags = [];  post.tags.forEach(function(tag){tags.push('<li class="spfk-li"><a href="' + config.root + tag.path + '" class="butterfly-tags">' + tag.name + '</a></li>');});%>
        <div>
          <ul class="spfk-ul">
            &nbsp<i class="fa fa-tag" aria-hidden="true"></i>&nbsp&nbsp&nbsp&nbsp
            <%- tags.join('') %>
          </ul>
        </div>
        <script>
            function colorInit(c,num){for(var i=1;i<=num;++i)c.push(i+'');}
            function paintTags(){
                var colorNumber=8,tagColors=[],tags=document.getElementsByClassName('butterfly-tags');
                for(var i = 0 ; i < tags.length ; ++i){
                    if(!tagColors.length)colorInit(tagColors,colorNumber);
                    var j=Math.floor(Math.random()*tagColors.length);
                    tags[i].classList.add("spfk-color"+tagColors[j]);
                    tagColors.splice(j,1);
                }
            }
            paintTags()
        </script>
    <% } %>

在\themes\sakura\source\css\style.css中，（如果有的话）删除.butterfly-tags的样式，添加：

.butterfly-tags{
    display: inline-block;
    margin: 0.4rem 1rem 0.4rem 0;
    padding: 0rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 1px 6px 6px 1px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    text-shadow: none;
    position: relative;
    transition: all 0.1s linear;
}
.butterfly-tags:hover{
    transition: all 0.1s linear;
    opacity: 0.85;
    color: inherit;
}
.butterfly-tags:focus{color: #fff;}
.butterfly-tags:before{
    content: " ";
    position: absolute;
    border: 11px solid transparent;
    left: -23px;
    top: -1px;
}
.butterfly-tags:after{
    content: " ";
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
    position: absolute;
    left: -2px;
    top: 8px;
}
.spfk-ul{
    float: left;
    padding: 0;
    margin: 0;
}
.spfk-li{display: inline-block;}
.spfk-color1{
    background: #39b3d7;
    border-color: #39b3d7;
}
.spfk-color1:before{border-right-color: #39b3d7;}
.spfk-color2{
    background: #4cae4c;
    border-color: #4cae4c;
}
.spfk-color2:before{border-right-color: #4cae4c;}
.spfk-color3{
    background: #f4a83c;
    border-color: #f4a83c;
}
.spfk-color3:before{border-right-color: #f4a83c;}
.spfk-color4{
    background: #ee6252;
    border-color: #ee6252;
}
.spfk-color4:before{border-right-color: #ee6252;}
.spfk-color5{
    background: #e23794;
    border-color: #e23794;
}
.spfk-color5:before{border-right-color: #e23794;}
.spfk-color6{
    background: #9537ff;
    border-color: #9537ff;
}
.spfk-color6:before{border-right-color: #9537ff;}
.spfk-color7{
    background: #0a5dff;
    border-color: #0a5dff;
}
.spfk-color7:before{border-right-color: #0a5dff;}
.spfk-color8{
    background: #cb3800;
    border-color: #cb3800;
}
.spfk-color8:before{border-right-color: #cb3800;}

~~可把我累坏了~~

同时发现了$SPFK$的$BUG$：

$SPFK$的三角形标签样式是通过伪元素:before实现的，而其位置的控制是通过position:absolute及left和top属性，这样在缩放页面时，三角形会脱离标签。更要命的是，在和我机房电脑屏幕比例不一样的电脑上，不需要缩放三角形就会自动脱离标签。

v4.0：缩放BUG？不存在的！

肝了半个上午和半个下午把缩放$BUG$解决了。

在common-article.ejs中<span id="busuanzi_value_page_pv"></span>次阅读</p>下面添加：

      <% if (post.tags && post.tags.length){ %>
      <%  var tags = [];  post.tags.forEach(function(tag){tags.push('<li class="spfk-li"><span class="triangle"></span><a href="' + config.root + tag.path + '" class="butterfly-tags">' + tag.name + '</a></li>');});%>
    <div>
          <ul class="spfk-ul">
            &nbsp<i class="fa fa-tag" aria-hidden="true"></i>&nbsp;<%- tags.join('') %>
          </ul>
        </div>
        <script>
            function colorInit(c,num){for(var i=1;i<=num;++i)c.push(i+'');}
            function paintTags(){
                var colorNumber=8,tagColors=[],tags=document.getElementsByClassName('spfk-li');
                for(var i = 0 ; i < tags.length ; ++i){
                    if(!tagColors.length)colorInit(tagColors,colorNumber);
                    var j=Math.floor(Math.random()*tagColors.length);
                    tags[i].classList.add("spfk-color"+tagColors[j]);
                    tagColors.splice(j,1);
        }
            }
            paintTags()
        </script>
    <% } %>

在style.css里，添加：

.butterfly-tags{
    display: inline-block;
    margin: 0.4rem 1rem 0.4rem 0;
    padding: 0rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 1px 6px 6px 1px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    text-shadow: none;
    position: relative;
    transition: all 0.1s linear;
    height:22px;
}
.spfk-li:hover{
    transition: all 0.1s linear;
    opacity: 0.85;
    color: inherit;
}
.butterfly-tags:hover{color: inherit;}
.butterfly-tags:focus{color: #fff;}
.butterfly-tags:after{
    content: " ";
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
    position: absolute;
    left: -2px;
    top: 8px;
}
.spfk-ul{
    float: left;
    padding: 0;
    margin: 0;
}
.triangle{
    border:11px solid transparent;
    display:inline-block;
    position:relative;
    top:6px;
}
.spfk-li{
    display: inline-block;
    margin-right:-17px;
    margin-left:-2px;
}
.spfk-color1 a{
    background: #39b3d7;
    border-color: #39b3d7;
}
.spfk-color1 span{border-right-color: #39b3d7;}
.spfk-color2 a{
    background: #4cae4c;
    border-color: #4cae4c;
}
.spfk-color2 span{border-right-color: #4cae4c;}
.spfk-color3 a{
    background: #f4a83c;
    border-color: #f4a83c;
}
.spfk-color3 span{border-right-color: #f4a83c;}
.spfk-color4 a{
    background: #ee6252;
    border-color: #ee6252;
}
.spfk-color4 span{border-right-color: #ee6252;}
.spfk-color5 a{
    background: #e23794;
    border-color: #e23794;
}
.spfk-color5 span{border-right-color: #e23794;}
.spfk-color6 a{
    background: #9537ff;
    border-color: #9537ff;
}
.spfk-color6 span{border-right-color: #9537ff;}
.spfk-color7 a{
    background: #0a5dff;
    border-color: #0a5dff;
}
.spfk-color7 span{border-right-color: #0a5dff;}
.spfk-color8 a{
    background: #cb3800;
    border-color: #cb3800;
}
.spfk-color8 span{border-right-color: #cb3800;}

这样三角形就不会脱离了。但是还是有一个小$BUG$：缩放时三角形的高度与方框不一致，导致轻微的上下错位。不过放大基本是看不出来的，至少得240%才会触发；而缩小虽然明显能观察到，但是$sakura$本身字体已经够小了，我想一般也很少有人会往小了缩吧。

归档页面优化

「全部展开/收缩」按钮优化

在\themes\sakura\layout\archive.ejs中，找到：

<p style="text-align:right;">
  [<span id="al_expand_collapse" style="cursor: s-resize;">全部展开/收缩</span>]</p>

修改为：

<p style="text-align:left;">
  <button id="al_expand_collapse">
    <style>
    button#al_expand_collapse {
        color: white;
        border-radius: 16px;
        font-weight: bold;
        font-size: 15px;
        background-color: #ff9100;
        transition-duration: 0.3s;
        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.11), 0 3px 8px 0 rgba(0,0,0,0.11);
        outline: none;
    }
    button#al_expand_collapse:hover {
        transition: all 0.2s linear 0s;
        background-color: #ff5900; 
    }
    </style>
    <i class="fa fa-bars" aria-hidden="true"></i> 全部展开/收缩
</button>
</p>

页首优化

浏览各个主页面的时候总觉得怪怪的，发现原来是归档页面没有配图。

然而归档是一个特殊页面，没有md文件也没法配图。

于是暴力修改ejs文件，顺便使其样式与其它页面相同：

在\themes\sakura\layout\archive.ejs中，在第一行：

<div class="blank" style="padding-top: 75px;">
</div>

修改为

<div class="pattern-center-blank" style="padding-top: 75px;">
</div>
<% if ( theme.archivesimg && theme.archivesimg.length ){ %>
    <div class="pattern-center-sakura">
      <div class="pattern-attachment-img">
        <img src="<%- theme.lazyloadImg%>" data-src="<%= theme.archivesimg %>" class="lazyload" onerror="imgError(this,3)" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;">
      </div>
      <header class="pattern-header ">
        <h1 class="entry-title">
        归档</h1>
      </header>
    </div>
  <% } %>

删除：

    <header class="page-header">
      <h1 class="cat-title">
      归档</h1>
      <span class="cat-des">
        <p>
        Archives</p>
      </span>
    </header>

在主题配置文件中添加：

archivesimg:

后面填上图片路径，注意加空格。

标题修改

归档页面的标题一直叫archive_a，肥肠神奇。

在\themes\sakura\languages\zh-cn.yml开头添加：

archive_a: 归档

我不用不蒜子啦！

一直对不蒜子阅读量统计不满意，加载速度慢，经常卡住。

$Valine$同样有阅读量统计，而且$leancloud$的速度我是很信任的。

在\themes\sakura\source\js\sakura-app.js中，找到函数valine.init，在appKey一行下面添加：

+ visitor: true,

在\themes\sakura\layout\_partial\comment.ejs中进行同样的修改。

删除：

- $.getScript('//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js');

在\themes\sakura\layout\_widget\common-article.ejs中，替换（有两处）：

- <span id="busuanzi_value_page_pv"></span>次阅读
+ <span id='/<%= page.path %>' class="leancloud-visitors" data-flag-title="<%= page.title %>"><a class="leancloud-visitors-count">1000000</a><a class="post-meta-item-text"> 次阅读</a></span>

在\themes\sakura\layout\_partial\footer.ejs中删除：

- <script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

原来的阅读量丢失了？$Valine$阅读量统计以及评论有一个非常大的特点，就是随意更改。

到$leancloud$你创建的应用里，存储→Counter就是阅读量统计了。不过没啥好办法，只能一个一个改。

我不用Hexo啦！（雾）

神秘の传送门

偶然间发现的，魔改博客园为$sakura$样式！而且还原度极高！

试了试水，效果很惊艳。

当然我没有想法转到博客园上，链接挂在这给需要的同志，并膜拜+资瓷作者。

加个游戏

我们不生产游戏，我们只是代码的搬运工。

步骤都是一样的（name代指游戏名）：

1.在\source中新建name.html，把链接里的内容粘进去。

注：我为了缩小html体积使用了html美化工具压缩，如果想魔改需要美化回去。

2.在站点配置文件中，skip_render一栏添加：name.html。如果有多项按如下格式添加：

skip_render:
  - ...
  - ...
  - name.html

3.访问博客地址/name.html开始游戏（去掉.html后缀也行）

闲扯：本来是想直接挂一个下载链接的，但是不知道为啥我的blog的<a>标签无法用download属性转成下载链接，只好挂github链接。。。

2048

来源：直接从这位dalaoのblog里搬来的。

链接：2048

说明：

原博客采用的$K-ON$风格，我魔改成了点兔的，同时也对html结构进行了少量修改。

若想修改图片（需要一些html、css的基础知识）在引入的main.css中能找到，懂的自然懂~

flappy bird

来源：https://github.com/sharpwind612/My-flappy-bird

链接：flappy bird

五子棋

来源：http://kai.xlightgod.cf/

链接：gobang

生火间

来源：https://github.com/doublespeakgames/adarkroom

链接：a dark room

说明：

由于我剽的时候疏忽了，没有改js里的路径，恰好我的git无法push，更新不了html文件。生火间需要额外在\themes\sakura\source\css里新建dark.css，内容戳这儿。

水果忍者

来源：https://blog.csdn.net/aaa333qwe/article/details/72879188

链接：fruit ninja

模糊字体

从这个博客发现的。

就像这样：

戳这儿→ 被你发现了

在\themes\sakura\source\css\style.css中，添加：

span.spoiler:hover {text-shadow: grey 0px 0px 4px;}
span.spoiler {
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    text-shadow: grey 0px 0px 8px;
    cursor: pointer;
    -webkit-transition: text-shadow .5s ease;
    -moz-transition: text-shadow .5s ease;
    transition: text-shadow .5s ease;
}
span.spoiler.revealed {text-shadow: grey 0px 0px 0px;}

在\themes\sakura\layout\_widget\common-article.js中，添加：

<script>
var spoiler=document.getElementsByClassName('spoiler');
for(var i=0;i<spoiler.length;++i)
spoiler[i].onclick=function(){this.classList.toggle("revealed");};
</script>

按如下格式食用：

<span class="spoiler">文本</span>

文章信息添加「分类于」

在\themes\sakura\layout\_widget\common-article.ejs中，<%= date(post.date, 'YYYY-M-D') %>下面添加：

    <span class="bull"></span>
    <% if(post.categories && post.categories.length){ %>
      <span><i class="fa fa-archive"></i> 分类于  
        <% post.categories.each((category)=>{ %><span class="article-category"><a href="<%- url_for(category.path) %>" > <%= category.name %></a></span>
      <% }) %>
    </span>
    <% } %>

在\themes\sakura\source\css\style.css中，添加：

.article-category{
    display: inline-block;
    line-height: 0 !important;
    margin: 0;
    padding: 0.55rem 0.2rem;
    border: 1px solid #0a87ff;
    background: rgba(255, 255, 255, 0.93);
    color: #0a87ff !important;
    text-decoration: none;
    font-size: 13px;
    text-shadow: none;
    box-shadow: 0 0 6px #111;
    transition: all 0.1s linear;
    border-radius:10%;
}
.article-category:hover{
    transition: all 0.1s linear;
    color: #fff !important;
    background: #0a89ffec;
}
.article-category a{color:inherit !important;}

施工中…

~~闲的蛋疼加了这么一个功能~~

如果某篇文章没有完成~~不传上去不就行了~~，在front-matter里加上一句incomplete: true，文章底部就会酱紫：

施工中...

不要问我为什么是哔咔娘

在\themes\sakura\layout\_widget\common-article.ejs中，<%- post.content %>下面添加：

<% if(post.incomplete&&post.incomplete==true) {%>
<hr>
<center><img class="lazyload" onerror="imgError(this,3)" src="https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.7.9/lazyload.gif" data-src="https://cdn.jsdelivr.net/gh/ctz45562/cdn@2.0.3/emojis/gif/23.gif"></center>
<p style="font-size:32px;text-align:center;margin-top:-2px">施工中...</p>
<% } %>

瞎搞

记录一下瞎删掉的东西，要是有了$BUG$还原一下。

1.在\themes\sakura\source\js\sakura-app.js中，$.getScript('//cdn.jsdelivr.net/vue/latest/vue.min.js', function () {一行下面，删除了：

    $.getScript('//unpkg.com/botui/build/botui.min.js', function () {
        bot_ui_ini()
    })

2.在\themes\sakura\layout\_widget\common-article.ejs中删除了：

<div class="toc" style="background: none;"></div>

3.在\themes\sakura\source\css\style.css中，删除了：

button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover {
    /*border-color:#ccc #bbb #aaa;*/
    /*box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 15px 17px rgba(255,255,255,.8),inset 0 -5px 12px rgba(0,0,0,.02)*/
}
button:focus,input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,button:active,input[type="button"]:active,input[type="reset"]:active,input[type="submit"]:active {
    /*border-color:#aaa #bbb #bbb;*/
    /*box-shadow:inset 0 -1px 0 rgba(255,255,255,.5),inset 0 2px 5px rgba(0,0,0,.15)*/
}

#bgvideo {
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    min-width:99.999%;
    min-height:550px;
    z-index:0
}
#video-btn,#video-add {
    position:absolute;
    bottom:3px;
    right:5px;
    width:32px;
    height:32px;
    z-index:7;
    background-position:center;
    background-size:cover;
    cursor:pointer;
    opacity:.8;
    -moz-animation:poi-face 10s linear infinite alternate;
    -webkit-animation:poi-face 10s linear infinite alternate;
    -o-animation:poi-face 10s linear infinite alternate;
    animation:poi-face 10s linear infinite alternate
}
#video-btn:hover,#video-add:hover {
    opacity:1
}
.video-play,.loadvideo {
    background-image:url('https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/play@32x32.png')
}
.video-pause {
    background-image:url('https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/pause@32x32.png')
}
#video-add {
    background-image:url('https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/add@32x32.png');
    bottom:45px;
    display:none
}
.video-stu {
    position:absolute;
    bottom:-100px;
    left:0;
    right:0;
    margin:auto;
    padding:6px 15px;
    text-align:center;
    color:#fff;
    width:100%;
    background-color:rgba(0,0,0,.8);
    border-radius:0;
    font-size:18px;
    -webkit-transition:.4s ease all;
    -moz-transition:.4s ease all;
    -o-transition:.4s ease all;
    transition:.4s ease all
}

  cursor:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/No_Disponible.cur),auto;

  cursor:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/normal.cur),auto

  cursor:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/texto.cur),auto

4.\themes\sakura\source\css\style.css：

- .logolink a:hover .sakurasono {
-     background-color:orange;
-     color:#fff
- }

.logolink .sakurasono：

- background-color:rgba(255,255,255,.5);

在.logolink a:hover .shironeko,.logolink a:hover rt前添加了：.logolink a:hover .sakurasono,

5.\themes\sakura\layout\_partial\head.ejs：

- <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">
- <link rel="stylesheet" href="/css/lib.min.css" media="all">\
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.1/css/googlefont.css" media="all">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.1/css/lib.min.css" media="all">

6.\themes\sakura\layout\_partial\footer.ejs：

- <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.2/js/clipboard.min.js"></script>

7.在\themes\sakura\source\js\sakura-app.js中，修改了：

- $.getScript('//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js');
+ $.getScript('//cdn.jsdelivr.net/gh/ctz45562/cdn@1.4.0/js/busuanzi.pure.mini.js');

8.在\themes\sakura\layout\_widget\common-page.ejs倒数第二行：

- </div>
+ </article>

9.在style.css中：

#page {
-    min-height: calc(100vh - 150px);
+    min-height: calc(100vh - 45562px); 
}

10.在common-article中：

- <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
+ <link rel="stylesheet" href="https://cdn.bootcss.com/tocbot/4.8.0/tocbot.css">

11.在\_partial\footer.ejs中：

- <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/disqus-preloader.svg">

12.在\layout\_widget\index-items.ejs中：

- <div class="float-content"></div>

13.在\source\css\style.css中：

@media(max-width:800px) {
    .changeSkin-gear span::before {
    content:""
}
.changeSkin i {font-size:20px}
.changeSkin-gear i {font-size:20px}
}
- position:relative;
-    z-index:99;
-    cursor:pointer
- }

14.删除了关于主题配置文件中的prefixName。

在\layout\_partial\header.ejs中：

-            <span class="sakurasono"><%= theme.prefixName %></span>
-            <span class="shironeko"><%= theme.siteName %></span>
+            <span class="sakurasono"><%= theme.siteName %></span>

在\source\css\style.css中，删除了所有.shironeko。``

To be continued...

前言

基本配置

Mathjax

纠错

加速

代码高亮

搜索

Fancybox

添加支持

主页

添加

配置样式

js支持

解决「显示更多」js不加载问题

文章列表

大清洗

网易云播放器

主页的视频功能

打赏和转载

复制附加版权信息

页面底部版权信息和转发功能

代码框打开功能

外观美化

个性化css

主题工具

添加

更换图片

位置和外观

字体切换

加特技

拓展

更换时间和阅读数的图标

首页文章描述左对齐

分割线

代码行高亮

表情

更改主题颜色

整体

链接

代码块

搜索框

文章信息文字阴影加深

修改文章配图height

文章列表图片拉伸问题の解决

引用样式修改

主页startdash美（丑）化

通告栏美化

菜单图标美化

基础

支持iconfont

动态图标

板块化

杂七杂八

评论

Valine输入框内容更改

Valine外观美化

Valine炸了

我不用Valine啦！（雾）

Valine超进化——Volantis！

添加

表情强化

VolantisのDIY

添加标签

标签页

文章标签

v1.0：landfarzの朴素文字

v2.0：来自butterflyの支持

v3.0：强♂迫SPFK支持

v4.0：缩放BUG？不存在的！

归档页面优化

「全部展开/收缩」按钮优化

页首优化

标题修改

我不用不蒜子啦！

我不用Hexo啦！（雾）

加个游戏

2048

flappy bird

五子棋

生火间

添加``支持