RexKing6's Note

hexo升级

发表于 更新于 分类于 阅读次数：
7.9k 7 分钟

简介

说来话长，很长很长。血压飙了好几晚。

  • 看了凯圣王的视频，做了一些健身理论的笔记
  • 笔记博客加了密，结果发现加密的博客无法显示目录。搜索了一下，发现大部分的解决方案都是针对较新版本的hexo-blog-encrpyt
  • 用npm更新hexo-blog-encrpyt，脑子突然一抽，索性把hexo及所有插件都更新了
  • 大难临头
  • 首先，hexo g开始报错，发现是MathJax渲染有冲突。搜索了一下，发现很多解决方案是四五年前的，因为我一开始配置hexo的时候也改了挺多地方。试了半天，总算改好了
  • 之后，发现前后博客跳转的箭头有问题，所以又去改了js
  • 之后，发现加密博客输入密码没反应。搜索了一下，发现现在的版本需要https才可以正常使用
  • 尝试从http改成https，发现github pages现在对CNAME的自定义域名可以强制https
  • 论坛说谨慎勾选，勾了之后模板都错了，而且不能还原。我心想模板错了就改改呗。
  • 然而，改了之后
  • 不仅模板错了，而且七牛云图床上的图片都无法显示了……
  • 发现是因为github pages改成了https，但是图床域名的image.rexking6.top还是http，浏览器由于安全策略就不会显示
  • 到这里真是后悔莫及，想把所有东西都还原回去
  • 尝试了一下，https确实是无法还原回去的
  • 所以索性把一切推导重来，最后给我的图床申请SSL证书

升级Node.js

网上常提供的解决方案——“安装Node.js的版本管理器”，在windows是不管用的。

1
2
npm install -g n
n lastest

windows能用的升级方法是从官网下载新版本的msi，重新安装。但是，这里有几个需要注意的地方：

  1. 从添加或删除程序卸载Node.js是卸载不干净的，导致我白装了一次
  2. C:\Users\{User}\AppData\Roaming\npm和C:\Users\{User}\AppData\Roaming\npm-cache同样需要手动删除
  3. 除此之外，需要注意有没有其他环境中也装了Node.js。通过Everything（这货帮了我好多忙），发现我Anaconda3中也装了Node.js，导致我前两步完成之后并且重启多次了，node -v同样会给出版本号
  4. 解决方法是安装新版本的Node.js之后，将其目录加进环境变量Path中，且置于Anaconda3之前

升级hexo

一开始，hexo及各个插件的升级通过npm的npm-check-updates来完成。

1
2
npm install -g npm-check-updates
ncu -u

虽然hexo及各个插件的升级完成，但是后来突然冒出一个想法：“会不会虽然hexo的升级完成了，但是hexo的_config.yml并没有改动，导致更新的一些变化和新功能会被遗漏掉？”。于是重开了另外一个目录，重新init下，对比了两个目录的_config.yml，确实存在差异。最后决定在另外一个目录，进行设置。

PS：这里的升级hexo是原本没有重装Node.js的做法。其实在重装Node.js之后，直接安装最新版本的hexo及各个插件就可以了。

设置hexo

列一下hexo新旧版本的设置差异。仍然与之前一样，hexo的配置文件称为“站点配置文件”，Next的配置文件成为“主题配置文件”。

语言

站点配置文件中原本的中文设置需要从

1
language: zh-Hans

修改为

1
language: zh-CN

Algolia

新版本的Algolia需要把apiKey加进环境变量：

1
export HEXO_ALGOLIA_INDEXING_KEY=your apiKey

博客加密

同样地，安装hexo-blog-encrypt

1
npm install --save hexo-blog-encrypt

相比于旧版本，新版本支持很多情况的加密设置：

  1. 每篇博客单独加密
  2. 针对tag全局加密博客
  3. 在全局加密下，禁用某些文章的加密
  4. 针对不同tag设置不同的密码
  5. 在全局加密下，某些文章采用另外设置的密码

