个人博客，主题升级，从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 版本，按官方说法是相对比较稳定，但仍存在一些问题

官方提供的方式

总结为三点：

clone 仓库到新目录，假设为next-reload
若主题配置使用了datafile方式，新目录也不变，原主题目录不变，可以随时还原
修改站点配置加载主题next-reload

补充：

自定义修改比较多的，可以比对更新，即合并代码
copy 新增文件到站点source目录
主题文件可先clone 后将.git文件夹移除，待成功备份到自己的仓库后，再还原移除的.git，这样既可以备份，也可以与原仓库比对更新
若仍有修改且准备提交到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

原代码

{% 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 %}

修改为：

添加到postbody div之后

{% 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 %}

source_data\style.styl样式新增：

//文章结束标识
.post-end{
	font-size: 18px
	color: #ccc
}

主题配置

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 %}

变更为

{% raw %}
{% if theme.custom_file_path.comments %}
{% set custom_comments = '../../../../' + theme.custom_file_path.comments %}
{% endif %}
{% include custom_comments %}
{% endraw %}

6.0.1的一些问题点

主题配置

除新增变更功能外，其他不变
第三方评论
- disqus
代码发生变化，双评论系统代码添加方法不变
- livere
代码发生变化，支持双评论系统代码修改方法不变
post_word_count 替换为 symbols_count

官方GitHub

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

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

注意：需要修改语言文件

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

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

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

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

zh-Hans.yml文件

修改：
license_content: ‘本博客所有文章除特别声明外，均采用%s 许可协议。转载请注明出处！’
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
主题配置开启


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

主题配置：

needmoreshare2:
	enable: true
	postbottom:
		enable: true

	float:
		enable: false

Star Rating

获取id

主题配置：

1
2
3

rating:
	enable: true
	id: #4位id