Hexo主题修改记录

首先感谢 Litten提供的主题 yilia。
这几天花了点儿时间来对主题yilia进行微调。之后还会有一些改动，会在更新栏目里面说明。
本文主要是用来记录主题修改的过程 ( 主要是脑子不好使 (:3」∠) ) ，如果能给大家起到抛砖引玉的效果那就再好不过了。

---

更新记录

2016-01-05 — 添加「目录」
2016-01-05 — 添加「版权声明」

主题修改

为文章内容添加了黑幕遮盖效果

黑幕就是上面开头摘要中的黑框效果，用法嘛你懂的。 标签是HTML5引入的新标签。

打开 theme/yilia/source/css/style.styl，加入下面这一段css内容：

.heimu {
 background-color:
                            #252525 !important;
                          
 color:
                            #252525 !important;
                          
 }

以上面的黑幕效果为例，需要使用时在文中插入：

<ruby>
 <rp>(
 </rp>
 <span class=
                            "heimu" title=
                            "你知道的太多了">
 以及填充一下博客空白
                            #需要黑幕遮挡的内容
                          
 </span>
 <rp>)
 </rp>
</ruby>

开启多说评论

原主题已经嵌入了多说评论的代码，这里只需要获取 short-name就可以了。
首先需要去 多说创建一个站点。
之后在文件 theme/yilia/_config.yml中的相应位置填入 short-name即可。

为网站添加小图标

在 themes/yilia/_config.yml里将 favicon:替换为 favicon: /img/favicon.ico。
之后需要将favicon.ico图标文件放在 yilia/source/img目录下。
制作图标的网站有 faviconer和 比特虫等。

修改addthis样式

因为不喜欢share_jia的风格，所以这里先使用了addthis。但我发现addthis的样式并不统一，强迫症看着很难受就去addthis官网注册了个账户。
在文件 theme/yilia/layout/_partial/post/share_addthis.ejs中，把原内容替换为官网提供的内容：

<div class=
                            "share_addthis">
 <div class=
                            "addthis_sharing_toolbox">

 </div>
 <!-- Go to www.addthis.com/dashboard to customize your
                            tools -->
                          
 <script
                            type=
                            "text/javascript" src=
                            "//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-56890545bb1303cf"
                            async=
                            "async">
 </script>
</div>

添加目录

该目录的代码和样式均来自于luuman的 Hexo插件安装，在此表示感谢。
不过根据文中的说法，我并没有成功，可能是luuman本人没有更新文章吧。
但我参考了luuman的github内容，最终实现了目录。

修改article.ejs的内容，添加判断目录出现的逻辑

在 themes\yilia\layout\_partial\article.ejs文件中修改两处内容：

                          #原代码
                        
<div class=
                          "article-entry" itemprop=
                          "articleBody">
 <%
                          if (post.excerpt && index){ %>
 <%- post.excerpt %>
 <% }
                          else { %>
 <%- post.content %>
 <% } %>
</div>


                          #替换后
                        
<div class=
                          "article-entry" itemprop=
                          "articleBody">
 <%
                          if (index && (post.description || post.excerpt)){
                          %>
                        
 <%
                          if (post.description){ %>
 <%- post.description %>
 <% }
                          else { %>
 <%- post.excerpt %>
 <% } %>
 <% }
                          else { %>
 <%
                          if (is_page()){ %>
 <%- partial(
                          '_partial/page') %>
 <% } %>
 <%- post.content %>
 <% } %>
</div>

                          #在<article></article>区块外添加代码：
                        
<%
                          if (!index && post.toc !=
                          false && !is_page()){ %>
<%- partial(
                          '_partial/toc') %>
<% } %>

新建toc.ejs文件，加入生成目录代码

在目录 themes\yilia\layout\_partial\里面新建一个文件，命名为 toc.ejs，并为其添加内容如下：

<div id=
                            "toc" class=
                            "toc-article">
 <strong class=
                            "toc-title">文章目录</strong>
 <%- toc(post.content) %>
</div>
<style>
 .left-col .switch-btn {
 display: block;
                            #原代码为 none，这里稍作修改
                          
 }
 .left-col .switch-area {
 display: block;
                            #原代码为 none，这里稍作修改
                          
 }