之后输入密码失效的问题，通过https解决了。但是目录不显示仍然是个问题。参考Hexo博客文章加密的解决方法。

原因：

加密的时候，post.content 会变成加密后的串，所以原来的 TOC 生成逻辑就会针对加密后的内容。
所以这边我只能把原来的内容存进 post.origin 字段。

插件 hexo-blog-encrypt 对文章内容进行加密后，会将原始文章内容保存到字段 origin 中，当生成 TOC 时，我们可以通过 page.origin 来得到原始内容，生成文章目录。

找到文件 themes/next/layout/_macro/sidebar.swig ，编辑如下部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<aside class="sidebar">
  <div class="sidebar-inner">

    {%- set display_toc = page.toc.enable and display_toc %}
    {%- if display_toc %}

      {%- if (page.encrypt) %}
        {%- set toc = toc(page.origin, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
      {%- else %}
        {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
      {%- endif %}

      {%- set display_toc = toc.length > 1 and display_toc %}
    {%- endif %}

    <ul class="sidebar-nav motion-element">

虽然这样加密后的文章未解密之前也可以看到 文章目录 ，但是也够用了。

设置Next

列一下Next新旧版本的设置差异。

暗黑模式

新版本增加了暗黑模式。在主题配置文件中：

1
2
# Dark Mode
darkmode: true

首页摘录

原本的首页摘录是在主题配置文件中配置的：

1
2
3
auto_excerpt:
  enable: true
  length: 0

但是新版本的Next已经把这个功能删了，只能通过：

1
excerpt_description: true

并且使用<!-- more -->来分隔。

另外，包括插件hexo-auto-excerpt也无法使用。于是，只能通过插件hexo-excerpt来完成自动摘录。但是，它最少也会摘录1行，这样我所有博客的摘录就都是“简介”，无法实现我原本一字不留的效果。于是，去了./node_modules/hexo-excerpt/lib/hexo-excerpt.js中的两处地方，添加部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (/<!--\s*more\s*-->/.test(post.content) || post.content.indexOf('<a id="more"></a>') !== -1) {
  post.excerpt = '...'
  post.more = '...'
  return {
    path: post.path,
    data: post,
    layout: post.layout
  };
}
...
if (moreNodes.length != 0 || !opts.hideWholePostExcerpts) {
  post.excerpt = (excerptNodes.map(node => domutils.getOuterHTML(node))).join('');
  post.more = (moreNodes.map(node => domutils.getOuterHTML(node))).join('');
}

post.excerpt = '...'
post.more = '...'
return {
  path: post.path,
  data: post,
  layout: post.layout
};

这部分试了好久，怎么改都不成功。后面转念一想，它之后应该是有一个逻辑，“如果拿到的post.excerpt为空的话，将所有内容输出。于是给了...。

MathJax

与之前类似。

  1. 使用hexo-renderer-kramed替换hexo-renderer-marked

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save

  2. 将./node_modules/hexo-renderer-kramed/lib/renderer.js中的

    1
    2
    3
    4
    function formatText(text) {
        // Fit kramed's rule: $$ + \1 + $$
        return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
    }

    修改为：

    1
    2
    3
    function formatText(text) {
        return text;
    }

  3. 停用hexo-math，安装hexo-renderer-mathjax

    1
    2
    npm uninstall hexo-math --save
    npm install hexo-renderer-mathjax --save

  4. 修改./node_modules/kramed/lib/rules/nline.js中的默认转义规则

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 替换11行
    escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
    //修改为
    escape: /^\\([`*\[\]()# +\-.!_>])/,

    //替换20行
    em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
    //修改为
    em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

  5. 开启MathJax

    在主题配置文件中加入以下代码：

    1
    2
    3
    4
    mathjax:
      enable: true
      perpage: false
      cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

备案

新版本支持备案，早发现多好。在主题配置文件中

1
2
3
beian:
  enable: true
  icp: 粤ICP备16049735号

博客字数&阅读时间

  1. 安装插件hexo-symbols-count-time

    1
    npm install --save hexo-symbols-count-time

  2. 在主题配置文件中设置：

    1
    2
    3
    4
    5
    6
    # Post wordcount display settings
    # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
      separated_meta: true
      item_text_post: false
      item_text_total: true

代码块

新版本支持设置多种代码块风格。在主题配置文件中设置：

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: flat

返回顶部

新版本支持返回顶部按钮。在主题配置文件中设置：

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

阅读进度

新版本支持显示阅读进度，在顶部/底部出现亮条表示阅读进度。在主题配置文件中设置：

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: bottom
  color: "#37c6c0"
  height: 3px

书签

新版本支持书签，开启后在左上角出现书签按钮，可以保存阅读进度。在主题配置文件中设置：

1
2
3
4
5
6
7
8
# Bookmark Support
bookmark:
  enable: true
  # Customize the color of the bookmark.
  color: "#37c6c0"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

GitHub Follow

新版本支持在右上角直接跳转至GitHub进行Follow。在主题配置文件中设置：

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/rexking6
  title: Follow me on GitHub

RSS

同样地，安装hexo-generator-feed

1
npm install hexo-generator-feed

之后在站点配置文件中配置：

1
2
3
4
5
6
7
8
feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit:
    content_limit_delim: ' '

参数的含义：

  • type: RSS的类型(atom/rss2)
  • path: 文件路径,默认是atom.xml/rss2.xml
  • limit: 展示文章的数量,使用0或则false代表展示全部
  • hub:
  • content: 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
  • content_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
  • content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,，防止从中间截断.

另外，新版本的Next将RSS按钮删除掉了，需要在./themes/next/layout/_partials/sidebar/site-overview.swig中的\- if theme.site_state之前加入以下代码：

1
2
3
4
5
6
7
8
{% if theme.rss %}
   <div class="feed-link motion-element">
     <a href="{{ url_for(theme.rss) }}" rel="alternate">
       <i class="fa fa-rss"></i>
       RSS
     </a>
   </div>
 {% endif %}

相关博客

在每篇博客下，根据分类或者标签列出其相关博客。先安装hexo-related-popular-posts

1
npm install hexo-related-popular-posts --save

之后，在主题配置文件中设置：

1
2
3
4
5
6
7
8
9
10
related_posts:
  enable: true
  title: # custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 3
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

display_in_home这里尝试了一下，没发现区别。

图片缩放

  1. 先安装fancybox

    1
    git clone https://github.com/theme-next/theme-next-fancybox3 themes/next/source/lib/fancybox

  2. 在主题配置文件中设置

    1
    fancybox: true

HTTP->HTTPS

GitHub Pages

在repo中的Settings中的Pages设置：

image-20210710212554338

如果无法勾选，可以先将将其Remove之后再重新Save，再勾选。

七牛云图床

首先，七牛云的SSL证书界面中购买证书：

image-20210710213045647

之后，采用DNS验证，拿到校验信息：

1
2
3
校验域名：image.rexking6.top
TXT 记录名：_dnsauth.image.rexking6.top
TXT 记录值：202107091602213ob5wujkk8a3f9k7ia83jzhea0zxt26slmgpjo2yq7odiezg2z

之后在域名解析（我的是在阿里万网）中，添加主机记录：

image-20210710213420396

之后，通过dig命令测试一下：

1
dig _dnsauth.image.rexking6.top TXT

校验通过之后，拿到证书，有效期一年：

image-20210710213551931

之后，在域名管理中修改为HTTPS：

image-20210710213703028

最后，Typora图片上传的域名也需要修改：

1
"url": "https://image.rexking6.top"

其他

其他功能例如评论、聊天、分析和评分等，个人认为与自己一开始写博客的目的不符，就不添加了。

总结

咋说呢，一开始以为是个小问题，越整越大，越整越大。后面心态调整过来了，面对现实呗，一处处地校对调整，博客比之前已经好看很多啦。

相关文章
一分一毛，也是心意。