Hexo博客升级7.0.0+Next主题升级8.19.1

发表于 更新于 分类于 阅读次数：
  • 很久没提交更新，打开博客一看，果然博客框架更新了很多东西。作为一个强迫症患者，在把这一两年内写的文章都提交之前，把框架统统更新一遍，简单记录一下内容。
  • 配置项中和老版本一致的项目不再一一赘述，仅列举出配置项不同或者失效或者需要使用新的实现方式的功能。

更新 Node.js

1
2
$ node --version
v16.17.0

顺带更新npm（需要到官网找到对应node版本的npm版本升级）

1
2
$ npm --version
v8.15.0

更新 Hexo 和主题 NexT 包

由于我的版本和最新的差距太大，索性直接把整个文件夹铲了重新建站。 注意：记得保存原仓库的副本，主要是_post/和*.yml文件。 首先是重新安装最新的Hexo：

1
2
3
4
5
$ cnpm install hexo-cli -g
$ cnpm install [email protected]
$ hexo version
hexo: 7.0.0
hexo-cli: 4.3.0

对于新版本的next主题可以使用npm方式直接安装了：

1
$ cnpm install hexo-theme-next
当然，也可以使用git命令将主题下载到themes/next目录下：
1
$ git clone https://github.com/next-theme/hexo-theme-next themes/next
安装完成之后找到文件夹下的_config.yml，修改其中的主题为theme: next。此时，博客的next主题就安装成功了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ hexo version
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.19.1
Documentation: https://theme-next.js.org
========================================
hexo: 7.0.0
hexo-cli: 4.3.0
...
如果安装完成之后，有依赖包没有安装全可以使用npm update进行更新。

更新配置

更新Hexo配置文件

对于Hexo的配置文件，基本上把各项内容从老的文件复制到新的就行了。最后的deploy节点如果使用了baidu收录的记得用以下格式：

1
2
3
4
5
deploy:
- type: git
  repo: https://xxxxxxx.git
  branch: master
- type: baidu_url_submitter

更新Next配置文件

对于Next的配置文件，以下就是一项项研究的漫漫长路了。 注：旧博文中并没有按照配置文件顺序来编写配置点，这篇文章中由于需要把旧的配置文件一项项更新到新的配置文件中，所以是按照配置文件顺序编写的配置点。

文件位置和名称

安装完新主题之后，新版的配置文件不再是另外放在_data/下了，而是可以直接放在主文件夹下，不过文件名称需要按照_config.[name].yml的方式命名，如我使用的是Next主题，那么文件名就是_config.next.yml。

对比了一下老的配置文件和新的配置文件，区别还是挺大的，所以准备复制一份默认的配置文件，然后再把原有配置项一个个进去修改。

复制默认配置文件：

1
2
3
4
# npm安装
$ cp node_modules/hexo-theme-next/_config.yml _config.next.yml
# Git安装
$ cp themes/next/_config.yml _config.next.yml

定制样式

一些个性化的样式可以修改。 需要把原来的.swig文件后缀改成.njk。

1
2
3
4
custom_file_path:
  postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  style: source/_data/styles.styl

其中footer.swig为浏览器标签做的个性化需要在配置文件中额外加上：

1
2
3
4
title_trick:
  enable: true
  leave: "来啊快活啊~"
  enter: "咚咚咚"

具体样式修改和代码可见旧博文中的定制样式部分。

Valine评论（未解决）

官方由于Valine不再开源并有可能的XSS漏洞，不再提供默认支持，配置项需要自己添加。详细说明可以见官方的Github说明。

我在安装的时候就出现了安装不了的问题，只能从Github上下载代码本地安装：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ cnpm ls --depth=0
[email protected] D:\Study\BlogResources
+-- @next-theme/[email protected] extraneous
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected] -> .\node_modules\[email protected]@hexo-next-valine  #说明已安装
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

安装之后尝试配置：

1
2
3
4
5
6
7
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: valine

以及

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: ...
  appkey: ...
  serverURLs: # When the custom domain name is enabled, fill it in here
  placeholder: 写点什么吧 > < # comment box placeholder
  avatar: mm # gravatar style
  meta: [nick, mail, link] # Custom comment header
  pageSize: 10 # pagination size
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP

生成出来的博文并没有Valine的Tab页，不知道什么原因。

畅言评论

到畅言官网免费注册一个app，然后再开启并填入appid和appkey即可。

太丑！设置完我就放弃了。

