Hexo博客优化记录

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 1.8k 阅读时长 ≈ 6 分钟

环境

Hexo 5.4.0，NexT 8.14.1

Highlight.js高亮问题

1
2
3
4
5
6
7
8
9
highlight:
  enable: true
  auto_detect: false
  line_number: true
  tab_replace: '  '
  wrap: true
  hljs: false
prismjs:
  enable: false

启用Highlight.js后，代码块高亮效果无效。

解决方法

  • 法1：改用prismjs
  • 法2：改用csr渲染，在模板文件hexo-theme-next\layout\_layout.njk中插入
1
2
3
<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.2.0/styles/github.min.css">
<script src="//cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

这种方法在使用了Pjax特性后并不好用，需要手动刷新才能生效，可以考虑在<script>标签中添加data-pjax="" async=""属性，但是有时会失效，目前没有找到完美的解决方案。

  • 法3：Highlight.js自带的语法检测过于辣鸡，且十分耗费资源。故可以选择手动配置Markdown文件。在Markdown文件中，使用代码语言标记必须加空格，否则失效。

    首先需要先将Highlight.js自带的语法检测关闭。

    1
    2
    3
    highlight:
      enable: true
      auto_detect: false

    然后使用[```][空格][语言标记]的格式进行标识。过于愚蠢的匹配规则。

夜间模式优化

夜间模式基于Darkmode.js实现，目前已经有专用于NexT的插件hexo-next-darkmode。其CSS样式文件位于blog\node_modules\hexo-next-darkmode\lib

暗黑模式激活后，hexo-next-darkmode 插件会将 darkmode--activated CSS 类添加到 body 标签，可以利用它覆盖插件默认自带的 CSS 样式，这样就可以实现暗黑模式 CSS 样式的高度自定义。

以下内容在实现前均需要先安装并启用hexo-next-darkmode，或者自行引入Darkmode.js。

Prism.js代码块优化

修改代码文字反白样式

1
2
3
4
.darkmode--activated code {
  color: orange;
  background: transparent;
}

代码块框颜色优化

1
2
3
.darkmode--activated pre {
  opacity: 0.75;
}

**注意：**在当前Prism.js主题下，强行改变代码块框颜色会导致代码难以看清。因此选用改变透明度的折中方案，当然也可以选择其他Prism.js主题再进行样式修改。

支持Waline的夜间模式

hexo-next-darkmode现已兼容Waline的深色样式，修改NexT配置文件hexo-theme-next\_config.yml即可。

1
2
3
4
5
waline:
  enable: true
  dark: 'body.darkmode--activated'
  ...

自定义暗黑样式

在夜间模式下，Waline 客户端默认会使用以下样式，若希望自定义夜间模式的 CSS 样式，直接覆盖以下 CSS 样式即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 根据用户设置 ↓ */
darkmode-selector {
  /* 常规颜色 */
  --waline-white: #000;
  --waline-light-grey: #666;
  --waline-dark-grey: #999;

  /* 布局颜色 */
  --waline-color: #888;
  --waline-bgcolor: #1e1e1e;
  --waline-bgcolor-light: #272727;
  --waline-border-color: #333;
  --waline-disable-bgcolor: #444;
  --waline-disable-color: #272727;

  /* 特殊颜色 */
  --waline-bq-color: #272727;

  /* 其他颜色 */
  --waline-info-bgcolor: #272727;
  --waline-info-color: #666;
}

更换资源CDN

在jsDelivr被吊销ICP许可证后，cdn.jsdelivr.net开始遭到污染，非魔法上网已经不能正常加载，其原因不做讨论。

修改Next主题CDN

运营方节点地域链接及格式上游
75CDN(360前端)360自有节点全球https://lib.baomitu.com/{cdnjs格式}cdnjs
知乎阿里云全球https://unpkg.zhimg.com/{unpkg格式}unpkg
百度百度云全球https://code.bdstatic.com/npm/{unpkg格式}内建npm镜像（上游淘宝cmpnjs）
饿了么阿里云中国大陆https://npm.elemecdn.com/{unpkg格式}unpkg

修改主题根目录下_config.next.yml，这里我采用了75CDN(360前端)，它已经维护很长时间，是最适合NexT的CDN。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# It's recommended to use the same version as in `_vendors.yml` to avoid potential problems.
# Remember to use the HTTPS protocol of CDN links when you enable HTTPS on your site.
vendors:
  # The CDN provider of NexT internal scripts.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Warning: If you are using the latest master branch of NexT, please set `internal: local`
  internal: local
  # The default CDN provider of third-party plugins.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Dependencies for `plugins: local`: https://github.com/next-theme/plugins
  plugins: custom

  # Custom CDN URL
  # For example:
  # custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
  # custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
  # jsdelivr: `https://cdn.jsdelivr.net/npm/${name}@${version}/${file}`,
  # unpkg : `https://unpkg.com/${name}@${version}/${file}`,
  # cdnjs : `https://cdnjs.cloudflare.com/ajax/libs/${alias || name}/${version}/${file.replace(/^(dist|lib|)\/(browser\/|)/, '')}`
  custom_cdn_url: https://lib.baomitu.com/${cdnjs_name}/${version}/${cdnjs_file}

修改谷歌字体库以加速页面加载

修改主题根目录下_config.next.yml配置项

1
2
3
4
5
6
font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://fonts.geekzu.org

针对NexT8.11.0以后的特殊问题

由于NexT自8.11.0以来加入了Pjax自动更新功能，其使用的Pjax版本更新至0.6.0。然而75CDN(360前端)资源库中没有0.6.0的Pjax，只有0.5.0的Pjax，这导致修改CDN后我们无法使用Pjax。

可通过修改主题根目录下_vendors.yml来强行改变Pjax引入的版本。

1
2
3
4
5
6
pjax:
  name: '@next-theme/pjax'
  version: 0.5.0
  file: pjax.min.js
  alias: next-theme-pjax
  integrity: sha256-3NkoLDrmHLTYj7csHIZSr0MHAFTXth7Ua/DDt4MRUAg=

必须保证version与integrity字段值完全如上所示，任何一个值出错都会导致Pjax无法引入。

评论系统优化

服务端升级

在Waline官网根据流程走即可。新建一个Github仓库，然后部署于Vercel。环境变量可使用旧版Waline的，这样可以无损保留评论数据。绑定域名建议新建，以防止翻车还得重新解析。

也可以通过修改仓库中修改 package.json 文件中的 @waline/vercel 版本号为最新版本，再Redeploy。

客户端升级

1
$ npm i @waline/next@latest

客户端由1.6.0升级至2.14.7

更新配置文件

Waline V2更新了配置文件格式，旧版的配置文件不再支持。

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
# Waline Config File
# For more information:
# - https://waline.js.org
# - https://waline.js.org/reference/component.html
waline:
  # New! Whether enable this plugin
  enable: true
  dark: 'body.darkmode--activated'
  # Waline server address url, you should set this to your own link
  serverURL: https://waline.kouki.ltd   

  # Waline library CDN url, you can set this to your preferred CDN
  libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js

  # Waline CSS styles CDN url, you can set this to your preferred CDN
  cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css

  # If false, comment count will only be displayed in post page, not in home page
  commentCount: true

  # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
  pageview: false

  # Custom locales
  # locale:
  #   placeholder: Welcome to comment # Comment box placeholder

  # Custom emoji
  emoji:
     - https://unpkg.com/@waline/emojis@1.0.1/weibo
     - https://unpkg.com/@waline/emojis@1.0.1/alus
     - https://unpkg.com/@waline/emojis@1.0.1/bilibili
     - https://unpkg.com/@waline/emojis@1.0.1/qq
     - https://unpkg.com/@waline/emojis@1.0.1/tieba
     - https://unpkg.com/@waline/emojis@1.0.1/tw-emoji

  # Comment infomation, valid meta are nick, mail and link
  meta:
     - nick
     - mail
     - link

  # Set required meta field, e.g.: [nick] | [nick, mail]
  requiredMeta:
     - nick

  # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
  lang: zh-CN

  # Word limit, no limit when setting to 0
  wordLimit: 0

  # Whether enable login, can choose from 'enable', 'disable' and 'force'
  login: enable

  # comment per page
  # pageSize: 10

Waline V2评价

  • 评论管理更加便捷，很多操作不再需要通过管理后台。
  • 支持点赞，支持删除评论，能够显示更多访客信息，并且修复了博主头像不显示的 bug ，还是很值得更新的。

现存问题与后续优化计划

现存问题

  • 更换CDN后，中国大陆地区访客无法正常加载Darkmode.js与Aplayer.js等资源，因而夜间模式、全局音乐等功能不可用。
  • 由于DNS污染等原因，中国大陆地区暂时无法使用评论系统。

（非中国大陆地区访客可完美浏览博客）

后续优化计划

  • 寻找新的CDN服务商进行资源分发。
  • 考虑DNS Server转发或采用其他Severless服务解决无法使用评论系统的问题。

参考

Clay

jsdelivr被墙,hexo-next切换为自定义CDN