[Hexo] 在 GitHub 上搭建博客 (5)

这里记录一些繁琐但是有趣的 next 主题修改方法

• 修改文章底部 # 号标签
• 设置网站的图标 Favicon
• 实现统计字数/阅读时间功能
• 在文章底部增加版权信息
• 修改网页页脚的作者符号

修改文章底部 # 号标签

实现效果

修改方法

修改模板 “/themes/next/layout/_macro/post.swig”，搜索 rel="tag">#，将 # 换成 <i class="fa fa-tag"></i>

设置网站的图标 Favicon

实现效果

修改方法

找一张 32*32 的 ico 图标，并将图标名称改为 “favicon.ico”，然后把图标放在 “/themes/next/source/images” 里，并且修改主题配置文件为

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico

实现统计字数/阅读时间功能

实现效果

修改方法

在根目录下安装 “hexo-wordcount”，运行：

$ npm install hexo-wordcount --save

然后在主题配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

在文章底部增加版权信息

实现效果

修改方法

Step 1: 在目录 “next/layout/_macro/“ 下新建 “my-copyright.swig”

{% if page.copyright %}
<div class="my_post_copyright">
  <!-- You may change any JS cdn -->
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>Title: </span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>Author: </span><a href="/" title="Visit {{ theme.author }}'s blog ">{{ theme.author }}</a></p>
  <p><span>Published: </span>{{ page.date.format("MM/DD/YYYY - HH:mm") }}</p>
  <p><span>Last update: </span>{{ page.updated.format("MM/DD/YYYY - HH:mm") }}</p>
  <p><span>Link: </span><span class="copy-path"  title="Click to copy the link"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="Copied!"></i></span>  <a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
  </p>
  <p><span>License: </span><i class="fa fa-creative-commons"></i>  <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)">Attribution-NonCommercial-NoDerivatives 4.0 International </a></p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: 'Link Copied!',
          icon: "success", 
          showConfirmButton: true
          });
    });
    });  
</script>
{% endif %}

Step 2: 修改 “next/layout/_macro/post.swig”，在代码

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前添加增加如下代码：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

Step 3: 在目录 “next/source/css/_common/components/post/“ 下添加 “my-post-copyright.styl”

.my_post_copyright {
  width: 90%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 7em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 0em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

Step 4: 修改 “next/source/css/_common/components/post/post.styl” 文件，在最后一行增加代码：

@import "my-post-copyright";

如果要在某篇博文下面增加版权信息的显示，需要在 markdown 文件中增加 copyright: true 的设置，比如：

Step 5: 最后，假如你觉得每次都要输入 copyright: true 很麻烦的话，那你可以在 “/scaffolds/post.md” 文件中添加：

这样每次新建一个文章 (hexo new) 之后，生成的 markdown 文件会自动把 copyright: true 加到里面去。

修改网页页脚的作者符号

实现效果

修改方法

打开主题配置文件，找到：

# icon between year and author @Footer
authoricon: heart

这里 heart 代表的是 fa fa-heart。在 Fontawesome 中找到你自己喜欢的图标，然后修改 heart 的部分就可以了。比如上述效果就是改成 user。

Remark: 这部分代码在 “themes/next/layout/_partials/footer.swig” 中被如下方式使用:

<span class="with-love">
	<i class="fa fa-{{ theme.authoricon }}"></i>
</span>

假如想要使用一些 fab/fas 开头的图标，可以直接在这里修改。

参考链接

1. hexo的next主题个性化配置教程
2. Add Favicon to Hexo Blog