1
2
3
4
5
6
7
8
comments:
  active: changyan
# Changyan
# For more information: https://changyan.kuaizhan.com
changyan:
  enable: true
  appid: ...
  appkey: ...

GitTalk/Utterances评论

利用GitHub Issue实现的评论机制。这里我选用了Utterances，设置比较简单。

首先到Github创建一个新的公开项目作为评论的仓库，然后在仓库安装utterances app。安装完成之后将你的用户名+仓库名填写到配置文件中即可：

1
2
3
4
5
6
7
8
9
# Utterances
# For more information: https://utteranc.es
utterances:
  enable: true
  repo: zhaomin6666/BlogUtterances # Github repository owner and name
  # Available values: pathname | url | title | og:title
  issue_term: title
  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
  theme: github-light

live2d

继续尝试live2d，新版本的看板娘官方的配置是写在head.njk里，也就是上面的定制样式里面，需要自己去找实现的autoload.js。尝试了一下官方提供的实例：

1
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

将代码写到head.njk然后开启定制样式：

custom_file_path: head: source/_data/head.njk

但是打开页面查看发现有资源加载不出来。

尝试用以前的插件方式安装，使用hexo-helper-live2d。

1
2
3
$ cnpm install --save hexo-helper-live2d
// 挑选一个自己喜欢的模型下载
$ cnpm install live2d-widget-model-hijiki

新增hexo的config配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# live2d
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-hijiki
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: false

虽然解决了live2d的显示问题，但是这会导致页面加载很慢，所以还是舍弃了这个功能。

MathJax支持问题

更换Hexo的渲染引擎

使用hexo-renderer-pandoc进行渲染 使用Pandoc解决渲染问题。

1.安装Pandoc。

2.删除原有的一些Math渲染插件

3.安装hexo对应插件：

1
$ npm install hexo-renderer-pandoc --save

4.打开_config.next.xml中的MathJax配置为True

5._config.xml加入配置：

1
2
pandoc:
  pandoc_path: C:/Program Files/Pandoc/pandoc.exe #本地安装Pandoc的位置

成功正确显示公式。

以下为老版本的时候成功的配置情况： 由于类Latex格式书写的数学公式中有_,{,}等一些有语义冲突的符号，导致渲染时MathJax引擎认为公式有误所以不渲染，所以这里需要做一些调整。 更换Hexo的渲染引擎：

1
2
$ cnpm uninstall hexo-renderer-marked --save
$ cnpm install hexo-renderer-pandoc --save
#### 电脑安装pandoc 下载并安装pandoc

开启配置文件中的MathJax为True，并在需要渲染的文章加入配置

1
2
3
4
5
6
7
math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex script EVERY PAGE.
  every_page: false
  mathjax:
    enable: true

clean & generate

1
2
$ hexo clean
$ hexo g

LeanCloud统计

文章阅读量统计使用leancloud做统计，相比旧版本需要步骤更加复杂，这里把步骤详细说明一下。

首先开始在LeanCloud配置，如果之前配置过Valine评论的应该已经接触过LeanCloud了，这边需要多设置很多东西。

创建一个LeanCloud应用，这个我之前在做Valine的时候就创建过，跟着界面来就行，不再描述。

打开应用之后，点击左侧设置-安全中心，在Web安全域名中输入自己博客的域名。

点击左侧数据储存-结构化数据-创建Class，Class名称输入Counter，限制修改为无限制，然后确认创建。

点击左侧云引擎-WEB-部署-创建函数，类型选Hook，名称选择刚刚创建的Counter，内容中输入如下内容：

1
2
3
4
5
6
7
8
9
var query = new AV.Query("Counter");
if (request.object.updatedKeys.includes('time')) {
    return query.get(request.object.id).then(function (obj) {
        if (obj.get("time") > request.object.get("time")) {
            throw new AV.Cloud.Error('Invalid update!');
        }
        return request.object.save();
    });
}
创建成功之后，点击部署，目标环境选择生产环境，然后等待部署完成。

配置_config.next.yml，这边security设置为true需要下面_config的相关配置，官方建议开启。app_id和app_key填写应用设置-应用凭证-Credentials里面显示的内容。server_url填写应用设置-应用凭证-服务器地址里面显示的内容。

1
2
3
4
5
6
7
8
9
10
11
leancloud_visitors:
  enable: true
  app_id: ******************
  app_key: ******************
  # Required for apps from CN region
  server_url: https://wypthddt.lc-cn-n1-shared.com
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: true 
  betterPerformance: true

