Hexo博客主题优化（持续更新）

为博客添加版权说明

以我使用的主题（Hiero）为例。

1. 新建copyright.ejs文件
   在themes\hiero\layout\_partial文件夹下新建文件copyright.ejs
   打开copyright.ejs，并添加一下代码：

   <div>
           <ul class="post-copyright">
             <li class="post-copyright-author">
             <strong><%= __('copyright.author') %> </strong><%= config.author%></a>
             </li>
             <li class="post-copyright-link">
             <strong><%= __('copyright.link') %> </strong>
             <a href="<%- config.root %><%- post.path %>" target="_blank" title="<%= post.title %>"><%- config.url %>/<%- post.path %></a>
             </li>
             <li class="post-copyright-license">
               <strong><%= __('copyright.license_title') %>  </strong>
               <%= __('copyright.left_license_content') %><a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">CC BY-NC-ND 4.0</a>
               <%= __('copyright.right_license_content') %>
             </li>
           </ul>
         <div>

2. 修改article.ejs文件
   打开themes\hiero\layout\_partial\article.ejs，并添加以下代码，位置自定，我是添加在文章底部标签上面。

   <!-- 版权声明 下面三行代码是要添加内容 -->
   <% if (!index && theme.copyright.enable){ %>
     <%- partial('copyright') %>
   <% } %>
   <!-- 分类和标签 -->
   <%- partial('post/category') %>
   <%- partial('post/tag') %>

3. 修改article.styl
   修改themes\hiero\source\css\_partial\article.styl，在最后添加以下代码：

   .post-copyright {
       margin: 2em 0 0;
       padding: 0.5em 1em;
       border-left: 3px solid #FF1700;
       background-color: #F9F9F9;
       list-style: none;
   }
   .post-copyright li {
       line-height: 30px;
   }

会css的也可以自己修改一下。

4. 修改语言文件
   语言文件在themes\hiero\languages下，找到你使用的language文件，如：default.yml，在尾部添加如下代码：

   copyright:
       author: "作者: "
       link: "文章链接: "
       license_title: "版权声明: "
       left_license_content: "本博客所有文章除特别声明外，均采用 "
       right_license_content: "许可协议。转载请注明出处！"

5. 修改主题配置
   打开themes\hiero\_config.yml，在最后添加以下代码：

   #版权说明
   copyright:
       enable: true

6. 最后hexo clean && hexo g && hexo d即可看到结果。
   

---

打赏按钮控制

这个主题在使用的过程中，我发现，不论是博文还是页面index，只要donate.enable: ture这些页面都有打赏按钮，不管你想不想有。

但是如果设置为false，则所有页面都没有。这就是没有一个控制的语句，之后我发现，完全不需要大修改，只需要添加一点代码即可实现。

1. 打开themes\hiero\layout\article.ejs
   找到打赏部分，本主题这段代码为：

     <!-- 打赏部分 -->
   <% if (!index && theme.donate.enable){ %>
     <%- partial('donate') %>
   <% } %>

在上面代码中添加post.donates，添加位置如下：

  <!-- 打赏部分 -->    <!-- 增加打赏控制代码：post.donates:/ture or false/ -->
<% if (!index && theme.donate.enable && post.donates){ %>
  <%- partial('donate') %>
<% } %>

2. 修改博文默认设置
   在source\_posts\文件夹下，打开博文。
   在title:和date:下添加donates: true或者donates: false，具体位置如下：

   title: The Economist | 经济学人 2018-11-10
   date: 2018-11-10 17:43:44
   tags:
   \- The Economist （没有\的，是为了防止转义）
   categories:
   \- [Reading,Magazines, The Economist]
   donates: true  添加的内容

3. 修改模板
   我们不能以后每个页面都这样手动添加donates: true，所以我们要修改默认模板。打开scaffolds\post.md文件，添加如下代码：

   \---     没有\的，是为了防止转义
   title: {{ title }}
   date: {{ date }}
   donates: true  需要添加的部分
   \---

这样就能够控制每个页面的打赏按钮有无了。

---

文章置顶

Hexo只提供了按发布日期的排序，如果想将某一篇文章置顶，只能修改发布日期，这样麻烦且会造成混乱。

在网上查了些资料后，发现一种相对简单的方法。原理：在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。

1. 命令安装

   $ npm uninstall hexo-generator-index --save
   $ npm install hexo-generator-index-pin-top --save

2. 在模板中加入top参数（scaffolds/post.md）

   title: {{ title }}
   date: {{ date }}
   tags:
   categories:
   donates: true
   top:
   photos:

3. 添加置顶标志
   以我使用的主题（Hiero）为例。在themes\hiero\layout\article.ejs中找到article-meta部分，并在其中添加以下代码：

   <div class="article-meta">      
         <% if (post.top){ %>
           <i class="fa fa-thumb-tack"></i>
           <font color=7D26CD>置顶</font>
           <span class="post-meta-divider">|</span>
         <% } %> <!-- 文章置顶标志，post.top有数值就会出现置顶标志-->
   </div>

---

未完待续