</style>

<input
                            type=
                            "button" id=
                            "tocButton" value=
                            "隐藏目录" title=
                            "点击按钮隐藏或者显示文章目录">

<%- js(
                            'http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min')
                            %>
                          
<script>
 var toc_button = document.getElementById(
                            "tocButton");
 var toc_div = document.getElementById(
                            "toc");
 toc_button.onclick=
                            
                              function
                            () {

                            if (toc_div.style.display ==
                            "none") {
 toc_div.style.display =
                            "block";
 toc_button.value =
                            "隐藏目录";
 document.getElementById(
                            "switch-btn").style.display =
                            "none";
 document.getElementById(
                            "switch-area").style.display =
                            "none";
 }

                            else {
 toc_div.style.display =
                            "none";
 toc_button.value =
                            "显示目录";
 document.getElementById(
                            "switch-btn").style.display =
                            "block";
 document.getElementById(
                            "switch-area").style.display =
                            "block";
 }
 }


                            if ($(
                            ".toc").length <
                            1) {
 $(
                            "#toc").css(
                            "display",
                            "none");
 $(
                            "#tocButton").css(
                            "display",
                            "none");
 $(
                            ".switch-btn").css(
                            "display",
                            "block");
 $(
                            ".switch-area").css(
                            "display",
                            "block");
 }
</script>

<%
                            if (theme.toc_nowrap) { %>
 <style>
 .toc {
 white-space: nowrap;
 overflow-x: hidden;
 }
 </style>

 <script>
 $(document).ready(
                            
                              function
                            () {
 $(
                            ".toc li a").mouseover(
                            
                              function
                            () {
 var title = $(this).attr(
                            'href');
 $(this).attr(
                            "title", title);
 });
 })
 </script>
<% } %>

修改目录样式

themes\yilia\source\css\_partial\article.styl文件中加入下面的css代码：

/* toc */

                            #tocButton {
                          
 position: fixed;
 border-radius:
                            6px;
 width:
                            71px;
 height:
                            29px;
 left:
                            217px;
 border: none;
 background-color:
                            #ee6252;
                          
 top:
                            344px;
 font-size:
                            14px;
 text-align: center;
 color:
                            #fff;
                          
 &:hover {
 color:
                            #FFF;
                          
 background:
                            #3F3F3F;
                          
 }
}
.toc-article {
 position: fixed;
 width:
                            256px;
 left:
                            0;
 top:
                            360px;
 color:
                            #999;
                          
 bottom:
                            0.7em;
 padding:
                            10px;
 margin-left:
                            0em;
 margin:
                            20px
                            10px
                            10px
                            10px;
 background:
                            #3F3F3F;
                          
 border:
                            1px solid
                            #080808;
                          
 border-radius:
                            6px;
 overflow: auto;
 -webkit-border-radius:
                            2.8%;

}
.post-list li{
 margin-left:
                            20px;
 a{
 color:
                            #999;
                          
 }
 a:hover{
 color:
                            #FFF;
                          
 }
 }

                            #toc {
                          

                            float: right;
 font-size: .
                            9em;
 line-height:
                            1.65em;
 a {
 color:
                            #999;
                          
 &:visited {
 color:
                            #FFF;
                          
 }
 &:hover {
 color:
                            #FFF;
                          
 text-decoration: none;
 }
 }
 li:hover {
 background: none;
 li:hover {
 background: rgba(
                            158,
                            188,
                            226, .
                            21);
 }
 }
 .toc-title {
 font-weight: bold;
 color:
                            #999;
                          
 text-align: center;
 display: block;
 }
 .toc {
 padding:
                            10px;
 padding-right:
                            0;
 li {
 list-style-type: none;
 }
 }
 ol {
 margin-left:
                            0;
 }
 .toc-child {
 padding-left:
                            1.25em;
 margin:
                            4px
                            0;
 }
 .toc-link:hover {
 background: rgba(
                            158,
                            188,
                            226, .
                            21);
 }
}

