Hexo 笔记

yiyun

发布于 2022-04-01 15:50:06

7600

发布于 2022-04-01 15:50:06

文章被收录于专栏：yiyun 的专栏

NexT 仓库

NexT 一共有三个不同的仓库：

版本	年份	仓库
v5.1.4 或更低	2014 ~ 2017	https://github.com/iissnan/hexo-theme-next
v6.0.0 ~ v7.8.0	2018 ~ 2019	https://github.com/theme-next/hexo-theme-next
v8.0.0 或更高	2020	https://github.com/next-theme/hexo-theme-next

配置文件

注意：此方法不适合 Hexo 5.0+ ，Next 8.0.0+ 建议使用：

Hexo 根目录 _config.yml：站点配置文件

themes/next/_config.yml ：主题配置文件

字符计数

Next v7.8.0

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true

Next v8.2.1

# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true

注意：本人依然使用的 https://github.com/theme-next/hexo-symbols-count-time 而不是新版本的 https://github.com/next-theme/hexo-word-counter

代码块显示复制按钮

Next v7.8.0

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: normal
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Next v8.2.1

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: tomorrow-night
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style:

数学公式

设置后，每页都加载所需 LaTex 脚本，而无需在头部添加 mathjax: true Next v7.8.0

# Math Formulas Render Support
math:
  # Default (true) 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 false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: false

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

Next v8.2.1

# Math Formulas Render Support
# Warning: Please install / uninstall the relevant renderer according to the documentation.
# See: https://theme-next.js.org/docs/third-party-services/math-equations
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
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 srcipt EVERY PAGE.
  every_page: true

  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: none

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

图片放大

Next v7.8.0 Next v8.2.1

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true

本地搜索

Next v7.8.0 Next v8.2.1

# Local Search
# Dependencies: https://github.com/theme-next/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

Next 主题为例

安装依赖

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

主题配置文件

enable: true

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: true
  title: # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

修改 post 模板

在 Hexo 根目录下修改 scaffolds/post.md

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

新增一行 categories:，这样每次 hexo n postname 时就会有 categories:

Next 文章目录自动编号

取消 Next 文章目录（侧边栏）标题的自动编号：number: false

Hexo v5.0 (+) Next v7.8.0 Next v8.2.1 _config.next.yml

# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

添加 languages

在 Hexo根目录/source/_data 创建 languages.yml 文件

内容如下：

---

zh-CN:
  menu:
    portfolio: 作品集

即可为 portfolio 添加中文翻译为 作品集

注意：顶部有 ---，但底部结束没有 ---，笔者试过底部结束加 ---，结果 hexo s 时报错了。

常见错误

err: YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 2, column 5:

YAML格式错误，title: 后有一个空格，依然报此错

原因：使用了读书笔记，注意：不能使用 [] 符号，如下:

title: [读书笔记]《Neural Networks and Deep Learning》 - 2

如上，就会报此错

自定义主题

Hexo v5.0 (+) Next v8.0.0 (+) 参考：

Hexo根目录/_config.next.yml

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

取消注释掉需要自定义的部分，进行添加

按下方路径，新建 head.njk 文件

Hexo根目录\source\_data\head.njk

以添加Live2d挂件为例， head.njk 文件内容如下：

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

补充

Hexo 更新

npm install hexo-cli -g --registry https://registry.npmjs.org

Hexo NexT 配置第三方插件使用本地, 而不是 CDN

注意: https://github.com/next-theme/plugins#debug @next-theme/plugins 与 hexo-theme-next 需安装相同版本

注意: 建议使用 npm install @next-theme/plugins@8.9.0 指定版本号的方式升级或安装, 注意查看 package-lock.json 中的版本号, 大部分 package.json 中都用的 "hexo-theme-next": "^8.7.0" 这种形式, ^ 只固定主版本号，因此下载时会选择最新的 8.x.x, 于是实际 package-lock.json 中为 8.9.0 注意:

hexo-generator-searchdb 需 1.4.0，之前 @next-theme/plugins@8.9.0 搭配 hexo-generator-searchdb@1.3.0 还是 404, 以及 console 还会报前面的 WARN 错误, 但明明版本号已经相同了; 测试最新版 1.4.0 就没问题了

参考:

Vendors | NexT

CDN Settings

You can specify a proper CDN provider in the vendors section in theme config file, which can make the static assets of plugins load faster.

vendors:
  # The CDN provider of NexT internal scripts.
  # Available values: local | jsdelivr | unpkg | cdnjs
  # 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
  # Dependencies for `plugins: local`: https://github.com/next-theme/plugins
  plugins: jsdelivr

Core Plugins

internal: local is used to set how to load the core plugins, e.g. source/js/utils.js. These plugins are loaded from your site by default, they are required by the basic functions of NexT. Set internal to jsdelivr, unpkg or cdnjs to load them from the corresponding CDN.

If your site is deployed to any free hosting service (Github, Gitlab, etc.), CDN links are recommended for core plugins. CDN usually has faster speeds and no traffic restrictions. If you are using the latest master branch of NexT, please set internal: local.