若开启了security: true，安装插件：

1
$ cnpm install hexo-leancloud-counter-security --save
执行下面的指令，这边的username和password不必与LeanCloud账号相同。
1
hexo lc-counter r <<username>> <<password>>

配置_config.yml，虽然在插件默认的注释中写了不输入用户名密码在执行hexo d的时候会要求输入，但是实际情况是在deploy的时候直接报错，并没有弹出让我输入密码。

1
2
3
4
5
6
7
8
9
10
11
leancloud_counter_security:
  enable_sync: true
  app_id: ******************
  app_key: ******************
  server_url: https://wypthddt.lc-cn-n1-shared.com # Required for apps from CN region, e.g. https://leancloud.cn
  username: ********** # Will be asked while deploying if is left blank
  password: ********** # Recommmended to be left blank. Will be asked while deploying if is left blank
  
deploy:
  # 新增一个deploy项
  - type: leancloud_counter_security_sync

返回LeanCloud中，检查数据储存-结构化数据-_User中是否有刚刚新增的用户信息。 然后点击之前创建的Counter，点击权限，修改Class访问权限，对于add_fields和create两项选择指定用户，并选择我们创建的用户，对于delete项，不选择用户。最后显示如下：

1
2
3
4
5
6
add_fields
0 Role,2 Users
create
0 Role,2 Users
delete
0 Role,0 User

到此为止，LeanCloud做页面统计的功能就部署完成了。执行hexo d可以在控制台看到会根据博文生成url等信息，然后保存到服务器上Counter对象中。

在新增配置deploy项leancloud_counter_security_sync之后，在执行hexo d时可能会有如下报错，这个报错会导致往public文件夹下生成leancloud.memo文件时生成空文件，影响到文章阅读数的显示。

1
2
3
4
leancloud-counter-security\index.js:73
    this.log.info('leancloud.memo successfully updated.');
         ^
TypeError: Cannot read properties of undefined (reading 'log')
此时需要去修改插件代码，打开\node_modules\hexo-leancloud-counter-security\index.js，修改下面这一行：
1
2
this.log.info('leancloud.memo successfully updated.');
// 直接注释上面这一行

如果在执行hexo d的时候出现报错，可以删除leancloud.memo文件并重新执行生成和部署：

1
2
3
rm <blog directory>/source/leancloud.memo
hexo g
hexo d

本地搜索

安装插件：

1
cnpm install hexo-generator-searchdb

修改_config.yml

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

修改_config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

增加通用的版权说明

_config.next.yml中添加配置：

1
2
3
4
5
6
7
8
9
10
creative_commons:
  # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # Available values: big | small
  size: big
  sidebar: true
  post: true
  # You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
  # CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
  language: deed.zh

增加载入进度条

_config.next.yml中添加配置，其中的主题可以自己尝试，我就是用了一个比较简洁的。

1
2
3
4
5
6
7
8
9
pace:
  enable: true
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: black
  # All available themes:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

Coding部署更新

旧文章中的Coding部署方式已经不能使用，需要使用新的方法部署，具体步骤如下：

储存桶设置

前往腾讯云控制台购买COS储存桶服务（不贵，除非访问量很大），点击创建储存桶并将访问设置为“公有读私有写”。

点击左侧基础配置-静态网站，开启静态网站功能。

在右上角用户-访问设置中新建密钥信息，并自己保存好（不要泄露）。

Coding配置

进入仓库，点击左侧持续集成-构建计划，点击“自定义构建过程”，设置名称和代码仓库之后保存。

在流程配置中选择文本编辑器，填入如下 Jenkinsfile 命令。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]], 
          userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]
        ])
      }
    }
    stage('部署到腾讯云存储') {
      steps {
        sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY} -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"
        sh 'rm -rf .git'
        sh 'coscmd upload -r ./ /'
      }
    }
  }
}

在变量与缓存中新增刚刚在腾讯云中设置的秘钥信息并选择保密。

变量名含义
COS_SECRET_ID腾讯云访问密钥 ID
COS_SECRET_KEY腾讯云访问密钥 KEY
COS_BUCKET_NAME腾讯云对象存储桶
COS_BUCKET_REGION腾讯云对象存储区域（如ap-shanghai）

保存持续集成配置后，点击“立即构建”，你可以在构建过程中查看各运行步骤详情。