在这里记录下 Blog 基于 Hexo 和 Next 主题的一些自定义。

  • 自定义 url
  • 文末添加版权说明
  • 文末添加推荐文章列表
  • 博客迁移
  • 添加备案信息
  • 添加打赏功能

自定义 url

关于 url 的格式，建议在博客刚上线的时候就确定好，因为多说评论以及访客数据都是和 url 绑定的，每一次换 url 都意味着之前的多说评论数据和访问数据都会清空，我的的数据已经被清空过两次了，第一次是把 url 从中文更换为 英文，第二次就是这次，我将 url 的格式从 domain/year/month/title 换成了 domain/title，更简洁，也更容易理解链接的内容。

更改方式

在 Hexo 的配置文件 _config.yml 中
更改 permalink: 配置选项为 permalink: :title/

关于 Permalinks 更多参数 可以参考官方文档 Permalinks(永久链接)

文末添加版权说明（Next 主题）

最近看后台数据的时候，发现一篇文章被 latex 社区收录了，挺高兴的，只是文章被修改了一些内容，于是想在每篇文末添加一个版权说明，方法很简单。

更改方式

首先在 /hexo/themes/next/layout/_macro/post.swig 文件，修改 <footer class="post-footer"> </footer>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<footer class="post-footer">

    {# 添加版权信息 #}

    {% if not is_index %}
        <div class="copyright" style="clear:both;">
           <h3>文档信息</h3>
           <p><span>文章作者：</span><a href="//lijundong.com" title="李俊冬的网络日志">李俊冬</a></p>
           <p><span>发表时间：</span>{{ post.date.format("YYYY-M-D-HH:MM") }}</p>
           <p><span>文章标题：</span><a href="{{ url_for(post.path) }}">{{ post.title }}</a></p>
           <p><span>原文链接：</span><a href="{{ url_for(post.path) }}" title="{{ post.title }}">{{ post.permalink }}</a></p>
           <p><span>版权声明：</span><i class="fa fa-creative-commons"></i> <a rel="license" href="//creativecommons.org/licenses/by-nc-nd/3.0/deed.zh" title="自由转载-非商用-非衍生-保持署名 (创意共享3.0许可证)">自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</a></p>
           <p><strong>为方便溯源，避免陈旧错误知识的误导，转载请保留以上信息</strong></p>
        </div>
    {% endif %}

    {# 文末的标签 #}

    {% if post.tags and post.tags.length and not is_index %}
        <div class="post-tags">
          {% for tag in post.tags %}
            <a href="{{ url_for(tag.path) }}" rel="tag">#{{ tag.name }}</a>
          {% endfor %}
        </div>
    
         {# 使用 list_posts 添加了文章列表 #}

        <div class="posts-recommend">
            <h3>更多文章</h3>
               {{ list_posts() }}  
        </div>

    {% endif %}

    {# 此处是前后文章导航，因为上面添加了推荐文章列表，我把这一块注释了 #}

    {# {% if not is_index and (post.prev or post.next) and not navlessPost %}
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            {% if post.next %}
              <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
                <i class="fa fa-chevron-left"></i> {{ post.next.title }}
              </a>
            {% endif %}
        </div>

        <div class="post-nav-prev post-nav-item">
            {% if post.prev %}
              <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
                {{post.prev.title}} <i class="fa fa-chevron-right"></i>
              </a>
            {% endif %}
          </div>
        </div>
    {% endif %} #}
  {% set isLast = loop.index % page.per_page === 0 %}
  {% if is_index and not isLast %}
    <div class="post-eof"></div>
  {% endif %}
</footer>

文末添加推荐文章列表

我将文末的前后文章导航页去除，通过 list_posts() 方法添加了最近的文章列表

具体代码如下，完整代码可参见上一条完整代码

1
2
3
4
<div class="posts-recommend">
    <h3>更多文章</h3>
    {{ list_posts() }}  
</div>

关于 list_posts() 的用法，更多用法可参照官方文档 list_posts

博客迁移

粗暴复制

如果你更滑了新的电脑，迁移 hexo 的博客很简单，我的方式是直接复制 hexo 博客目录(不包含 node_modules 和 public 目录)，在新的电脑中执行 npm install hexo-cli -g 安装 hexo，在博客目录下执行 npm install （package.json 中包含所有的依赖信息），如果 node 版本不一致执行 npm rebuild 命令重新编译。git 的相关操作在这里不再赘述。

优雅的云备份

复制太过简单粗暴，有更优雅的方式，就是当作 git 项目托管在平台上，如果不想作为 public 项目托管的话，可以选择 github 的付费托管或者国内的 coding 平台进行托管。

如果你的主题是 clone 的平台上的开源项目，主题本身就存在版本控制，那么需要知道知道 Git 工具-子模块。

添加备案信息

我用的是 NEXT 的主题，直接选择修改 themes>next>layout >_partials>footer.swig，追加以下信息，div 中包裹的是备案信息。

1
2
3
<div style="text-align:center;width:100%;height:50">
蜀ICP备16024716号-1
<div>

添加打赏功能

在 NEXT 主题配置文件中，添加打赏配置，分别是微信和支付宝的支付二维码

1
2
3
reward_comment: 鸡腿还是可乐 ？
wechatpay: //source.lijundong.com/17-2-13/59734441-file_1486916997049_2842.png
alipay: //source.lijundong.com/17-2-13/74686190-file_1486916997175_15cd8.png