Hexo的SPFK主题修改小记

前言

　　Shaun 一直在对 Hexo 的 SPFK 主题进行持续修改以符合 Shaun 自己的需求，在修改当中也会遇到一些小问题，以防遇到重复问题，特此记录所遇小问题，至于大问题可能会另外开篇。

修改篇

1、修改 aboutme 排版问题

修改日期：2017-09-16

需求描述：Shaun 为了使 aboutme 排版好看一点，使“关于我”的内容更有段落感，Shaun 尝试在主题配置文件中 aboutme 对象的内容添加各种换行转义符号均于事无补，如 \n、\r\n、
、
、<br /> 等，站点不仅不会换行，还会直接将转义符号都显示出来 (╯﹏╰）。

解决办法：既然 Shaun 基本把所有的换行方法都试过了，还没有任何作用，那就只能是问题出在其它地方了。Shaun 首先找到显示 aboutme 内容的地方，其位于主题文件夹下 \layout\_partial\left-col.ejs，显示 aboutme 内容的代码为 <div id="js-aboutme"><%=theme.aboutme%></div>，查阅相关资料，具体为 与大家分享ejs源码阅读心得，其中有这样一段话：

关于ejs模板的五种模式对应几种指令

ejs主要提供了如下几种指令:

• <%, 该指令主要通过js中的eval来执行js代码, 如上模板代码<% [1,2].forEach(function(v){ %>将通过eval编译成; [1,2].forEach(function(v){即直接可执行的js代码, 并且不会存放到__output函数中输出.
• <%=, 该指令主要用于输出变量内容, 如上模板代码<%= v %>将通过escape函数编译成__append(escape(v)), 可以看到该指令用于输出变量内容, 最后将通过__output输出内容.
• <%-, 该指令与<%=区别是, <%=指令使用escape函数来对特殊字符进行编码, 如将>转为%3E, 查看关于escape函数.
• <%#, 该指令主要用于模板内注释, 既不会执行也不会输出.
• <%%, 主要用于输出字面值%.

关于以上各个指令对应的解析, 可参考ejs源码根目录lib/ejs.js文件中的scanLine函数.

从中可得知 <%= 指令会将变量内容中一些特殊字符先转义，再原封不动的输出，所以 Shaun 无论怎么修改主题配置文件中 aboutme 对象的值，其输出内容都会是原封不动的 aboutme 对象的值。为了让其输出内容可以有相应的特殊格式，就不能让其转义，只能用 <%- 指令，将其修改为 <div id="js-aboutme"><%-theme.aboutme%></div>，这样就能使输出内容可以自定义特殊格式，Shaun 最后在 aboutme 对象的内容中需要换行的地方添加了 <br />，实测如此修改后可以换行。

2、给左栏添加滚动条

修改日期：2017-09-18

需求描述：SPFK 主题是双栏的主题。因为左栏主要是用来显示一些菜单和头像等内容，这些内容也不多，所以原作者就没有添加滚动条。但是由于 Shaun 添加了个本地搜索功能，在刚开始文章少的时候还不受影响，但是随着文章的增多，搜索功能就会影响左栏的布局，这是就必须添加一个滚动条了。本以为添加滚动条很简单，就是添加一个 overflow: auto;，谁知道还没这么简单 ╮(╯﹏╰）╭。

解决办法：Shaun 对问题的定位没问题，就是修改主题文件夹下的 \source\css\_partial\main.styl 文件中 .left-col 样式，问题在于怎么修改，本想直接在其中加入 overflow: auto;，按道理说问题就能解决的，但是 Shaun 去搜索试试，发现搜索框上方的头像，文字等全部消失了，滚动条没起到作用，而下方的菜单可以通过滚动条看到。于是 Shaun 觉得可能是 div 上界没撑开，而超出的地方却隐藏了，但下界为什么能撑开，Shaun 这里还是很不明白 ?_?。既然是这里隐藏了，Shaun 就去看相关标签有没有 overflow: hidden; 属性，谁知道要么是没有，要么是即是关闭了也没有作用，那问题应该不是出在这里。就只能是这些元素所在的子 div 里了，Shaun 找到其子 div 属性 .intrude-less，其中虽有 overflow: auto; 但没设置 height 属性，所以就不能发挥其作用，Shaun 于是给它加上 height 属性，搜索后发现有两个滚动条，这显然不简约，于是 Shaun 把 .intrude-less 的 overflow: auto; 属性注释掉，没想到居然能完美解决问题，可能是因为加上高度属性之后就能撑大父元素 div 了吧（来自某业余前端的猜测 (⊙_⊙)）。后面为了更美观，Shaun 把下方菜单区域的 div 样式 .switch-area 高度 min-height 改小了一点，顺便也把主题文件夹下的 \layout\_partial\left-col.ejs 文件中首行注释掉 <!-- <div class="overlay"></div> --> 。Shaun 也曾想把 height 改为 min-height，谁知道又出现相同的问题，不得不又改回去。虽然这次已经解决了问题，但有些细节问题还是不太明白，只有等以后前端水平上去了再去想了，如有大佬知道还望不吝赐教 (^人^)。

3、更换鼠标指针

修改日期：2017-9-26 ~ 2017-9-27

需求描述：Shaun 在玩《Ori and the Blind Forest》这款游戏的时候觉得其鼠标指针很酷炫，于是想把其鼠标指针放在 Shaun 的博客站点中 (๑´ڡ`๑) 。

解决办法：要想更改指针，首先需要找到对应的指针文件，最终在万能的贴吧得到指引，在 RealWorld Graphics 上找到两个 ori指针 文件，一个是 动态的 ani指针文件，还有一个是 静态的 cur指针文件（好像该游戏的作者也在 steam 上的评论中提供了游戏中的指针文件，详见：I wanna use this games cursor. ）。既然已经找到了指针文件，就可以开始更换炫酷的鼠标指针 (•̀ᴗ•́)。具体更改方法如下：将下好的指针文件放在主题文件下的 \source\img 文件夹中，在主题配置文件中添加 cursor 属性：

# set cursor | 设置鼠标指针图标
cursor: 
  on: true
  cursor_0: img/cursor.ani  # 首选指针 
  cursor_1: img/cursor.cur  # 备选指针

其中 cursor_0 和 cursor_1 代表使用哪个指针，因为 firefox 和 chrome 不支持 ani文件 的指针（好像是 ani 文件有很大的漏洞），所以 ani 动态指针是用不了的，只能用 cur 格式的静态指针，而 IE 是可以加载 ani 格式的动态指针，所以 Shaun 这里就将两个指针文件全放上去了，首选加载动态指针；最后增加相应的代码调用 cursor 属性，加载指针文件，在主题文件夹下 /layout/_partial/background.ejs 文件末尾添加：

<% if (theme.cursor.on){ %>
    <style>
        body{
            background: #3f3f3f;
            cursor: url(<%- config.root %><%- theme.cursor.cursor_0 %>), url("<%- config.root %><%- theme.cursor.cursor_1 %>"), auto;
        }
    </style>
<% } %>

如此更新站点之后即可使用新鼠标指针样式，可能需要先进行 hexo clean 再发布。

BTW：这次修改是一个月之前的了，当时不知怎么的忘记记录了，还好 Shaun 的 git 提交记录比较详细，对应的提交记录为：add a function -- change cursor和update set cursor function 。

4、修改打赏问题

修改日期：2017-10-13

问题描述：Shaun 突然想玩一下那个打赏小东西，但照配置文件中指示的那样在文章开头 ymal 格式中加入 reward: true 属性，没有任何作用，于是去主题文件夹搜索 reward 属性相应的代码，结果是“找不到结果”（坑爹了这是，摔！（╯‵□′）╯︵┴─┴ ）。

解决办法：既然 reward 属性找不到就只有搜索 reward_type 属性，最终在主题文件夹下 \spfk_c\layout\_partial\article.ejs 文件中找到这样一条语句 <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.toc)) && !index){ %>，其下面就是打赏相关的代码，查看 SPFK 主题原作者介绍信息（Hexo 主题：SPFK）发现 toc 属性是用来显示目录的（一个用来打赏的代码怎么与文章目录相关了 -_-#），所以上面的 toc 应该改成 reward，修改后的代码为 <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>，这时照配置文件中指示的那样在文章开头 ymal 格式中加入 reward: true 属性就能在相应的文章后面看到一个大大的“赏”字。

本来写到这里应该打赏这玩意应该完结了，但 Shaun 无意中在该文件的下面发现这样一段代码：

<% if (!index && post.toc != false && !is_page()){ %>
    <%- partial('_partial/toc') %>
<% } %>

这是和 toc（即文章目录）真正相关的代码，功能大概就是判断是否加载文章目录相关的代码，如果在文章开头设置 toc: false，则该文章不会显示目录，但是如果在文章中不加 toc 属性，也会显示文章目录，但上面的打赏却不会显示，看起来 post.toc != false 和 post.toc 应该逻辑差不多，这里是 Shaun 感到十分奇怪的一个地方？后面查阅相关资料（JavaScript undefined 属性）得知:

注释：null 表示无值，而 undefined 表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。

而本文这里因为没有在文章开头设置 toc 属性，所以其为 undefined，其既不为 false 也不为 true，只为 undefined，当在 if 语句中做判断，会执行 else 分支，作 ! 运算，结果则为：true。所以 if(post.toc) 不能执行其下代码，因为 post.toc 为undefined，不为 true 也不为 false，而 if(post.toc != false) 能执行其下代码，因为 post.toc != false 为真。至于 javascript 中 if(a == ture) 和 if(a) 的区别具体为：前一种是 a 必须为 1 或者 true 才执行；而后一种只要 a 不为 false undefined null 0 -0 NaN "" 这 7 个字符中的其中任何一个都能执行。

5、交换内容栏和左侧栏位置

修改日期：2017-11-22 ~ 2017-11-23

需求描述：Shaun 最近逛网站时发现，好像一些博客网站基本都是把内容放在左侧，百度和 google 的搜索结果也是在左侧，可能是内容在左侧要好一点吧，于是 Shaun 略微修改之后，将内容放在左侧，而原来的左侧栏放到最右侧，好像是顺眼了一点（不排除是心理作用 (ಡωಡ)），如果以后还觉得不错的话，再把相关的变量名换掉吧（此次修改仅仅是将 CSS 相关的值改变，div 类名没变）。

解决办法：首先当然是定位左侧栏 .left-col，它在主题文件夹下 source/css/_partial/main.styl 文件中，为其添加 right: 0px; 属性，使左侧栏靠右侧停放；在定位内容栏 .mid-col ，将 right:0; 改成 left:0;，将 left: 300px; 改成 right: left-col-width;，使内容栏靠左侧停放，同时使其距离右侧有左侧栏的宽度。最后就是再修改其他一些小东西（比如目录按钮和目录内容 div 等）的 css 值，关于这个 Shaun 就不细述了，反正也就是更改 left、right、bottom 以及 top 属性及其值，具体修改了哪些内容可以见 Shaun github 提交记录。

BTW：诶呀呀！昨天忘记测试手机端，今天用手机打开一看，手机端页面也距右边 left-col-width 宽度，这使得内容全挤在一起了，完全没法看 ರ_ರ ...。所以不得不添加手机端样式，定位手机端 .mid-col，它在主题文件夹下 /source/css/_partial/mobile.styl 文件中，为其添加 right: 0; 属性值；后面看见回到顶部、回到底部的导航栏也有点问题，就在该文件中 /*导航*/ 下面 .scroll 上面添加：

#scroll{
    right: 0;
}

使得该导航栏靠右停靠。

6、更新站点部分 CSS 文件和代码结构

修改日期：2017-12-04 ~ 2017-12-06

更新日志：

1. Shaun 将 left-col 相关的东西（比如 css 样式和 ejs 文件）全部重名为 right-col，毕竟经过几天的适应，感觉放在右侧还不错，就干脆也将其重命名算了，所以原左侧栏 left-col 从现在开始就完全变成右侧栏 right-col 了；

2. 原来的本地搜索框有两个 .search 样式，本次修改将两个 .search 样式合并了，删除重复的样式，只留下一个合并后的 .search 样式；Shaun 同时还优化了一下本地搜索功能的结构，将原来主题配置文件中的 search_box 属性删掉，给 search 属性添加一个 on 的属性来代替 search_box 属性，这样让结构不那么混乱，只由一个 search 属性决定本地搜索功能的开启和关闭及功能的实现，而不是像以前那样由 search_box 属性决定右侧栏搜索框的显示，而 search 属性决定本地搜索功能的实现；

3. 更改右侧栏 right-col 的 overflow 样式，原来是右侧栏 right-col 垂直超出滚动，水平超出隐藏，这样在屏幕比较窄的情况在右侧会出现两条滚动条，很不美观。现在 Shaun 将 overflow 样式改成 &:hover {overflow-y: auto; overflow-x: hidden;} ，这样只有在鼠标指针悬浮在右侧栏 right-col 上时才会再右侧栏出现滚动条，这样虽然不能从根本上解决问题，但稍微缓解了一下，等以后再看能不能彻底解决滚动条的问题 ರ_ರ ...；

4. Shaun 以前添加 RevolverMaps 这个小部件的时候只是简单粗暴的添加 div 及对应的样式，完全没考虑到主题的扩展性和易修改性。于是 Shaun 将其改成配置文件的形式，在主题配置文件中添加 visual_visitor 属性，只要将其值设置为 RevolverMaps官网 获取的那串 script code，eg：

   <script type="text/javascript" src="//ra.revolvermaps.com/0/0/8.js?i=0lpycb5p234&amp;m=7&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=49" async="async"></script>，即可在右侧栏菜单下的访问情况中看到一个 3D 地球实时显示访客的位置信息，Shaun 为了优化异步访问信息，将其中的 async="async" 改成 defer="defer"，这样好像能优化加载次序。这两者的区别可参考 defer和async的区别，好像是都能异步加载，只是 async 是该 script 加载完立即执行，而 defer 是该 script 加载完之后在整个页面结束加载之前执行，也就是最后执行的；

5. 最后还修改了 MathJax 的 CDN 地址及配置属性。MathJax 的配置属性可参考 加载和配置MathJax，具体如下：

   第一种配置Mahtjax的方法就是使用配置文件。MathJax附带了很多种预制配置文件。它们存储在MathJax/config 目录。主要有其中以下几个：

   • default.js：这个文件包含了所有MathJax可用的配置选项，并附有注释和说明，你可以编辑它们来满足你的需要。
   • TeX-AMS-MML_HTMLorMML.js：允许使用 TeX, LaTeX, 或者MathML 符号书写公式。如果浏览器支持就处理为MathML，否则就使用Html和Css渲染。
   • TeX-AMS_HTML.js：允许使用 TeX 或者 LaTeX 符号书写公式。使用Html和Css渲染。
   • MML_HTMLorMML.js：允许使用 MathML 符号书写公式。如果浏览器支持就处理为MathML，否则就使用Html和Css渲染。
   • AM_HTMLorMML.js：允许使用 AsciiMath 符号书写。如果浏览器支持就处理为MathML，否则就使用Html和Css渲染。
   • TeX-AMS-MML_SVG.js：允许使用 TeX, LaTeX, 或者MathML 符号书写公式。使用SVG产生输出。
   • TeX-MML-AM_HTMLorMML.js：允许使用 TeX, LaTeX,MathML,或者 AsciiMath 符号书写公式。如果浏览器支持就处理为MathML，否则就使用Html和Css渲染。

   第一个文件是提供给你修改的。它基本上包含了MathJax的所有配置选项，同时有注释解释。其他的文件就是我们联合配置文件。它们不仅仅配置Mathjax,还预加载了一些配置所需的文件。这些文件内容在 联合配置 中有详细的解释。

   原来的 CDN 地址 cdn.mathjax.org 已经在 2017-04-30 日关闭，所以必须更新 CDN 地址，其推荐的 CDN 地址为 cdnjs.cloudflare.com/ajax/libs/mathjax，而新的 MathJax 也提供一种一种新的配置文件 TeX-MML-AM_CHTML（允许使用 TeX, LaTeX,MathML或者 AsciiMath 符号书写公式，使用 CommonHTML 产生输出），新的 MathJax 推荐使用的就是这种配置文件，因为它计划在 V3.0 将 HTML-CSS 输出格式丢弃，只留下 CommonHTML 和 SVG 这两种输出格式。而且新的 CDN 地址不支持 /latest/MathJax.js 这种格式，必须指定一个确定的版本，截止 Shaun 此次修改日期之前，最新的版本为 2.7.2，所以比较推荐的一种加载格式为：

   <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script> 。

7、添加 404 页面和一些插件等

修改日期：2017-12-09 ~ 2017-12-10

更新日志：

1. 修改文章内 a 标签的高度，即 .article-entry p a 中 padding 的上下边距。文章内的 a 标签在外面加个虚线框本来就很突出了，还设置上下 padding 为 8px，这就显得有点浮夸了 :) 。最后将其上下边距设为 0px；

2. 添加 404 页面，具体参考自：在 Hexo 中创建匹配主题的404页面，

   1. 启动 Git Bash，进入 Hexo 所在文件夹，输入 hexo new page 404 ；
   2. 打开刚新建的页面文件，默认在 Hexo 文件夹根目录下 /source/404/index.md；
   3. 在顶部插入一行，写上permalink: /404，这表示指定该页固定链接为 http://"主页"/404.html

   title: 404 Not Found：该页面无法显示
   toc: false
   comments: false
   permalink: /404
   ---

3. 添加 hexo-abbrlink 插件，使文章生成唯一永久链接。这个插件最好是在建站之初就加上，不然写了很多文章之后又都得重新生成链接，搜索引擎需要再次抓取新链接，不利于 SEO，Shaun 这里也就只有等 Google 慢慢抓取更新，还好写的不多，不算太迟。安装完之后 Shaun 在站点配置文件中添加：

   permalink: posts/:abbrlink.html # 需安装hexo-abbrlink插件
   abbrlink:
     alg: crc32  # 算法：crc16(default) and crc32
     rep: hex    # 进制：dec(default) and hex

   ※BTW：需要将原来的 permalink 注释掉或直接删除。

   更多设置可参考 hexo-abbrlink 。

4. 添加 hexo-all-minifier 插件，快速压缩代码，分别对 html、css、js、images 进行优化。Shaun 这里就直接使用推荐的配置了，直接在站点配置文件中添加：

   all_minifier: true  # 需安装hexo-all-minifier插件

   更多设置可参考 hexo-all-minifier 。

5. 原来文章标题不可点击，反而日期可点击，这有点奇怪 ◔ ‸◔?。本次修改之后，点击文章标题即为刷新页面。

更新日期：2017-12-19 ~ 2017-12-19

具体修改内容：主要更新了 404 页面上面的动图，个人偏好喜欢一些星系漩涡之内的动图，偶然发现这个东西（HTML5+Three.js实现的3D可拖拽银河星系旋转动画特效源码），于是将它的源码略作修改放进 Shaun 的 404 页面，将相关的 js 文件放入主题文件夹中 \source\js 文件夹里，最初时是将相关 js 文件引入路径当成相对路径引入，没想到这样造成有的 404 页面会显示旋转动图，而有的 404 页面则不会显示，后面参考网上资料（解惑页面中的相对路径和绝对路径）了解到：

1. html 中引入的资源（包括js、css、img）
   • 相对路径：相对的是 网页本身的 URL ；
   • 绝对路径：相对的是 网页 URL 的根路径 ；
2. css 中引入的资源
   • 相对路径：相对的是 css 文件本身的 URL ；
   • 绝对路径：相对的是 网页 URL 的根路径；

结论： html 中引入资源的相对路径与 网页的 URL 有关，而css中则与 css 资源本身 URL 有关。但使用绝对路径时，不管是在 html中，还是css中，都只与 网页 URL的根路径有关。

将相对路径改为绝对路径，即可在 Shaun 博客域名下所有 404 页面正常显示旋转动图。

8、添加 Gitalk 评论系统

修改日期：2017-12-16

　　Gitalk 是一款类似 gitment 的评论系统，Shaun 先是照着它提供的配置添加之后，发现居然与 spfk 主题中的 require-2.1.6,jquery-1.9.1.min.js 冲突，显示不了 Gitalk，Shaun 以为是 bug，所以就去提了个 issue，作者 booxood 还是挺认真负责的（°Д°）Ъ，耐心的解决 Shaun 的问题，原来是 Shaun 的引用方式有问题，需要用 require 方式引用，大佬就是大佬 ○|￣|_，小白还是小白，萌新完全没见过还有这种操作，也算是开眼界了 ✪ω✪。由于大佬解决完问题之后就直接把 issue 关闭了，所以 Shaun 就只有在这里表示感谢了 /つ∇T)。Shaun 最后添加 gitalk 的 ejs 代码如下：

<div id="comments" class="gitalk">
    <div id="gitalk-container" class="article article-inner article-entry"></div>
    <script type="text/javascript">
        require(['https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js'], function (Gitalk) {
            var gitalk = new Gitalk({
                clientID: '<%= theme.gitalk.client_id%>',
                clientSecret: '<%= theme.gitalk.client_secret%>',
                id: window.location.pathname,
                repo: '<%= theme.gitalk.repo%>',
                owner: '<%= theme.gitalk.owner%>',
                admin: '<%= theme.gitalk.admin%>',
                // facebook-like distraction free mode
                distractionFreeMode: true
            })
            gitalk.render('gitalk-container')
        }) 
    </script>
</div>

还有其它的一些修改也是仿照 gitment 的代码添加的，我这上面没有添加 css 文件是因为 gitalk 原有的 css 文件与 Shaun 的主题不相符，所以就稍微修改了一下。

※BTW：上次修改文章内a标签的高度后突然发现打赏的“赏”字背景圆形变成椭圆了 o(╯□╰)o，后面发现原来它也继承文章内 a 标签的属性，没有自己的 padding，后面只有给 .dashang 添加个独立的 padding: 8px;。

9、Fix Bugs

修改日期：2017-12-20

修复bug：鼠标悬浮 a 标签之上会出现显示 a 标签 title 内容的气泡，当 title 内容过多时，会造成气泡位置下调，从而遮住相应 a 标签内容的 bug。

解决方案为：定位气泡文件为主题文件夹下 \layout\_partial\post\TipTitle.ejs 文件，将其中气泡出现的位置改变，原来气泡的位置确定由 top 和 left 决定，现改为 bottom 和 left，毕竟气泡是出现在 a 标签上方，如果将 top 确定，则 title 内容过多时，其只能向下扩张，造成气泡位置下移现象，从而遮住原来的 a 标签内容，改为 bottom 确定之后，气泡只会向上扩张，气泡位置相对稳定，不会遮住原来的 a 标签内容。具体修改内容为，将 top: offset.top - a.outerHeight() - 15 替换为 bottom: window.innerHeight - offset.top + 10 ，其它内容保持不变。

修改日期：2017-12-26

BUG描述：由于 spfk 主题启用的是百度分享，而原作者没有为其添加邮件分享，Shaun 为了好玩就添加个邮件分享，但是在添加过程中，Shaun 发现了个 BUG，就是为其添加的 title 属性没有作用，它会自动更改 title 内容，而 spfk 主题有显示 title 的气泡 TipTitle，所以不需要用默认的东西显示 title 内容，但是，这个百度分享还是强制默认显示，TipTitle 并不能消除其 title 内容。

解决方案：定位百度分享强制添加 title 的代码，其位于主题文件夹下\source\static\api\js\view\share_view.js 中，具体代码如下：

function(e){
  var i=e.partners,s=i[n]?"\u5206\u4eab\u5230"+i[n].name:"";
  !r(t).attr("title")&&s&&r(t).attr("title",s)
}

因为 TipTitle 会首先将 title 去掉，所以这里会强制添加百度分享自己的 title，所以需要将其注释掉，具体注释代码为：/*&&r(t).attr("title",s)*/。本来这样就可以了，但是 Shaun 发现添加邮件分享之后，布局又不对，所以定位主题文件夹下 \source\css\_partial\baidushare.styl 文件，发现它的居中布局居然是有宽度决定的，于是 Shaun 为其添加 text-align: center; 谁知还是没变，不能自动居中，后来在主题文件夹下找到 \source\static\api\css\share_style2_24.css 文件，发现 .bdshare-button-style2-24 a 设置了浮动样式，难怪（⊙﹏⊙），最后将其注释掉就能自动居中了。最后还需要更改移动端 \source\css\_partial\mobile.styl 中 .bdshare-button-style2-24 的样式设置为自动居中就可以了。

10、使文章目录可折叠

修改日期：2017-12-28

首先声明，本次修改完全参考：为 Hexo 添加可折叠的文章目录，所用代码也来自其文（Shaun 只是做了点微不足道的修改），在此表示感谢 Yelee 主题的作者 MOxFIVE 👍 。

具体修改如下：首先在主题文件夹下 \layout\_partial\toc.ejs 中添加 js 代码：

<!-- 折叠目录 -->
<script type="text/javascript">
    // -------------添加小图标--------------
    var $itemHasChild = $("#toc .toc-item:has(> .toc-child)");
    var $titleHasChild = $itemHasChild.children(".toc-link");
    $itemHasChild.prepend("<i class='fa fa-caret-down'></i><i class='fa fa-caret-right'></i>");

    var $iconToFold = $(".toc-item > .fa-caret-down");
    var $iconToExpand = $(".toc-item > .fa-caret-right");
    $iconToExpand.addClass("hide");

    // --------------点击小图标--------------
    var clickIcon = function () {
        $("#toc .toc-item > i").click(function () {
            $(this).siblings(".toc-child").slideToggle(100);
            $(this).toggleClass("hide");
            $(this).siblings("i").toggleClass("hide");
        })
    }()

    // 默认展开目录，所以隐藏掉表示“目录已展开”的图标（向下的小三角）
    var $iconToFold = $(".toc-item > .fa-caret-down");
    $iconToExpand.addClass("hide");

    // ------------点击大标题-----------------
    var clickTitle = function () {
        $titleHasChild.dblclick(function () {
            $(this).siblings(".toc-child").hide(100);
            $(this).siblings("i").toggleClass("hide");
        })
        // After dblclick enent
        $titleHasChild.click(function () {
            var $curentTocChild = $(this).siblings(".toc-child");
            if ($curentTocChild.is(":hidden")) {
                $curentTocChild.show(100);
                $(this).siblings("i").toggleClass("hide");
            }
        })
    }()

    // ---------点击总标题-----------------
    var clickTocTitle = function () {
        var $iconToExpand = $(".toc-item > .fa-caret-right");
        var $iconToFold = $(".toc-item > .fa-caret-down");
        var $subToc = $titleHasChild.next(".toc-child");

        var $tocTitle = $("#toc .toc-title");

        // 当包含多级目录时再执行
        if ($titleHasChild.length) {
            $tocTitle.addClass("clickable");
            $tocTitle.click(function () {
                if ($subToc.is(":hidden")) {
                    $subToc.show(150);
                    $iconToExpand.removeClass("hide");
                    $iconToFold.addClass("hide");
                } else {
                    $subToc.hide(100);
                    $iconToExpand.addClass("hide");
                    $iconToFold.removeClass("hide");
                }
            })
        }
    }()
</script>

然后添加相应的 css 样式，在主题文件夹下 \source\css\_partial\article.styl 中 #toc 样式里添加 css 样式：

ol.toc li.toc-item i {
   display: inline-block;
   margin-left: -0.9em;
   width: 0.9em;
   color: #b3b3b3;
   font-weight: bold;
   cursor: pointer;

   &:hover {
       color: #000;
   }

   &.hide {
       display: none;
   }
}  
.toc-title.clickable {
    cursor: pointer;

    &:hover {
        color: #88acdb;
    }
    &:active {
        color: #d3d3d3;
    }
}

以上两步做完之后，点击目录前的小三角符号或双击目录名就能折叠相应目录，点击“文章目录”就能折叠所有目录。

---

待续。。。

后记

　　先就写到这里，如后续修改中发现问题再继续记录吧 ↖(^ω^)↗。