个人博客,主题升级,从5.1到6.0

以下内容根据NextGitHub提供内容进行主题更新升级验证

由于之前就做好了升级准备,尽量减少原文件的变更,相对来说工作量不是很大

6.0在一些原有的插件上的使用上还有些问题,想尝鲜的继续

基于Next6.0.1

Next主题更新升级

升级方法参考
由于新版本官方详细说明还未发布,这里先提前研究一下新版本

这里由原5.1.4升级到6.0.1

仓库地址发生变化

5.1: git@github.com:iissnan/hexo-theme-next.git

6.0: git@github.com:theme-next/hexo-theme-next.git

使用release 版本,按官方说法是相对比较稳定,但仍存在一些问题

官方提供的方式

总结为三点:

  1. clone 仓库到新目录,假设为next-reload

  2. 若主题配置使用了datafile方式,新目录也不变,原主题目录不变,可以随时还原

  3. 修改站点配置加载主题next-reload

补充

  1. 自定义修改比较多的,可以比对更新,即合并代码

  2. copy 新增文件到站点source目录

  3. 主题文件可先clone 后将.git文件夹移除,待成功备份到自己的仓库后,再还原移除的.git,这样既可以备份,也可以与原仓库比对更新

  4. 若仍有修改且准备提交到next仓库的,继续使用fork

升级主题未变及变更文件

5.1版本修改过的文件,以及更新到6.0的变更
以下变更全部从主题目录变更到站点目录,可以理解为尽量减少主题文件的修改

崩溃欺骗

\layout_layout.swig
\source\js\src\custom\custom-title.js

样式

整站

\source\css_custom\custom.styl

侧栏,5.1新增

\source\css_custom\custom-sidebar.styl

变更为source_data\style.styl,代码融合

变量

\source\css_variables\custom.styl

改为source_data\variables.styl

语言

\languagues\zh-Hans

6.0主题变更文件

站点source新增及变更文件

文章结束标记

\layout_macro\post.swig

  • 原代码
1
2
3
4
5
6
7
8
9
10
11
12
13
{% raw %}
<div class="post-body ...>

{{ post.content }}

<div style="text-align:center;color: #ccc;font-size:18px;">—— The End ——</div>

{{ post.content }}`

<div style="text-align:center;color: #ccc;font-size:18px;">—— The End ——</div>

</div>
{% endraw %}
  • 修改为:
  1. 添加到postbody div之后
1
2
3
4
5
6
7
8
{% raw %}
<div class="post-body >
</div>
{% if not is_index and theme.post_end %}
<!-- noindex-->
<div class="post-end text-center"><span >{{theme.post_end}}</span></div>
{% endif %}
{% endraw %}
  1. source_data\style.styl样式新增:
1
2
3
4
5
//文章结束标识
.post-end{
font-size: 18px
color: #ccc
}
  1. 主题配置
1
post_end: <i class="fa fa-signing fa-lg"></i> The End   <i class="fa fa-signing fa-lg"></i>
  • 由于小屏幕一些文字不显示,去除原图标控制逻辑

第三方评论

仍选择支持双评论系统,删除的代码有变化

\layout_third-party\comments\disqus.swig
\layout_third-party\comments\gitment.swig
\layout_third-party\comments\gitment.swig

评论

组合评论,5.1新增

\layout\partials\comments\custom-comments.swig

改为:

source_data\comments.swig

主题配置custom_file_path新增字段comments:

1
2
custom_file_path:
comments: source\_data\comments.swig

这部分在双评论系统文章有详细讲解

评论整体布局\layout_partials\comments.swig参考header修改

{% include /comments/custom-comments.swig %}

变更为

1
2
3
4
5
6
{% raw %}
{% if theme.custom_file_path.comments %}
{% set custom_comments = '../../../../' + theme.custom_file_path.comments %}
{% endif %}
{% include custom_comments %}
{% endraw %}

6.0.1的一些问题点

  1. 主题配置

    除新增变更功能外,其他不变

  2. 第三方评论

    • disqus

    代码发生变化,双评论系统代码添加方法不变

    • livere

    代码发生变化,支持双评论系统代码修改方法不变

  3. post_word_count 替换为 symbols_count

官方GitHub

安装插件 npm install hexo-symbols-count-time –save

站点、主题配置 :配置参照官网

注意:需要修改语言文件

zh-Hans.yml文件post参数:
增加:

1
2
3
4
symbols_count: 字数统计
symbols_time: 阅读时长约
total_symbols: Symbols count total
total_time: Reading time total

时间计算方式变更,结果及显示与之前不太一样

  1. 文章版权
    由于显示有问题,这里做个修改

    zh-Hans.yml文件

    修改:
    license_content: ‘本博客所有文章除特别声明外,均采用%s 许可协议。转载请注明出处!’

  2. footer与主体间距

距离过小会遮挡分页按钮
修改source\styles.styl

//主体与footer间距
$gap-between-main-and-footer = 120px

插件变更及启用功能

变更

algolia搜索

nextalgolia

新建\source\lib\algolia-instant-search

添加文件
instantsearch.min.css,instantsearch.min.js

主题配置不变

local_search 启用后一直加载,具体原因未知

背景动画

Canvas
three_waves
路径:
themes\next\source\lib\three
themes\next\source\lib\canvas-nest
主题配置开启

1
2
3
4
5
6
7
8
9

canvas_nest: true

# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

新增功能

reading_progress

reading_progressJs文件

source\lib\reading_progress路径

主题配置:

1
2
reading_progress:
enable: true

Fllow Me On GitHub

主题配置

1
github_banner: https://github.com/yourname || Follow me on GitHub

页面右上角显示

不喜欢的可以继续使用之前_layout.swig 文件body内增加代码的方式

启用原有功能

needmoreshare2

needmoreshare2js文件

source\lib\needmoreshare2

主题配置:

1
2
3
4
5
6
7
needmoreshare2:
enable: true
postbottom:
enable: true

float:
enable: false

Star Rating

获取id

主题配置:

1
2
3
rating:
enable: true
id: #4位id
完结撒花