这里就完成了目录的修改工作，之后在写博客时，需要正在文章顶头栏中加上 toc: true（注意冒号后的空格）。
重新生成一下页面，就能看到改动后的效果。

加入版权声明

下面的代码来源也是luuman，再次感谢~
我修改了原代码，让时间格式更具体，同时把3.0协议更新为4.0。
同时我也根据喜好稍微修改了一些样式。
在 theme\yilia\layout\_partial\post\nav.ejs的开头加入以下内容：

<%
                            if (post.original !=
                            false && !is_page()){ %>
 <div class=
                            "copyright">
 <p><span>本文标题:</span><a href=
                            "<%- url_for(post.path) %>"><%= post.title
                            %></a></p>
                          
 <p><span>文章作者:</span><a href=
                            "/" title=
                            "请访问 <%=theme.author%> 博客"><%=theme.author%></a></p>
 <p><span>发布时间:</span><%= post.date.format(
                            "YYYY/MM/DD - HH:mm:ss") %></p>
 <p><span>最后更新:</span><%= post.updated.format(
                            "YYYY/MM/DD - HH:mm:ss") %></p>
 <p>
 <span>原始链接:</span><a class=
                            "post-url" href=
                            "<%- url_for(post.path) %>" title=
                            "<%= post.title %>"><%= post.permalink
                            %></a>
 <span class=
                            "copy-path" data-clipboard-text=
                            "原文: <%= post.permalink %>　　作者: <%=theme.author%>"
                            title=
                            "点击复制文章链接"><i class=
                            "fa fa-clipboard"></i></span>
 <script src=
                            "/js/clipboard.min.js"></script>
 <script> var clipboard = new Clipboard(
                            '.copy-path'); </script>
 </p>
 <p>
 <span>许可协议:</span><i class=
                            "fa fa-creative-commons"></i><a rel=
                            "license" href=
                            "http://creativecommons.org/licenses/by-nc-sa/4.0/"><img
                            alt=
                            "知识共享许可协议" style=
                            "border-width:0" src=
                            "https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png"
                            /></a><a rel=
                            "license" href=
                            "http://creativecommons.org/licenses/by-nc-sa/4.0/"
                            title=
                            "中国大陆 (CC BY-NC-SA 4.0 CN)"> 知识共享署名-非商业性使用-相同方式共享
                            4.0 国际许可协议</a>
 </p>
 </div>
<% } %>

在 themes\yilia\source\css\_partial\article.styl添加版权声明的css样式：

/*版权声明*/
.copyright {
 width:
                            85%;
 max-width:
                            45em;
 margin:
                            0 auto;
 padding: .
                            5em
                            1.8em;
 border:
                            1px solid lightgray;
 font-size: .
                            93em;
 line-height:
                            2em;
 word-break:
                            break-word;
 background: rgba(
                            77,
                            77,
                            77,
                            1);
 color: gray;
 span {
 margin-right:
                            1em;
 color: gray;
 font-weight: normal;
 }
 a {
 color: gray;
 &:hover {
 font-weight: normal;
 color:
                            #EAEAEA;
                          
 text-decoration: underline;
 }
 }
 &:hover p .copy-path::after {
 content:
                            "复制";
 }
 .post-url:hover {
 font-weight: normal;
 }
 .copy-path {
 margin-left:
                            1em;
 &:hover {
 color:
                            #EAEAEA;
                          
 cursor: pointer;
 }
 }
}

提醒

1. 修改配置文件时，需注意冒号后面应有一个空格。
2. 若无法看到改动，检查一下语法错误。若还是看不到改动，可以尝试使用 hexo clean清除一下「public」和「database」之后，再使用 hexo g重新生成页面。
3. 修改主题的时候使用 hexo g和 hexo s配合，可以在当地 http://localhost:4000查看修改效果。
4. 使用命令 hexo g -d可以一键生成静态文件并且部署到github。

参考资料

在修改主题的过程中我参考的文章列在下方，感谢各位大大们提供的各种修改姿势！

1. hosiet的 HTML中ruby和黑幕的初步应用
2. zipperary的 hexo系列教程：（四）hexo博客的优化技巧
3. luuman的 Hexo插件安装
4. luuman的 主题代码