Third-party Plugins

plugins: jsdelivr is used to set how to load the third-party plugins, e.g. anime.js. Third-party plugins are loaded from jsDelivr CDN by default, because jsDelivr has the valid ICP license issued by the Chinese government, it can be accessed in China pretty well.

And we also provide other optional CDNs, including the famous UNPKG and CDNJS. These CDN providers are chosen to deliver our third-party plugins because they are fast and reliable. Set plugins to unpkg or cdnjs to load them from different CDN provider.

Particularly, if you are a Chinese blogger or most of your visits come from China, please note that the CDNJS is blocked in some parts of China, don't use it as your CDN provider. If your would like to load all third-party plugins from your site, please set plugins to local and install the @next-theme/plugins package: https://github.com/next-theme/plugins If your website is deployed in the local area network, then this will have a faster loading speed than CDN services.

Custom CDN URLs

Sometimes you may need to use other CDNs not included in the available values of vendors.plugins option. In the vendors section, you can configure the CDN URL of each library individually.

The config is in format of libname: CDN URL. The libname is the same as in the _vendors.yml file. The CDN URL will override the default one.

For example, if you want to set the CDN URL for anime, go to theme config file and add a key named anime in the vendors section, and set its value to the CDN URL of anime.js:

vendors:
  # ...
  # Some contents...
  # ...
  anime: //cdn.jsdelivr.net/gh/juliangarnier/anime@latest/lib/anime.min.js

It's recommended to use the same version of the library as in _vendors.yml to avoid potential problems. And if you need other versions you need to test them first.

Remember to use the HTTPS protocol of CDN links when you enable HTTPS on your site.

jsDelivr does not only provide mirrors for the files from npm packages, but also fetch from the GitHub releases! We could use the following link to reference the js files, just as other CDNs.

//cdn.jsdelivr.net/gh/user/repo@version/file

And it could automatically minify the JS and CSS files, even if you don't have the minified version. Just use the filename.min.js or the filename.min.css to replace the file above. For more information: https://www.jsdelivr.com/features

自动分类插件 hexo-auto-category

参考: - 【Hexo插件系列】日志的自动分类插件 hexo-auto-category | ESON

注意: 不建议使用, hexo g 后插件会直接修改 post.md 的 tags, categories

参考: - hexo 博客引流到公众号配置方法（亲测可用） | hoxis' blog - github博客Hexo引流到微信_death05的博客-CSDN博客_hexo 微信

Hexo 支持 PWA

参考:

hexo博客支持pwa | foochane

Hexo 解决 GitHub Action 部署 `更新于` 时间都变为 GitHub Action 部署时间

方法1: 手动更新 `updated`

参考:

Post Settings | NexT

post_meta:
  updated_at:
    enable: true

默认启用, 因此只需要在 postname.md 中添加上 updated 即可

updated: 2022-01-09 18:55:31

可以在模板文件中加上 updated, 这样每次 hexo n 时就会有 updated

scaffolds/post.md

---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
tags:
categories:
description: {{ title }}
---

方法2: 在生成前添加下面这步来将文件的修改日期更正为该文件最后一次 commit 时的时间

region 时区问题注意: 此方法发现 bug git log 的时间戳是 UTC+8, 但 touch -d 时，是按 标准 UTC 写的，因此导致具体时间不对

解决: 经过偶然测试, 发现通过设置时区即可

- name: Build 🔧 
  run: |
    hexo clean
    # 解决 Hexo 文章时间为 UTC+0, 而不是 UTC+08:00
    export TZ='Asia/Shanghai'
    hexo generate

endregion 时区问题

参考:

浅谈静态博客的自动部署方案 - 宝硕博客

在构建完成后会发现文章的更新时间出现了错误，可以在生成前添加下面这步来将文件的修改日期更正为该文件最后一次 commit 时的时间。

- name: Fix File Modify Date
  run: |
    git ls-files | while read filepath; do touch -d "$(git log -1 --format='@%ct' $filepath)" "$filepath" && echo "Fixed: $filepath"; done

当然，为了让 git 有日志 (git log) 可寻，还得在检出的时候顺带把所有提交历史一并拉下来，指定 fetch-depth 就能做到：

- uses: actions/checkout@v2
  with:
    fetch-depth: 0

new_post_name 与 permalink

参考:

配置中的 permalink 值里的 :title ，实际取的不是文件名称，而是相对于 source/_post 的相对路径（不含后缀）

Hexo 更改数学公式渲染引擎为 Pandoc

参考:

GitLab+Hexo更改数学公式渲染引擎为Pandoc - 淡淡博客 – 记录生活点滴，关注Python数据挖掘、深度学习相关技术

VSCode 插件

0x-jerry/vscode-hexo-utils: vscode sidebar for hexo.

Hexo 在线编辑后台

站点建立时间

footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  since: 2020

设置动画效果

# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
  enable: true
  async: false
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp

Hexo Next 文章底部版权申明

_config.next.yml

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# 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
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language: