Next主题配置文件说明

发表于 分类于 阅读次数： 本文字数： 17k 阅读时长 ≈ 1:02
关于NexT 8.20.0相关测试以及官方文档翻译

官方说明

搞不清楚，有好几个

  • next-theme/hexo-theme-next: 🎉 Elegant and powerful theme for Hexo. (github.com)

    • 文档地址：Configuration | NexT (theme-next.js.org)

  • theme-next/hexo-theme-next: Elegant and powerful theme for Hexo. (github.com)

    • 文档地址：Theme Next - Next Generation Theme for Websites (theme-next.org)

  • 中文的：开始使用 - NexT 使用文档 (iissnan.com)

主题版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[root@hexo Hexo]# hexo s --ip 0.0.0.0
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.20.0
Documentation: https://theme-next.js.org
========================================
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

安装next主题

这里以以下地址中的next主题进行测试：

next-theme/hexo-theme-next: 🎉 Elegant and powerful theme for Hexo. (github.com)

  • 文档地址：Configuration | NexT (theme-next.js.org)

安装：

1
2
3
4
5
6
7
# If you're using Hexo 5.0 or later, the simplest way to install is through npm:
cd hexo-site
npm install hexo-theme-next

# Or you can clone the entire repository:
cd hexo-site
git clone https://github.com/next-theme/hexo-theme-next themes/next

使用新的主题

1
2
3
4
# 修改_config.yml文件，指向新的主题，
# 注意：这里theme关键字不能缩进，否则无效并使用默认主题
[root@hexo Hexo]# grep '^ *theme' _config.yml 
theme: next

更新next主题

主题更新

  • Install the latest version through npm:

    1
    2
    cd hexo-site
    npm install hexo-theme-next@latest

  • 或者， update to the latest master branch:

    1
    2
    cd themes/next
    git pull

插件支持

Third-party plugins are loaded from CDNJS CDN by default. We also provide other optional CDNs, including the famous UNPKG and jsDelivr.

For example, if you want to use unpkg instead of cdnjs as the default CDN provider, you need to edit the following settings in NexT config file:

1
2
3
4
5
vendors:
  # ...
  # Some contents...
  # ...
  plugins: unpkg

多语言支持

NexT支持多种语言，只需编辑站点配置文件下的 language 设置

语言 代码 设定示例
English en language: en
简体中文 zh-CN（注：zh-Hans已经无法使用） language: zh-CN
Frangais fr-FR language: fr-FR
Portugues pt language: pt 或者 language:pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Pycckmi 93bIK ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko

关于next主题配置文件

完成 Hexo 和 NexT 主题的安装后，您可以通过修改配置文件来自定义您的博客。安装 Hexo 时，随附的配置文件位于您博客的站点根目录中，名为 _config.yml；我们将其称为 Hexo 配置文件。NexT 主题的配置文件需要您创建；请在站点根目录中创建一个 _config.next.yml 文件，我们在下文中将其称为 NexT 配置文件。如果您还安装了其他主题，那么这些主题的配置文件也将遵循 _config.[name].yml 的命名约定。

创建空的 _config.next.yml 文件后，您可以将主题文件夹中的默认配置选项复制到其中，以便您可以参考它们进行修改和自定义。==根据您的安装方法(git or npm)==，NexT 主题的默认配置文件可能位于 themes/next/_config.yml 或 node_modules/hexo-theme-next/_config.yml。简单来说，如果您是第一次安装 NexT 主题，您可以执行以下命令来获取可用的 NexT 配置文件：

1
2
3
4
# Installed through npm
cp node_modules/hexo-theme-next/_config.yml _config.next.yml
# Installed through Git
cp themes/next/_config.yml _config.next.yml

请注意，有些其他文档或教程可能会建议创建或直接修改 themes/next/_config.yml 和 node_modules/hexo-theme-next/_config.yml 等文件。确实，这样做可以被 Hexo 接受并作为你的主题配置文件。然而，这种方法会带来很多不便，比如通过 git pull 更新 NexT 主题时经常会遇到冲突的情况，或者在升级到新版本时需要手动合并配置。对于通过 npm 安装的主题，在 node_modules 中修改 NexT 配置文件也比较困难。因此，请使用前面引入的 _config.next.yml 文件作为主题的配置文件，并避免创建或修改其他主题配置文件，以防止冲突。

注意：如果使用多个配置文件，则最终效果是合并

For more information, please refer to Alternate Theme Config feature documentation.

主题核心配置

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
# ---------------------------------------------------------------
# Theme Core Configuration Settings
# See: https://theme-next.js.org/docs/theme-settings/
# ---------------------------------------------------------------

# Allow to cache content generation.
# NexT v6+ 允许缓存内容生成。在 NexT 配置文件的缓存部分中将值 enable 设置为 true，默认true
cache:
  enable: true

# Remove unnecessary files after hexo generate.
# NexT 允许压缩 Hexo 生成。在 NexT 配置文件中将 minify 值设置为 true
minify: false

# 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
  #postBodyStart: source/_data/post-body-start.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

Scheme设置-切换主题样式

1
2
3
4
5
6
7
8
9
10
11
12
13
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes    提供了4种样式，根据需要选择
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

# Dark Mode 此模式只有在系统切换至深色模式才会启动
darkmode: true
# Preferreds-color-scheme CSS 媒体功能用于为上述所有 4 种方案带来暗黑模式，请确保您的浏览器支持它。

站点信息设置

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
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# 默认情况下，Hexo 网站使用 hexo-site/themes/next/source/images/ 目录中的 NexT 图标，不同设备使用不同大小。
# 您可以用自己的图标替换它们。例如，您可以将图标放在 hexo-site/source/images/ 目录中。然后您需要重命名它们并更改 NexT 配置文件中图标部分的设置，否则 Next 中的图标将重写 Hexo 中的自定义图标。
# 您还可以将自定义图标放入 hexo-site/source/ 目录中。这样，您必须从路径中删除 /images 前缀。
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

# Custom Logo (Warning: Do not support scheme Mist)
# NexT 支持站点徽标个性化。您可以通过将图像的 URL 添加到 NexT 配置文件中的 custom_logo 来启用此功能。
custom_logo: #/uploads/custom-logo.png   表示不启用
custom_logo: /uploads/custom-logo.jpg    使用自定义网站logo

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
# NexT 支持在侧边栏和帖子中显示 Creative Commons 4.0 国际许可，包括 by、by-nc、by-nc-nd、by-nc-sa、by-nd、by-sa 和 cc-zero。
# 这些许可允许创作者传达他们保留哪些权利，以及他们为了收件人或其他创作者的利益而放弃哪些权利。
# 您可以通过编辑 NexT 配置文件中 creative_commons 部分中的值来配置它，例如：
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: small
  sidebar: false
  post: false
  # 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:

# Open graph settings
# See: https://hexo.io/docs/helpers#open-graph
# 大概作用就是分享链接的时候可以解析出内容？
open_graph:
  enable: true
  options:
    #twitter_card: <twitter:card>
    #twitter_id: <twitter:creator>
    #twitter_site: <twitter:site>
    #twitter_image: <twitter:image>
    #google_plus: <g+:profile_link>
    #fb_admins: <fb:admin_id>
    #fb_app_id: <fb:app_id>

菜单设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key
 is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home                          # 主页，/表示根目录
  about: /about/ || fa fa-user                   # 关于，/about/表示/about/目录
  tags: /tags/ || fa fa-tags                     # 标签
  categories: /categories/ || fa fa-th           # 分类
  archives: /archives/ || fa fa-archive          # 归档
  schedule: /schedule/ || fa fa-calendar         # 日程表
  sitemap: /sitemap.xml || fa fa-sitemap         # 站点地图
  commonweal: /404/ || fa fa-heartbeat           # 公益

# Enable / Disable menu icons / item badges.
# 默认情况下，NexT 显示没有图标的菜单项图标。
menu_settings:
  icons: true
  badges: false  # 将值 badges 设置为 true 以显示 NexT 配置文件中 menu_settings 部分菜单项中的帖子 / 类别 / 标签的数量

菜单项目的语法格式：

1
2
3
4
Key: /link/ || icon

# 例如
home: / || fa fa-home

你可以按照上面的格式创建任意菜单。Names of that icons can be found in Font Awesome site.找到想要的图标，选择REACT可以看到代码示例和名称。

其他说明：

除主页和存档外，菜单部分下的所有自定义页面都需要手动创建。请参阅“[自定义页面支持](Custom Pages | NexT (theme-next.js.org))”。此外，站点地图支持需要 [hexo-generator-sitemap](GitHub - hexojs/hexo-generator-sitemap: Sitemap generator for Hexo.) 插件。

子菜单设置

还支持层次结构内的动态子菜单。在 NexT 配置文件的菜单部分中添加子菜单项，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
  Docs:
    default: /docs/ || fa fa-book
    Getting Started:
      default: /getting-started/ || fa fa-flag
      Installation: /installation.html || fa fa-download
      Configuration: /configuration.html || fa fa-wrench
    Third Party Plugins:
      default: /third-party-services/ || fa fa-puzzle-piece
      Math Equations: /math-equations.html || fa fa-square-root-alt
      Comment Systems: /comments.html || fa fa-comment-alt

每个子菜单项都需要一个默认页面。

增加菜单项目

  1. 将你想要的菜单选项前的注释 # 去掉，这里以tags为例。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
    home: / || home
    #about: /about/ || user
    tags: /tags/ || tags
    #categories: /categories/ || th
    archives: /archives/ || archive
    #schedule: /schedule/ || calendar
    #sitemap: /sitemap.xml || sitemap
    #commonweal: /404/ || heartbeat

    新建页面tags：hexo new page "tags"

    完成后Hexo-root/source/中会出现tags目录，该目录下有index.md文件，文件内容如下：

    1
    2
    title: tags
    date: 2019-02-18 16:40:41

    在date字段下添加：type: tags

    tags 的使用方法详见Hexo 常用命令

  2. 设置菜单名称

    打开next/languages/zh-CN.yml，更改以下字段

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      commonweal: 公益404
      something: 有料

    例如你要将 about 的翻译“关于”改为“关于我”，直接更改为“about: 关于我”即可

添加个人介绍——关于

要先添加 about 菜单

打开\source\about下的index.md文件，在最后一个空行(即---的下方)添加你显示的个人信息。

添加额外菜单栏并显示多篇文章

假设你现在需要添加一个“日记”的菜单栏，步骤如下：

在Git Bash执行下列命令，新建页面diary：hexo new page "diary"

完成后Myblog/source/中会出现tags目录，该目录下有index.md文件，文件内容如下：

1
2
title: diary
date: 2019-02-18 16:40:41

在date字段下添加：type: diary

打开Myblog\themes\next\languages，找到zh-CN.yml。在 Menu字段下添加schedule: 日记，这样你的网站菜单栏就会显示“日记”项。

为了能让菜单显示多篇文章，就需要借用categories的分类功能

假设 _post 目录下有几篇文章想放到该菜单下，将这些文章移至新建文件夹 diary

打开主题配置文件，找到menu字段，添加日记: //categories/日记/ || fa fa-inbox

上传至github page后，就会发现博客的“日记”页面如下图所示。

侧边栏设置

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
  # Sidebar position. Available values: left | right
  # 侧边栏的位置
  position: right

  # Sidebar width.侧边栏宽度
  # Applicable to Muse | Mist and mobile of Pisces | Gemini.
  # 可以通过以像素为单位指定 sidebar.width_expanded 设置来更改侧边栏宽度，适用于Muse and Mist，Mobile of Pisces and Gemini scheme
  width_expanded: 320
  # 可以通过以像素为单位指定 sidebar.width_dual_column 设置来更改侧边栏宽度，例如：
  # Applicable to desktop of Pisces | Gemini.
  width_dual_column: 240

  # Sidebar display.
  # 通过编辑 sidebar.display 值来设置侧边栏显示的条件
  # Applicable to Muse | Mist and mobile of Pisces | Gemini.
  # Available values:
  #  - post    仅在具有索引的帖子中显示侧边栏。默认值
  #  - always  在所有页面中显示侧边栏
  #  - hide    在所有页面中隐藏它（但用户可以手动打开）。
  #  - remove  完全删除侧边栏。
  display: post

  # 通过改变 sidebar.padding 的值来设置侧边栏填充（以像素为单位）：
  padding: 18
  # 改变 sidebar.offset 的值来设置侧边栏与顶部菜单栏的偏移量（以像素为单位）： (only for Pisces | Gemini).
  offset: 12

# Sidebar Avatar
# 默认情况下，NexT 不会在侧边栏显示头像。您可以通过编辑 NexT 配置文件中的头像设置下的值来配置它
avatar:
  # Replace the default image and set the url here.
  # `url`后接头像路径，一般将图片放在`\MyBlog\themes\next\source\images`下，并修改`头像名.后缀`即可
  # Put your avatar under site directory source/uploads/ (create directory if it doesn't exists).And then change option to url: /uploads/avatar.png.
  # Put your avatar under theme directory source/images/.And then change option to url: /images/avatar.png.
  # You can also specify any external URL with absolute path to image: http(s)://example.com/avatar.png
  url: /images/avatar.gif
  # If true, 以圆形方式显示
  rounded: false
  # If true, 为当鼠标放置在头像上时头像会旋转
  rotated: false

# Posts / Categories / Tags in sidebar.
# 默认情况下，NexT 在侧边栏显示帖子/类别/标签的类别和数量。您可以通过编辑 NexT 配置文件中的 site_state 值来配置它。
site_state: true

# Social Links
# 社交链接具有与菜单项类似的结构，只有目标链接有区别：指定的链接必须具有完整的 URL 路径（永久链接）。
# 语法格式如下
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

# 默认情况下，NexT 在侧边栏显示社交链接的图标。
social_icons:
  enable: true
  icons_only: false  # 显示不带描述的社交图标
  transition: false  # 显示具有过渡效果的社交图标

# 可以在 NexT 的侧边栏中添加博客滚动。
links_settings:
  # 默认情况下，NexT 在标题前显示地球图标。图标的名称可以在 Font Awesome 网站中找到。
  icon: fa fa-globe  
  # Available values: block | inline
  # 默认情况下，所有博客链接都以块形式显示。您可以通过编辑 NexT 配置文件中的 links_settings 部分中的值布局将其配置为内联。
  layout: block

# 链接部分并添加您喜欢的链接：
links:
  #Title: https://example.com

# Table of Contents in the Sidebar
# Front-matter variable (nonsupport wrap expand_all).
toc:
  # 默认情况下，NexT 在侧边栏显示目录 (TOC)。您可以通过在 NexT 配置文件中将 toc.enable 设置为 false 来禁用它。
  enable: true
  # 默认情况下，NexT 会自动将列表编号添加到目录中。您可以在 NexT 配置文件中将 toc.number 设置为 false 来禁用此功能。
  number: true
  # 如果帖子标题的宽度比侧边栏宽度长，您可以通过在 NexT 配置文件中将 toc.wrap 设置为 true 来将标题文字换行到下一行。
  wrap: false
  # 如果您希望显示帖子中所有级别的目录，而不是其中激活的部分，您可以在 NexT 配置文件中将 toc.expand_all 设置为 true。
  expand_all: false
  # 默认情况下，生成的目录的最大标题深度为 6。您可以通过在 NexT 配置文件中将 toc.max_depth 设置为另一个数字来设置它。
  max_depth: 6

页脚设置

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
# ---------------------------------------------------------------
# Footer Settings
# See: https://theme-next.js.org/docs/theme-settings/footer
# ---------------------------------------------------------------

# Show multilingual switcher in footer.
language_switcher: false

footer:
  # 默认情况下，NexT 在页脚中显示当前年份，如 © 2020。
  # 您可以通过编辑since部分的值将其配置为显示时间间隔，如 © 2015 - 2020。
  #since: 2021

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    # # 默认情况下，NexT 在页脚中显示带有动画的红色心形图标，位于年份和版权信息之间。
    name: fa fa-heart
    # 通过改变 icon.animated 的值来设置页脚图标的动画：
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  # Set to `false` to disable the copyright statement.
  # NexT 默认显示 Hexo 配置文件中的作者姓名。您可以通过编辑 NexT 配置文件中页脚部分的 copyright 值来配置它。
  # 将 copyright 设置为 false 将完全禁用版权声明。
  # 此选项只会自定义页脚中的作者姓名。每篇文章末尾的知识共享许可部分中的名称不受影响。
  copyright:

  # Powered by Hexo & NexT
  powered: false

  # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, https://beian.mps.gov.cn
  # Beian 信息是针对中文用户的，默认情况下 NexT 不会显示 beian 的信息，您可以通过编辑 NexT 配置文件中 footer.beian 部分的值来配置。
  beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. Login and See: https://beian.mps.gov.cn/web/business/businessHome/website
    gongan_icon_url:

备案信息示例

1
2
3
4
5
6
7
footer:
  beian:
    enable: true
    icp: 京ICP备 1234567890号-1
    gongan_id: 1234567890
    gongan_num: 京公网安备 1234567890号
    gongan_icon_url: /uploads/beian.png

博文帖子设置

阅读全文

在主页上显示文章的某些部分，然后提供完整文章的链接，这是很常见的需求。 NexT 提供了两种方法来控制文章在主页上的显示方式。换句话说，您可以使用以下方式显示==文章摘要==和==阅读更多==按钮。

  • 方式1：tagmore

    在文章中使用 <!-- more --> 来手动分页你的文章，这是 Hexo ==推荐的做法==。

    建议使用<!-- more -->，这样不仅可以更好的控制你想要显示的内容，还可以让 Hexo 的插件方便地使用它。

  • 方式2：excerpt_description

    如果在文章摘要的front-matter中配置了description，则Nex默认将其作为主页上的序言文本，如果没有指定description，则默认使用全文作为主页上的序言文本。

    1
    excerpt_description: true

    修改 阅读全文 前显示文字数量即位置

    打开 themes/next/_config.yml，搜索关键字 auto_excerpt， 修改length即可修改阅读全文前显示文字数量

    备注：本次测试的NexT主题默认没有这个参数

    1
    2
    3
    auto_excerpt:
      enable: true
      length: 150
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# ---------------------------------------------------------------
# Post Settings
# See: https://theme-next.js.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# Use `description` in front-matter to specify post excerpt.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

# Post meta display settings
# NexT 支持帖子创建日期、帖子更新日期和帖子类别显示。
post_meta:
  # 默认显示帖子元数据的描述文本。您可以通过在 NexT 配置文件中将 post_meta.item_text 的值设置为 false 来禁用它。
  item_text: true
  created_at: true
  # 请确保在 Hexo 配置文件中正确设置 use_date_for_updated 和 updated_option，否则此选项将不会生效。另请参阅日期/时间格式。
  updated_at:
    # 默认情况下，NexT 在帖子元信息部分显示帖子更新日期，并在弹出窗口中显示更新时间。您可以通过在 NexT 配置文件中将值 post_meta.updated_at.enable 设置为 false 来禁用它。
    enable: true
    # 默认情况下，如果更新/编辑日期与创建日期相同，则编辑时间将显示在弹出消息中。您可以通过在 NexT 配置文件中将值 post_meta.updated_at.another_day 设置为 false 来禁用它。
    # 如果为 true，则仅当更新日期与创建日期不同（帖子编辑日期与创建日期不同）时才显示更新日期标签。如果帖子编辑日期与创建日期相同，则编辑时间将显示在创建时间标签下的弹出标题中。如果为 false，则无论如何都显示，但如果帖子编辑日期相同，则仅显示编辑时间。
    another_day: true
  categories: true

# Post wordcount display settings
# 这里是关于文章字数统计部分，需要安装额外的插件，详细说明参见《文章字数统计和阅读时长》
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true
  item_text_total: false

# 默认情况下，帖子底部的标签左侧有一个符号 #。
# 如果您更喜欢图标而不是符号请设置为true
tag_icon: false

# Donate (Sponsor) settings   捐赠设置
# 越来越多的网络博客平台（如微信公众号、简书、知乎）支持捐赠（赞助）。 
# 为了抓住付费阅读的趋势，我们增加了捐赠功能，支持微信、支付宝和比特币。 你需要的是：
# 1.获取您的微信/支付宝/比特币收款二维码图片并放入主题目录下的source/images中或上传到图片云以获得绝对HTTP地址。
# 2.在 NexT 配置文件中设置所需的值：如下所示
# Front-matter variable (nonsupport animation).
reward_settings:
  # 如果为 true，则默认情况下每篇文章中都会显示捐赠按钮。
  enable: false
  animation: false

reward:  # 在以下部分设置不同的收款码
  #wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

# 通过 Telegram 频道、Twitter 等订阅。
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.png || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

# Related popular posts 相关热门帖子需要安装如下扩展，详情参见《热门文章设置》
# Dependencies: https://github.com/sergeyzwezdin/hexo-related-posts
related_posts:
  enable: false
  icon: fa fa-signs-post

# Post edit 编辑文章
# NexT 支持帖子的编辑功能。 通过启用此功能，用户可以快速浏览和修改GitHub上的博客源代码。
# 可以通过在 NexT 配置文件中将 post_edit.enable 设置为 true 来启用它。
post_edit:
  enable: false
  # 创建帖子文件的源存储库。 url设置取决于github中的源项目。
  # For site repository
		#Link for view source: url: https://github.com/.../tree/master/source/_posts/
		#Link for fork & edit: url: https://github.com/.../edit/master/source/_posts/
  # For post repository
		#Link for view source: url: https://github.com/.../_posts/tree/master/
		#Link for fork & edit: url: https://github.com/.../_posts/edit/master/
  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name/ # Link for view source
  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # Link for fork & edit

# 文章导航
# 在帖子页脚中显示上一篇文章和下一篇文章（如果存在）。
# Available values: left | right | false
post_navigation: left

文章字数统计及阅读时常

  1. 安装插件hexo-wordcount,执行以下命令:

    1
    2
    3
    4
    5
    6
    7
    8
    [root@hexo Hexo]# npm install hexo-word-counter

    added 2 packages in 8s
    [root@hexo Hexo]# hexo clean
    INFO  Validating config
    INFO  Deleted database.
    INFO  Deleted public folder.
    [root@hexo Hexo]#

  2. Hexo Config

    在 Hexo 配置文件中启用任意option即可激活此插件：

    默认没找到以下选项，需要手动添加，添加任意一个选项即可。

    • symbols

      默认情况下，NexT 会显示帖子元信息部分的帖子字数。您可以通过在 Hexo 配置文件中将 symbol_count_time.symbols 的值设置为 false 来禁用此功能。

      1
      2
      symbols_count_time:
        symbols: true

    • time

      默认情况下，NexT 在帖子元部分显示帖子的预计阅读时间。您可以通过在 Hexo 配置文件中将值 symbol_count_time.time 设置为 false 来禁用它。

      1
      2
      symbols_count_time:
        time: true

    • total_symbols

      默认情况下，NexT 在页脚部分显示所有帖子的字数。您可以通过在 Hexo 配置文件中将 symbol_count_time.total_symbols 的值设置为 false 来禁用它。

      1
      2
      symbols_count_time:
        total_symbols: true

    • total_time

      默认情况下，NexT 在页脚部分显示所有帖子的预计阅读时间。您可以通过在 Hexo 配置文件中将值 symbol_count_time.total_time 设置为 false 来禁用它。

      1
      2
      symbols_count_time:
        total_time: true

    • awl

      awl 表示平均字长（单词中的字符数）。您可以在[此处](Character Count Tool - The Best Character Counter)查看。

      1
      2
      symbols_count_time:
        awl: 4

    • wpm

      wpm 表示平均每分钟单词数。您可以在[此处](WordCounter - Count Words & Correct Writing)查看。

      1
      2
      symbols_count_time:
        wpm: 275

  3. NexT Config

    启用插件后，您可以在 NexT 配置文件中的 symbol_count_time 部分中调整选项：

    1
    2
    3
    4
    5
    6
    7
    # Post wordcount display settings
    # Dependencies: https://github.com/next-theme/hexo-word-counter
    symbols_count_time:
    	# 默认情况下，NexT 会将单词计数和预计阅读时间显示在单独的一行中。您可以在 NexT 配置文件中将 symbol_count_time.separated_meta 的值设置为 false，从而将它们添加到一行中。
      separated_meta: true
      # 默认情况下，NexT 不会在页脚部分显示字数和预计阅读时间的文本描述。您可以通过在 NexT 配置文件中将值 symbol_count_time.item_text_total 设置为 false 来启用它。
      item_text_total: false

热门文章设置

  1. 通过在站点根目录中执行以下命令来安装 hexo-lated-posts：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    [root@hexo Hexo]# pwd
    /Hexo
    [root@hexo Hexo]# npm install hexo-related-posts

    added 21 packages in 9s
    [root@hexo Hexo]# hexo clean
    INFO  Validating config
    INFO  Deleted database.
    INFO  Deleted public folder.
    [root@hexo Hexo]#

  2. 可以通过在 NexT 配置文件中将 related_posts.enable 值设置为 true 来启用它。

    1
    2
    related_posts:
      enable: true

  3. 默认情况下，NexT 在titile之前显示signs-post。 图标的名称可以在 Font Awesome 网站中找到。 您可以通过编辑 NexT 配置文件的 related_posts 部分中的值图标来配置它。

    1
    2
    related_posts:
      icon: fa fa-signs-post

自定义页面设置

官文中没找到关于以下部分配置的说明：

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
# ---------------------------------------------------------------
# Custom Page Settings
# See: https://theme-next.js.org/docs/theme-settings/custom-pages
# ---------------------------------------------------------------

# TagCloud settings for tags page.
tagcloud:
  min: 12 # Minimum font size in px
  max: 30 # Maximum font size in px
  amount: 200 # Total amount of tags
  orderby: name # Order of tags
  order: 1 # Sort order

# Google Calendar
# Share your recent schedule to others via calendar page.
calendar:
  calendar_id: <required> # Your Google account E-Mail
  api_key: <required>
  orderBy: startTime
  showLocation: false
  offsetMax: 72 # Time Range
  offsetMin: 4 # Time Range
  showDeleted: false
  singleEvents: true
  maxResults: 250

自定义一个about页面

接下来允许用户在菜单中添加自定义页面。

  1. Adding New Page

    在站点根目录。 使用 hexo new page custom-name 创建一个新的自定义名称页面：

    1
    2
    3
    4
    5
    [root@hexo Hexo]# pwd
    /Hexo
    [root@hexo Hexo]# hexo new page about
    INFO  Validating config
    INFO  Created: /Hexo/source/about/index.md

  2. Setting Front-matter Values

    Front-matter 是位于文件开头的 YAML 或 JSON 块，用于配置您的作品的设置。 设置 front-matter 值和更详细的内容可以在 front-matter 中找到。 如果您愿意，您还可以在 custom-name/index.md 中添加内容。

    1
    2
    3
    4
    title: custom-name
    date: 2014-12-22 12:39:04
    ---

  3. Editting Menu

    Add custom-name to menu by editing NexT config file, like adding about page:

    1
    2
    3
    4
    menu:
      home: / || fa fa-home
      archives: /archives/ || fa fa-archive
      about: /about/ || fa fa-user

  4. 渲染

    1
    2
    hexo clean
    hexo g     # 会将/Hexo/source/about/index.md 渲染为 /Hexo/public/about/index.html

使用存档页面作为主页

可以在 ==Hexo 配置文件==中配置archive和index generator的路径，例如

1
2
3
4
5
6
archive_dir: /

index_generator:
  path: archives
  per_page: 10
  order_by: -date

添加Tags页面

添加Tags页面并在菜单中显示Tags链接。 Tags页面将显示网站的所有标签。 如果没有文章有标签，此页面将留空。

  1. Adding New Page

    站点根目录。 使用hexo new page tags创建新标签页面：

    1
    2
    3
    [root@hexo Hexo]# hexo new page tags
    INFO  Validating config
    INFO  Created: /Hexo/source/tags/index.md

  2. 设置页面类型

    编辑新页面并将==类型==更改为tags，主题将在该页面自动显示tags cloud。 页面内容如下所示：

    1
    2
    3
    4
    5
    6
    [root@hexo Hexo]# cat source/tags/index.md 
    ---
    title: tags
    date: 2024-05-06 21:48:30
    type: tags
    ---

  3. 编辑菜单

    通过编辑 ==NexT 配置文件==向菜单添加标签，如下所示：

    1
    2
    3
    4
    menu:
      home: / || fa fa-home
      archives: /archives/ || fa fa-archive
      tags: /tags/ || fa fa-tags

如果您为站点启用任何评论系统，所有帖子和页面的评论都会显示。

如果要为tags和categories页面禁用评论，参见https://theme-next.js.org/docs/third-party-services/comments#How-to-Disable-Comments-on-Page

默认的 Hexo 插件 hexo-generator-tag 提供了一个名为 enable_index_page 的选项，该选项会与上面创建的 «Tags» 页面冲突。 确保您已禁用该选项。

1
2
3
# 没找到这个配置项，手动添加了
tag_generator:
  enable_index_page: false

Tagcloud

默认情况下，NexT 在标签页中设置了Tagcloud的字体颜色和大小。
从 NexT v7.0.2 开始，您可以自定义它们，只需在 ==NexT 配置文件==中设置相关值即可：

1
2
3
4
5
6
7
# TagCloud settings for tags page.
tagcloud:
  min: 12 # Minimum font size in px
  max: 30 # Maximum font size in px
  amount: 200 # Total amount of tags
  orderby: name # Order of tags
  order: 1 # Sort order

添加分类页面

Categories页面的添加方式与tags页面类似，只是名称不同：只需将标签替换为类别即可。

  1. 添加类别页面

    1
    2
    3
    [root@hexo Hexo]# hexo new page categories
    INFO  Validating config
    INFO  Created: /Hexo/source/categories/index.md

  2. 设置页面类型

    编辑新页面并将==类型==更改为categories

    1
    2
    3
    4
    5
    6
    [root@hexo Hexo]# cat source/categories/index.md 
    ---
    title: categories
    date: 2024-05-06 22:29:28
    type: categories
    ---

  3. 编辑菜单

    通过编辑 ==NexT 配置文件==向菜单添加标签，如下所示：

    1
    2
    3
    4
    5
    6
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive

在文章中指定分类和标签

如果您想添加标签或类别页面，请继续阅读。
请阅读 Hexo 的分类和标签文档，了解如何为文章添加标签或分类。
以下代码向您展示了带有标签的文章示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 语法1
---
title: Tags Testing Article
tags: [Testing, Another Tag]
---

// 语法2
---
title: Tags Testing Article
tags:
  - Testing
  - Another Tag
---

// 示例
---
title: Hello World
tags: [Test]
categories: [HelloWorld]
---

添加 Google 日历页面

请注意，您首先需要确保添加的日历设置为公开。 如果您不确定，请先按照这些说明设置公开 Google 日历，然后再添加。

有关创建和管理公共 Google 日历的更详细文档：https://support.google.com/calendar/answer/37083

Custom 404 Page

在站点根目录中，创建一个名为 404 的新文件夹，然后在其中创建一个新页面：

1
2
3
4
5
[root@hexo Hexo]# hexo new page 404
INFO  Validating config
INFO  Created: /Hexo/source/404/index.md
[root@hexo Hexo]# pwd
/Hexo

确保 ==Hexo 配置文件==中禁用relative_link：

1
relative_link: false

用户是否可以被重定向到404页面，取决于网站托管服务或Web服务器的设置，而不是Hexo。 例如，如果使用Nginx作为服务器，还需要在nginx.conf文件中配置404页面。

公益404

如果您想启用公益404（腾讯在中国提供的一项服务），请像这样编辑404/index.md：

1
2
3
4
5
6
7
8
---
title: '404'
date: 2014-12-22 12:39:04
comments: false
---
<script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
        charset="utf-8" homePageUrl="/" homePageName="Back to home">
</script>

还可以添加任何您想要的内容。

通过编辑 NexT 配置文件将 404 添加到菜单：

1
2
3
4
menu:
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
  commonweal: /404/ || fa fa-heartbeat

Misc主题设置

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
# ---------------------------------------------------------------
# Misc Theme Settings
# See: https://theme-next.js.org/docs/theme-settings/miscellaneous
# ---------------------------------------------------------------

# Preload styles and preconnect CDN for fonts and plugins.
# For more information: https://www.w3.org/TR/resource-hints/#preconnect
# NexT 支持添加预连接资源提示，以建立与字体和插件来源的早期连接。
# 您可以通过在 NexT 配置文件中设置 preconnect: true 来启用它。
preconnect: false

# Set the text alignment in posts / pages.
# 文本对齐
text_align:
	# NexT 允许自定义帖子/页面中的文本对齐方式。 text-align CSS 属性设置块元素或表格单元格框的水平对齐方式。
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  # start:如果方向是从左到右，则与左相同；如果方向是从右到左，则与右相同。
  # end:如果方向是从左到右，则与右相同；如果方向是从右到左，则与左相同。
  # left:行内内容与行框的左边缘对齐。
  # right:行内内容与行框的右边缘对齐。
  # center:行内内容位于行框的中心。
  # justify:行内内容是两端对齐的。文本的左右边缘应与行框的左右边缘对齐，最后一行除外。
  # justify-all:与 justify 相同，但也强制最后一行对齐。
  # match-parent:与继承类似，但是开始和结束的值是根据父级的方向计算的，并被适当的左值或右值替换。
  desktop: justify
  mobile: justify

# 移动设备适配
# 如果您想减少宽度较窄的设备上填充/边距缩进，您可以通过在 NexT 配置文件中将值 mobile_layout_economy 设置为 true 来启用它。
mobile_layout_economy: false

# 默认情况下，NexT 使用 black-deep (#222) 作为浏览器标题面板的颜色（Safari 15 和 Android Chrome 支持该颜色）。
# 您可以通过在 NexT 配置文件的 theme_color 部分中编辑十六进制颜色值来配置它。
theme_color:
  light: "#222"
  dark: "#222"

# 主体滚动条
# Override browsers' default behavior.
body_scrollbar:
  # Place the scrollbar over the content.
  overlay: false
  # Present the scrollbar even if the content is not overflowing.
  stable: false

# 代码块样式
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  # NexT 使用 Highlight.js 和 Prism 包来支持代码高亮。
  # 请先阅读 Hexo 关于语法高亮的文档，并在 Hexo 配置文件中进行设置。
  # 你可以在https://theme-next.js.org/highlight/预览所有支持的样式
  # 如果启用了暗模式，则暗色代码突出显示主题将可用。
  theme:
    light: default
    dark: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    # 可以通过在 NexT 配置文件中将 copy_button.enable 的值设置为 true 来启用它。默认情况下，NexT 显示复制粘贴功能的复制结果。
    enable: false
    # 使用样式选项，您可以更改复制按钮样式。目前有三种样式可用：默认（留空即可）、flat和 mac。
    # Available values: default | flat | mac
    style:
  # 折叠代码块
  fold:
    enable: false
    height: 500

back2top:
  # 将值 back2top.enable 设置为 true 以显示返回顶部按钮。
  enable: true
  # 将值 back2top.sidebar 设置为 true，以将按钮放在侧边栏中。
  sidebar: false
  # 将值 back2top.scrollpercent 设置为 true 以在“返回顶部”按钮中显示滚动百分比标签。
  scrollpercent: false

# 阅读进度
reading_progress:
  # NexT 支持页面滚动阅读进度指示器。您可以通过在 NexT 配置文件中将 reading_progress.enable 的值设置为 true 来启用它。
  enable: false
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#37c6c0"
  height: 3px

# Bookmark Support
# Bookmark 是一个允许用户保存阅读进度的插件。用户只需点击页面左上角的书签图标（如 🔖）即可保存滚动位置。当他们下次访问您的博客时，他们可以自动恢复每个页面的上次滚动位置。
# 您可以通过在 NexT 配置文件中将 bookmark.enable 值设置为 true 来启用它。
bookmark:
  enable: false
  # Customize the color of the bookmark.
  color: "#222"
  # 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

# Follow me on GitHub` banner in the top-right corner.
# NexT 在右上角提供了在 GitHub 上关注我的横幅。
github_banner:
  enable: false
  permalink: https://github.com/yourname

代码块样式预览

在以下网站预览所有样式

  • Highlight (theme-next.js.org)

字体设置

NexT 为您提供 5 种特定的字体设置，它们是：

  • 全局字体：整个网站使用的字体。
  • 标题字体：网站标题使用的字体。
  • 标题字体：文章标题使用的字体（h1、h2、h3、h4、h5、h6）。
  • 文章字体：文章使用的字体。
  • 代码字体：文章代码块使用的字体。

每种字体都将作为此类的第一个字体，如果内部字体设置不可用，NexT 将恢复使用内部字体设置。

  • Non-code Font: Fallback to "PingFang SC", "Microsoft YaHei", sans-serif
  • Code Font: Fallback to consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

另外，每个部分都有一个外部属性，用于控制是否使用字体库 CDN。使用此功能可以帮助您使用系统中安装的字体并减少不必要的请求。

为了解决 Google Fonts API 在某些国家/地区的不稳定问题，NexT 通过设置 font.host 支持自定义字体库 URL。
另外，我们注意到对于某些网站的请求，Google Fonts 会返回 403。此时需要使用 font.host 设置镜像站点。
相关问题：#613、#1333

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
# ---------------------------------------------------------------
# Font Settings
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://fonts.google.com)
# All fonts set here will have the following styles:
#   light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
  enable: false

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

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  # 全局字体
  global:
    external: true
    family: Lato
    size:

  # Font settings for site title (.site-title).
  # 网站标题字体
  title:
    external: true
    family:
    size:

  # Font settings for headlines (<h1> to <h6>).
  # 文章标题字体
  headings:
    external: true
    family:
    size:

  # Font settings for posts (.post-body).
  # 文章内容字体
  posts:
    external: true
    family:

  # Font settings for <code> and code blocks.
  # 代码块字体
  codes:
    external: true
    family:

并且每个选项都可以应用多个字体系列。这对于经常写中文和英文的人来说特别有用。如下：

1
2
3
4
5
6
7
font:
  ...
  title:
    external: true
    family: Roboto Slab, Noto Serif SC
    size:

根据 CSS 字体模块 3 级规范：
除通用系列之外的字体系列名称必须以字符串形式引用，或以一个或多个标识符序列形式引用。为避免转义错误，请根据需要引用字体系列名称。

如果您仍需要更多自定义，以下更改将涵盖字体自定义功能。编辑站点根目录中的 source/_data/variables.styl 并添加两个变量：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Title Font, set it to font family you want.
$font-family-headings = Georgia, sans

// Set it to font family you want.
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// Code Font.
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// Font size of articles.
$font-size-base = 16px

// Font size of table and code.
$table-font-size = 13px

然后取消注释 NexT 配置文件中 custom_file_path 部分下的变量。

SEO设置

接下来提供了有用的选项以实现更好的搜索引擎优化（SEO）。

在 ==Hexo 配置文件==中设置 URL url: http://example.com 后，默认情况下 Hexo 会创建一个规范链接标签。更多详细信息请参阅[合并重复 URL](如何使用 rel=”canonical” 及其他方法指定规范网址 | Google 搜索中心 | 文档 | Google for Developers)。

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
# ---------------------------------------------------------------
# SEO Settings
# See: https://theme-next.js.org/docs/theme-settings/seo
# ---------------------------------------------------------------

# If true, site-subtitle will be added to the title of index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
# 将 NexT 配置文件中的 index_with_subtitle 的值设置为 true，以将subtitle信息添加到索引页。
index_with_subtitle: false
# 可以在 Hexo 配置文件中设置subtitile。

# Automatically add external URL with Base64 encrypt & decrypt.
# 使用 BASE64 加密和解密的外部 URL，为搜索引擎提供对 <a> 标签的无意义的内容。详细解释参见：https://theme-next.js.org/docs/theme-settings/seo
# 只需在主题配置文件中的“SEO 设置”部分下打开一个设置：
exturl: false
# You can also enable the icon for it:
exturl_icon: true

# Google Webmaster tools verification.
# See: https://developers.google.com/search
# 设置Google网站管理员工具（https://developers.google.com/search?hl=zh-cn）的验证字符串，用于提交站点地图。
# 1.登录Google网站管理员工具，进入验证方法，选择HTML标签，你会得到一些代码：
#    <meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXXXXX">
# 2.复制内容密钥的 XXXXXXXXXXXXXXXXXXXXXXX 值。编辑 NexT 配置文件并添加或更改 google_site_verification 的值：
#    google_site_verification: XXXXXXXXXXXXXXXXXXXXXXX
google_site_verification:

# Bing Webmaster tools verification.
# See: https://www.bing.com/webmasters
# 设置bing网站管理员工具（https://www.bing.com/webmasters/about）的验证字符串，用于提交站点地图。
# 1.登录Google网站管理员工具，进入验证方法，选择HTML标签，你会得到一些代码：
#    <meta name="msvalidate.01" content="XXXXXXXXXXXXXXXXXXXXXXX">
# 2.复制内容密钥的 XXXXXXXXXXXXXXXXXXXXXXX 值。编辑 NexT 配置文件并添加或更改 bing_site_verification 的值：
#    bing_site_verification: XXXXXXXXXXXXXXXXXXXXXXX
bing_site_verification:

# Yandex Webmaster tools verification.
# See: https://webmaster.yandex.ru
yandex_site_verification:

# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site
# 1.登录Google网站管理员工具，进入验证方法，选择HTML标签，你会得到一些代码：
#    <meta name="baidu-site-verification" content="code-XXXXXXXXXX">
# 2.复制内容密钥的 XXXXXXXXXXXXXXXXXXXXXXX 值。编辑 NexT 配置文件并添加或更改 baidu_site_verification 的值：
#    baidu_site_verification: code-XXXXXXXXXX
baidu_site_verification:
# 默认情况下，百度会缓存并重写您的网站，以便为移动用户提供网页快照。您可以通过设置网站类型来禁用此功能。

Internationalization-i18n

编辑 ==Hexo 配置文件==，将 language 的值设置为你需要的语言，例如英语如下：

1
language: en

NexT 现在支持以下语言：Internationalization | NexT (theme-next.js.org)

语言目录中的文件是自动生成的，您不需要直接修改它们。如果您想添加或改进 NexT 主题的翻译，请通过 Crowdin 提交翻译。

Multilingual Switcher

在 Hexo 配置文件中设置多种语言，例如

1
2
3
language:
  - zh-CN
  - en

然后在 NexT 配置文件中打开 language_switcher：

1
2
# Show multilingual switcher in footer.
language_switcher: true

注意：启用多语言切换时，会提示以下内容：

1
WARN  Since language_switcher is turned on, the caching is disabled to avoid potential hazards(禁用缓存以避免潜在的危险。).

感觉速度确实慢了，没什么乱用。

覆盖默认翻译

如果您想自定义默认翻译，则无需修改语言目录中的翻译文件。您可以使用Data Files | Hexo覆盖所有翻译。

  1. Create a languages.yml in source/_data.

  2. 插入以下代码:(注意两个空格的缩进)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # language
    zh-CN:
      # items
      post:
        copyright:
          # the translation you prefer
          author: 本文博主
    en:
      menu:
        schedule: Calendar

这种情况对于列表外的项目也适用。例如，Next 使用 Theme Inject 来引入评论系统。你可以将返回值重命名为中文，如下所示：

1
2
3
4
5
6
# language
zh-CN:
  # items
  post:
    comments:
      disqus: 评论

插件标签：Tag Plugin

本质上应该是Markdown文件中的扩展语法支持。

  • 标签插件（Tag Plugins） | Hexo

标签插件是 Hexo 支持的一种制作特殊样式内容的方法。例如，我们无法在标准 Markdown 中显示自定义大小的图片。那么我们就可以使用标签插件来解决它。Hexo 有很多标签可以帮助用户。而且 Hexo 还提供了与主题的接口，使主题能够创建自己的标签。NexT 提供以下标签：

  • Button
  • Caniuse
  • Centered Quote
  • Group Pictures
  • Label
  • Link Grid
  • Mermaid
  • WaveDrom
  • Note
  • PDF
  • Tabs
  • Video

这些标签插件仅在主题 NexT 中可用。如果切换到其他 Hexo 主题，它们可能会导致渲染错误。

默认配置文件内容

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
# ---------------------------------------------------------------
# Tags Settings
# See: https://theme-next.js.org/docs/tag-plugins/
# ---------------------------------------------------------------

# Note tag (bootstrap callout)
note:
  # Note tag style values:
  #  - simple    bootstrap callout old alert style. Default.
  #  - modern    bootstrap callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

# Tabs tag
tabs:
  # Make the nav bar of tabs with long content stick to the top.
  sticky: false
  transition:
    tabs: false
    labels: true

# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# Dependencies: https://github.com/next-theme/theme-next-pdf
pdf:
  enable: false
  # Default height
  height: 500px

# Mermaid tag
mermaid:
  enable: false
  # Available themes: default | dark | forest | neutral
  theme:
    light: default
    dark: dark

# WaveDrom tag
wavedrom:
  enable: false

居中引用Centered Quote

此tag将创建前后两行的引言，并且引言的文字将居中显示。使用居中引言时，如果有多行文本，并且每行的长度不同，则引言将不对称，因此建议在只有单行文本时使用。例如在文章前和文章后都使用，以进行总结。

1
2
3
4
5
6
7
{% centerquote %}Something{% endcenterquote %}
# or
{% cq %}Something{% endcq %}

# 示例
{% cq %}Elegant in code, simple in core{% endcq %}
# 此时 “Elegant in code, simple in core” 将剧中显示

视频

1
2
3
4
5
{% video url %}

# 示例
{% video https://example.com/sample.mp4 %}
{% video /path/to/your/video.mp4 %}

Button

Button | NexT (theme-next.js.org)

Caniuse

Caniuse | NexT (theme-next.js.org)

Group Pictures

Group Pictures | NexT (theme-next.js.org)

Label

Label | NexT (theme-next.js.org)

Link Grid | NexT (theme-next.js.org)

Mermaid-流程图

Mermaid | NexT (theme-next.js.org)

WaveDrom

WaveDrom | NexT (theme-next.js.org)

Note (Bootstrap Callout)

Note (Bootstrap Callout) | NexT (theme-next.js.org)

PDF

PDF | NexT (theme-next.js.org)

第三方插件和服务设置

静态网站在某些功能上受到限制，因此我们需要第三方服务来扩展我们的网站。您可以随时使用 NexT 支持的第三方服务来扩展所需的功能。

1
2
3
4
5
6
# ---------------------------------------------------------------
# Third Party Plugins & Services Settings
# See: https://theme-next.js.org/docs/third-party-services/
# More plugins: https://github.com/next-theme/awesome-next
# ---------------------------------------------------------------

Adding Plugins

插件扩展了 NexT 的功能。有两种类型的库：内部脚本和第三方插件。内部脚本默认从您的网站加载，它们是 NexT 基本功能所必需的。第三方插件提供了大量可选功能。它们默认从 jsDelivr CDN 加载，因为它在任何地方都很快。配置这些插件非常简单。例如，如果您想在您的站点中使用 pjax，只需在 ==NexT 配置文件==中将 pjax 设置为 true：

pjax位于外部库文件部分

1
2
3
# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true

如果您想为任何插件指定 CDN 提供商，则需要设置/更新 CDN URL。有关更多信息，请参阅高级设置。

数学公式渲染支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# ---------------------------------------------------------------
# Math Formulas Render Support
# See: https://theme-next.js.org/docs/third-party-services/math-equations
# Warning: Please install / uninstall the relevant renderer according to the documentation.
# 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 script EVERY PAGE.
  every_page: false

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

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

Comment Systems-评论系统

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# ---------------------------------------------------------------
# Comments Settings
# See: https://theme-next.js.org/docs/third-party-services/comments
# ---------------------------------------------------------------

# 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:
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any naves, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

# Disqus
# For more information: https://disqus.com
disqus:
  enable: false
  shortname:
  count: true

# DisqusJS
# For more information: https://disqusjs.skk.moe
disqusjs:
  enable: false
  # API Endpoint of Disqus API (https://disqus.com/api/docs/).
  # Leave api empty if you are able to connect to Disqus API. Otherwise you need a reverse proxy for it.
  # For example:
  # api: https://disqus.skk.moe/disqus/
  api:
  apikey: # Register new application from https://disqus.com/api/applications/
  shortname: # See: https://disqus.com/admin/settings/general/

# Changyan
# For more information: https://changyan.kuaizhan.com
changyan:
  enable: false
  appid:
  appkey:
  # Show comments count
  count: true

# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: # <your_uid>

# Gitalk
# For more information: https://gitalk.github.io
gitalk:
  enable: false
  github_id: # GitHub repo owner
  repo: # Repository name to store issues
  client_id: # GitHub Application Client ID
  client_secret: # GitHub Application Client Secret
  admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # When the official proxy is not available, you can change it to your own proxy address
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy address
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

# Utterances
# For more information: https://utteranc.es
utterances:
  enable: false
  repo: user-name/repo-name # Github repository owner and name
  # Available values: pathname | url | title | og:title
  issue_term: pathname
  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
  theme: github-light

# Isso
# For more information: https://isso-comments.de
isso: # <data_isso>

概述

多评论系统支持

NexT 允许您同时启用多个评论系统。您可以修改以下配置来调整多个评论系统的样式或行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 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 | isso
  active:
  # Setting `true` means remembering the comment system selected by the visitor
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify icons and texts for any style, here are some examples
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

可以通过在 NexT 配置文件中将 comments.lazyload 的值设置为 true 来==启用延迟加载==。 NexT 使用 IntersectionObserver 来延迟加载评论，而 IE 和 2017 年之前发布的大多数浏览器均不支持此功能。

如何在页面上禁用评论

当你启用 Disqus 等评论服务时，所有新页面都会自动拥有评论服务。如果你想在某个页面中禁用它，只需在 front-matter 中添加 comments 键并将其值设置为 false。如下所示：

1
2
3
4
5
---
title: All tags
type: "tags"
comments: false
---

重命名评论计数文本

You can rename the post meta text of comment count using languages.yml: Override Default Translations.

Disqus

Disqus 是一个全球评论系统，可以改善网站上的讨论并连接网络上的对话。

  1. 创建账户并登录Disqus，登录后点击首页的GET STARTED按钮，然后选择I want to install Disqus on my site选项，你就会看到Create a new site界面。

  2. 输入您的网站名称（将作为您的 Disqus shortname），然后从下拉菜单中选择一个类别。然后单击“创建网站”按钮。

  3. 选择I don't see my platform listed, install manually with Universal Code，为您的网站配置 Disqus，然后单击“完成设置”按钮。

  4. 将enable设置为true，添加获取到的Disqus短名称（shortname），并在NexT配置文件中的disqus部分编辑其他配置如下：

    1
    2
    3
    4
    disqus:
      enable: false
      shortname: your-short-disqus-name
      count: true

DisqusJS

使用 Disqus API 渲染 Disqus 评论组件。

  1. Get your Disqus API Key from Disqus API Application.

  2. Go to the settings page of your Disqus Application, enter your domain in Settings → Domains.

  3. Get your Disqus Shortname from General Settings - Disqus Admin.

  4. Set the value enable to true, add the obtained Disqus API Key (apikey) and Shortname (shortname), and edit other configurations in disqusjs section in the NexT config file as following:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # DisqusJS
    # Demo: https://disqusjs.skk.moe
    disqusjs:
      enable: false
      # API Endpoint of Disqus API (https://disqus.com/api/docs/)
      # leave api empty if you are able to connect to Disqus API
      # otherwise you need a reverse proxy for Disqus API
      # For example:
      # api: https://disqus.skk.moe/disqus/
      api:
      apikey: # register new application from https://disqus.com/api/applications/
      shortname: # See: https://disqus.com/admin/settings/general/

Changyan (China)

畅言是业界领先的社交评论系统，支持PC和移动端两种访问方式，为网站评论提供了一种全新的方式。畅言拥有多种常用账号登录、三重过滤机制、实时数据统计、快速数据导出、全面支持移动端等领先功能，充分满足各大网站用户登录、评论、分享、点评的需求。

  1. Create an account or log into Changyan, then add your site to get APP ID and APP KEY.

  2. Set the value enable to true, and add the obtained APP ID (appid) and APP KEY (appkey) to the changyan section in the NexT config file as following:

    1
    2
    3
    4
    5
    6
    # changyan
    changyan:
      enable: false
      appid:
      appkey:
      count: true

注意：您发表评论后，需要一段时间才能看到评论数量的增加。

LiveRe

LiveRe是一个基于社交网站评论的内容平台，帮助用户自由交流。

  1. Create an account or log into LiveRe, click on the installation button and select the free city version, then click on the install now button.

  2. Copy the data-uid field in the installation code to get your LiveRe UID.

  3. Add the obtained LiveRe UID to the livere_uid section in the NexT config file as following:

    1
    2
    3
    4
    # Support for LiveRe comments system.
    # You can get your uid from https://livere.com/insight/myCode (General web site)
    livere_uid: your_uid

Gitalk

Gitalk 是一个基于 Github Issue 和 Preact 的现代评论组件。

  1. Click here to sign up for a new OAuth Application. Other content can be filled in at will, but be sure to fill in the correct callback URL (usually the domain name corresponding to the comment page). Then you will get a Client ID and a Client secret.

  2. Create a repository you want to store Gitalk comments in your GitHub.

  3. Set the value enable to true, add Client ID (client_id) and Client secret (client_secret) in step 1, add your Github username (github_id and admin_user) and the created repository name (repo) in step 2, and edit other configurations in gitalk section in the NexT config file as following:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # Gitalk
    # For more information: https://gitalk.github.io
    gitalk:
      enable: false
      github_id: # GitHub repo owner
      repo: # Repository name to store issues
      client_id: # GitHub Application Client ID
      client_secret: # GitHub Application Client Secret
      admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
      distraction_free_mode: true # Facebook-like distraction free mode
      # When the official proxy is not available, you can change it to your own proxy address
      proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy address
      # Gitalk's display language depends on user's browser or system environment
      # If you want everyone visiting your site to see a uniform language, you can set a force language value
      # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
      language:

Gitalk 依赖页面路径的 md5 值进行标记，如果页面的永久链接发生变化，评论将无法正确加载。

Utterances

基于 GitHub 问题构建的轻量级评论小部件。使用 GitHub 问题进行博客评论、维基页面等！

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

Isso

Isso – Ich schrei sonst – 是一个用 Python 和 JavaScript 编写的轻量级评论服务器。它旨在成为 Disqus 的替代品。

  1. You need to install and configure Isso on your server first.

  2. Set the value isso in the NexT config file as the value data-isso in Isso script. An exemplary script tag is given in the Integration section of the Isso quickstart document, you need to modify it according to the URL of your server.

    1
    2
    3
    # Isso
    # For more information: https://isso-comments.de
    isso: # <data_isso>

统计和分析

只要page's host name与 ==Hexo 配置文件==中设置的 url 选项不匹配，NexT 就不会将记录发送给分析服务提供商。这将防止本地调试污染分析。请确保您已正确配置 url，否则这些统计工具可能无法按预期工作。

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
# ---------------------------------------------------------------
# Statistics and Analytics
# See: https://theme-next.js.org/docs/third-party-services/statistics-and-analytics
# ---------------------------------------------------------------
# Google Analytics
# See: https://analytics.google.com
google_analytics:
  tracking_id: # <app_id>
  # By default, NexT will load an external gtag.js script on your site.
  # If you only need the pageview feature, set the following option to true to get a better performance.
  only_pageview: false
  # only needed if you are using `only_pageview` mode, https://developers.google.com/analytics/devguides/collection/protocol/ga4
  measure_protocol_api_secret:

# Baidu Analytics
# See: https://tongji.baidu.com
baidu_analytics: # <app_id>

# Growingio Analytics
# See: https://www.growingio.com
growingio_analytics: # <project_id>

# Cloudflare Web Analytics
# See: https://www.cloudflare.com/web-analytics/
cloudflare_analytics:

# Microsoft Clarity Analytics
# See: https://clarity.microsoft.com/
clarity_analytics: # <project_id>

# Matomo Analytics
# See: https://matomo.org/
matomo:
  enable: false
  server_url: # https://www.example.com/
  site_id: # <your site id>

# Umami Analytics
# See: https://umami.is/
umami:
  enable: false
  script_url: # https://umami.example.com/script.js
  website_id: # <your website id>
  host_url: # <your umami site url>

# Plausible Analytics
# See: https://plausible.io/
plausible:
  enable: false
  script_url: # https://plausible.io/js/script.js
  site_domain: # www.example.com

# Show number of visitors of each article.
# You can visit https://www.leancloud.cn to get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: # <your app id>
  app_key: # <your app key>
  # Required for apps from CN region
  server_url: # <your server url>
  # 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

# Another tool to show number of visitors to each article.
# Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
# Visit https://firebase.google.com/docs/firestore/ to get more information about firestore.
firestore:
  enable: false
  collection: articles # Required, a string collection name to access firestore database
  apiKey: # Required
  projectId: # Required

# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  enable: false
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: far fa-eye

分析工具

Google Analytics

  1. Create an account and log into Google Analytics. More detailed documentation

  2. 编辑 NexT 配置文件，并在 google_analytics 部分下的 tracking_id 中填写您的 Google 跟踪 ID。 Google 跟踪 ID 始终以 UA- 开头。

    1
    2
    3
    4
    # Google Analytics
    google_analytics:
      tracking_id: UA-XXXXXXXX-X
      only_pageview: false

  3. 当字段 only_pageview 设置为 true 时，NexT 只会将 pageview 事件发送到 Google Analytics。使用此字段而不是 only_pageview: false 的好处是减少网站上的外部脚本，这将为您提供更好的性能，但没有完整的分析功能。

Baidu Analytics (China)

  1. Login to Baidu Analytics and locate to site code getting page.

  2. Copy the script ID after hm.js?, like the following picture:

    NexT Baidu Analytics

  3. Edit NexT config file and change the value of baidu_analytics to your script ID.

    1
    2
    # Baidu Analytics ID
    baidu_analytics: your_id

Growingio Analytics

Official documentation: https://docs.growingio.com/v3/developer-manual/sdkintegrated/web-js-sdk/latest-jssdk

Edit NexT config file and change the value of growingio_analytics to your project ID.

1
2
# Growingio Analytics
growingio_analytics: # <project_id>

Cloudflare Web Analytics

Official documentation: https://www.cloudflare.com/web-analytics/

Edit NexT config file and change the value of cloudflare_analytics to your project ID.

1
2
# Cloudflare Web Analytics
cloudflare_analytics:

Microsoft Clarity Analytics

Official documentation: https://clarity.microsoft.com/

Edit NexT config file and change the value of clarity_analytics to your project ID.

1
2
# Microsoft Clarity Analytics
clarity_analytics: # <project_id>

Matomo Analytics (Self-managed)

编辑 NexT 配置文件并在 matomo 部分下的 server_url 和 site_id 中填写您的后端服务器的 url 和您的自定义站点 ID。

1
2
3
4
5
6
# Matomo Analytics
# See: https://matomo.org/
matomo:
  enable: false
  server_url: # https://www.example.com/
  site_id: # <your site id>

Umami Analytics (Self-managed)

Umami 是一个自托管的网络分析解决方案。官方文档：https://umami.is/

编辑 NexT 配置文件。将 umami 部分下的 script_url 填入您的跟踪脚本 URL，并将 website_id 的值更改为您的网站 ID。

1
2
3
4
5
6
# Umami Analytics
umami:
  enable: true
  script_url: # https://umami.example.com/script.js
  website_id: # <your website id>
  host_url: # <your umami site url>

Plausible Analytics (Self-managed)

Opt for paid managed hosting or self-host it on your server. Official documentation: https://plausible.io/

Edit NexT config file. Fill script_url under section plausible with your tracking script URL, and change the value of site_domain to your website domain.

1
2
3
4
5
# Plausible Analytics
plausible:
  enable: true
  script_url: # https://plausible.io/js/script.js
  site_domain: # www.example.com

统计工具

LeanCloud (China)

为 NexT 主题添加文章阅读次数计数。有关如何设置计数器并安全运行的文档可在 hexo-leancloud-counter-security 中找到。

获取app keys

  1. 创建账户或登录 LeanCloud，然后在仪表盘上点击按钮创建应用。

    LeanCloud

  2. Go to the application you just created, select Settings → App Keys in the lower left corner, and you will see your APP ID and APP Key.

    LeanCloud

安装

Install hexo-leancloud-counter-security by executing the following command in site root dir:

1
npm install hexo-leancloud-counter-security

Hexo配置

Edit Hexo config file and add following content:

1
2
3
4
5
6
leancloud_counter_security:
  enable_sync: true
  app_id: <your app id>
  app_key: <your app key>
  username: <your username> # Will be asked while deploying if is left blank
  password: <your password> # Recommmended to be left blank. Will be asked while deploying if is left blank

NexT配置

Edit NexT config file and fill options under leancloud_visitors section.

1
2
3
4
5
6
7
8
9
10
11
12
13
# Show number of visitors to each article.
# You can visit https://www.leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: #<app_id>
  app_key: #<app_key>
  # Required for apps from CN region
  server_url: # <your server url>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in lc counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
  security: true

Firebase

Firebase Analytics 提供访客统计功能。

  1. get apikey & projectid

    Login to Firebase to get apiKey and projectId. The Web API Key gets generated once you go into the “Authentication” section for the first time.

    Firebase

    1. NexT配置

      Edit NexT config file and add or change firestore section:

      1
      2
      3
      4
      5
      firestore:
        enable: true
        collection: articles #required, a string collection name to access firestore database
        apiKey: #required
        projectId: #required

Busuanzi Counting (China)

  1. Global Settings

    在 NexT 配置文件中编辑 busuanzi_count 选项。当 enable: true 时，启用全局设置。如果 total_visitors、total_views、post_views 均为 false，Busuanzi 仅计数但不显示。

  2. Site UV Settings

    当 total_visitors: true 时，将在页脚中显示站点 UV。您还可以通过将 total_visitors_icon 设置为图标名称来使用 font-awesome。

    1
    2
    3
    busuanzi_count:
      total_visitors: true
      total_visitors_icon: fa fa-user

  3. Site PV Settings

    当 total_views: true 时，将在页脚中显示站点 UV。您还可以通过将 total_views_icon 设置为图标名称来使用 font-awesome。

    1
    2
    3
    busuanzi_count:
      total_views: true
      total_views_icon: fa fa-eye

  4. Per-page PV Settings

    当 post_views: true 时，它将在帖子元数据中显示页面 PV。您还可以通过将 post_views_icon 设置为图标名称来使用 font-awesome。

    1
    2
    3
    busuanzi_count:
      post_views: true
      post_views_icon: far fa-eye

网络参考

  1. 打开主题配置文件，找到以下代码，并按照此方式更改代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Show Views / Visitors of the website / page with busuanzi.
    # Get more information on http://busuanzi.ibruce.info/
    busuanzi_count:
      enable: true
      total_visitors: true
      total_visitors_icon: fa fa-user
      total_views: true
      total_views_icon: fa fa-eye
      post_views: true
      post_views_icon: fa fa-eye

  2. 来到\themes\next\layout\_partials找到footer.swig文件，添加如下代码

    1
    2
    3
    {% if theme.footer.counter %}
        <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    {% endif %}

发布小部件和内容共享服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# ---------------------------------------------------------------
# Post Widgets & Content Sharing Services
# See: https://theme-next.js.org/docs/third-party-services/post-widgets
# ---------------------------------------------------------------

# AddToAny Share. See: https://www.addtoany.com
addtoany:
  # 编辑 NexT 配置文件以启用 AddToAny Share：
  enable: false
  # 启用 AddToAny 后，您可以添加更多按钮。
  buttons:
    - facebook
    - twitter
    - telegram
    - wechat
    - qzone

搜索服务

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
# ---------------------------------------------------------------
# Search Services
# See: https://theme-next.js.org/docs/third-party-services/search-services
# ---------------------------------------------------------------

# Algolia Search
# For more information: https://www.algolia.com
algolia_search:
  enable: false
  hits:
    per_page: 10

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: false
  # 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 提供了 Algolia 搜索插件来搜索您的 Hexo 网站内容。需要注意的是，仅在 NexT 配置文件中启用 algolia_search 并不能让您正确使用 Algolia 搜索。您需要安装相应的 ==Hexo 插件==才能在 Algolia 上索引您的网站：Hexo Algolia 或 Hexo Algoliasearch。

已知问题

鉴于 Algolia 的免费帐户限制，最新版本的 Hexo Algolia 插件删除了内容索引功能。

Hexo Algoliasearch 插件提供内容索引功能。 Algolia 免费帐户的“记录太大”也存在同样的问题。

按照下面描述的步骤完成 Algolia Search的安装。

  1. 注册

    在 Algolia 注册后，您可以直接使用 GitHub 或 Google 帐户登录。客户首次注册帐户后，客户将获得从生效日期开始的 14 天免费 Algolia 服务评估期（“评估期”），但须遵守 Algolia 网站的限制。此后，Algolia 将提供免费的品牌版本，每月最多可容纳 10,000 条记录和 100,000 次操作。

    如果弹出教程，你可以跳过它。直接==创建索引==，稍后会用到。

  2. Algolia Config

    • Go to the API Keys page and find your credentials. You will need the Application ID and the Search-only API key in the following sections. The Admin API key need to keep confidential. Never store your Admin API Key as apiKey in Hexo config file: it would give full control of your Algolia index to others and you don’t want to face the consequences.

      Algolia API Keys

    • In the API Keys page, click the All API Keys button to switch to the corresponding tab. Then click the New API Key button to activate a pop-up box where you can setup authorizations and restrictions with a great level of precision. Enter addObject, deleteObject, listIndexes, deleteIndex features in ACL permissions that will be allowed for the given API key. And then click the Create button. Copy this newly created key to the clipboard, we call it a High-privilege API key.

      Algolia API Keys 2

      Algolia Configuring Records

  3. Algolia Plugin

    Algolia 要求用户手动或通过提供的 API 上传其搜索索引数据。您需要选择安装以下两个插件之一。这两个插件都会索引您的网站并将选定的数据上传到 Algolia。

    • Hexo Algolia

      Install and configure Hexo Algolia in your Hexo directory.

      1
      2
      cd hexo-site
      npm install hexo-algolia

      在您的 Hexo 配置文件中，添加以下配置，并将应用程序 ID、仅搜索 API 密钥和 indexName 替换为在 Algolia 获取的相应字段。

      1
      2
      3
      4
      5
      algolia:
        applicationID: "Application ID"
        apiKey: "Search-only API key"
        indexName: "indexName"

      运行以下命令上传索引数据，密切关注命令的输出。

      1
      2
      3
      4
      5
      export HEXO_ALGOLIA_INDEXING_KEY=High-privilege API key # Use Git Bash
      # set HEXO_ALGOLIA_INDEXING_KEY=High-privilege API key # Use Windows command line
      hexo clean
      hexo algolia

    • Hexo Algoliasearch

      Install and configure Hexo Algoliasearch in your Hexo directory.

      1
      2
      cd hexo-site
      npm install hexo-algoliasearch

      在您的 Hexo 配置文件中，添加以下配置，并将应用程序 ID、仅搜索 API 密钥、高权限 API 密钥和 indexName 替换为在 Algolia 获取的相应字段。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      algolia:
        appId: "Application ID"
        apiKey: "Search-only API key"
        adminApiKey: "High-privilege API key"
        indexName: "indexName"
        chunkSize: 5000
        fields:
          - content:strip:truncate,0,500
          - excerpt:strip
          - gallery
          - permalink
          - photos
          - slug
          - tags
          - title

      运行以下命令上传索引数据，密切关注命令的输出。

      1
      2
      hexo clean
      hexo algolia

  4. 在NexT配置文件中，打开algolia_search的启用。同时，你需要关闭其他搜索插件，如Local Search。你也可以根据需要调整标签中的文字。

    1
    2
    3
    4
    5
    # Algolia Search
    algolia_search:
      enable: true
      hits:
        per_page: 10

本地搜索不需要任何外部第三方服务，可以被搜索引擎额外索引。建议大多数用户使用此搜索方法。

  1. 安装

    Install hexo-generator-searchdb by executing the following command in site root dir:

    1
    2
    3
    4
    [root@hexo ~]# cd /Hexo
    [root@hexo Hexo]# npm install hexo-generator-searchdb

    added 1 package in 4s

  2. Hexo配置

    Edit Hexo config file and ==add== following content:

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

  3. NexT配置

    Edit NexT config file to enable Local Search:

    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

聊天服务

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
# ---------------------------------------------------------------
# Chat Services
# See: https://theme-next.js.org/docs/third-party-services/chat-services
# ---------------------------------------------------------------

# A button to open designated chat widget in sidebar.
# Firstly, you need to enable and configure the chat service.
chat:
  enable: false
  icon: fa fa-comment # Icon name in Font Awesome, set to `false` to disable icon.

# Chatra is a functional, easy to use piece of chat software for websites.
# For more information: https://chatra.com
# Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: false
  async: true
  id: # Visit Dashboard to get your ChatraID
  #embed: # Unfinished experimental feature for developers. See: https://chatra.com/help/api/#injectto

# Tidio is a powerful, all-in-one customer service tool.
# For more information: https://www.tidio.com
# Dashboard: https://www.tidio.com/panel/dashboard
tidio:
  enable: false
  key: # Public Key, get it from dashboard. See: https://www.tidio.com/panel/settings/developer

Chatra

Chatra is a live chat messenger app for your website.

  • Enable Chatra

    Visit Dashboard to get your ChatraID.

    1
    2
    3
    4
    5
    # Chatra Support
    chatra:
      enable: true
      async: true
      id: <ChatraID>

  • Activate sidebar button

    After Chatra enabled, you can set chat.enable to true in NexT config file.

    1
    2
    3
    4
    5
    # A button to open designated chat widget in sidebar.
    # Firstly, you need enable the chat service you want to activate its sidebar button.
    chat:
      enable: true
      icon: fa fa-comment

Tidio

Tidio is a live chat messenger app for your website.

  • Enable Tidio

    Visit Dashboard to get your Public Key.

    1
    2
    3
    4
    # Tidio Support
    tidio:
      enable: true
      key: <Publick Key>

  • Activate sidebar button

    After Tidio enabled, you can set chat.enable to true in NexT config file.

    1
    2
    3
    4
    5
    # A button to open designated chat widget in sidebar.
    # Firstly, you need enable the chat service you want to activate its sidebar button.
    chat:
      enable: true
      icon: fa fa-comment

添加RSS订阅

1
npm install hexo-generator-feed

打开 Hexo 站点下的 _config.yml ,添加如下配置： 直接在底部复制粘贴以下内容即可

1
2
3
4
5
6
7
8
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

外部库文件

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
# ---------------------------------------------------------------
# External Libraries
# See: https://theme-next.js.org/docs/third-party-services/external-libraries
# ---------------------------------------------------------------

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: false

# 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: false

# Medium Zoom is a JavaScript library for zooming images like Medium.
# Warning: Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://medium-zoom.francoischalifour.com
mediumzoom: false

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: false

# Automatically insert whitespace between CJK and half-width characters.
# For more information: https://github.com/vinta/pangu.js
# Server-side plugin: https://github.com/next-theme/hexo-pangu
pangu: false

# Prefetch links based on what is in the user's viewport.
# For more information: https://getquick.link
# Front-matter variable (nonsupport home archive).
quicklink:
  enable: false

  # Home page and archive page can be controlled through home and archive options below.
  # This configuration item is independent of `enable`.
  home: false
  archive: false

  # Default (true) will initialize quicklink after the load event fires.
  delay: true
  # Custom a time in milliseconds by which the browser must execute prefetching.
  timeout: 3000
  # Default (true) will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).
  priority: true

Pjax

Pjax 是一个独立的 JavaScript 模块，它使用 AJAX (XmlHttpRequest) 和 PushState() 来提供快速的浏览体验。

它允许您彻底改变标准网站（服务器端生成的或静态的）的用户体验，让用户感觉他们正在浏览应用程序，特别是对于那些带宽连接较低的用户。

请在帖子中使用图像的绝对路径或 Hexo asset_img 标签，否则 Pjax 刷新期间图像可能无法加载。

You can enable it by setting value pjax to true in NexT config file.

1
2
3
# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true

Fancybox

NexT 支持 fancybox 插件，这是一个用于显示图像、视频等的 jQuery lightbox 脚本。 支持触摸、响应灵敏且完全可定制。

您可以通过在 NexT 配置文件中将 fancybox 值设置为 true 来启用它。

1
fancybox: true

Medium Zoom

Medium Zoom 是一个 JavaScript 库，用于像 Medium 一样缩放图像。

您可以通过在 NexT 配置文件中将mediumzoom 设置为 true 来启用它。

1
2
# A JavaScript library for zooming images like Medium.
mediumzoom: true

Do not enable both fancybox and mediumzoom.

Lazyload

Lozad.js 是现代原生 JavaScript 中的惰性加载器插件。 它会延迟长网页中图像的加载。 在用户滚动到视口之外的图像之前，不会加载它们。 这与图像预加载相反。

您可以通过在 NexT 配置文件中将延迟加载值设置为 true 来启用它。

1
2
# Vanilla JavaScript plugin for lazyloading images.
lazyload: true

然后在站点根目录中运行以下命令以确保可以正确启用或禁用延迟加载：

1
hexo clean

Pangu Autospace

pangu.js会自动在页面上的所有汉字和六边形英文数字符号之间插入一个空格。

您可以通过在 NexT 配置文件中将 pangu 值设置为 true 来启用它。

1
2
# Pangu Support
pangu: true

Quicklink 是一个 JavaScript 插件，可通过在空闲时间预取视口内链接来加快后续页面加载速度。 支持 Chrome、Firefox、Edge，无需使用 polyfill。

您可以通过在 NexT 配置文件中将 Quicklink.enable 设置为 true 来启用它。

1
2
3
4
5
6
7
8
9
...
quicklink:
  enable: true
  home: true
  archive: true
  delay: true
  timeout: 3000
  priority: true
...

Animation Effect-动画效果

NexT 默认启用动画效果，Anime.js 和 Animate.css 支持动画效果，因此它将等待 JavaScript 加载来显示内容。
如果您需要速度，可以将motion.enable 的值设置为 false 以禁用它。

编辑 NexT 配置文件并设置运动下所需的值以满足您的需求。 您可以在此处预览所有过渡变体：[NexT 动画效果预览](Animate.css (theme-next.js.org))。

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
# ---------------------------------------------------------------
# Animation Settings
# ---------------------------------------------------------------

# 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/
    menu_item: fadeInDown
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp

# Progress bar in the top during page loading.
# Pace 将自动监控您的 Ajax 请求、事件循环延迟、文档就绪状态和页面上的元素，以决定进度。
# For more information: https://github.com/CodeByZach/pace
pace:
  enable: false
  # All available colors:
  # 可以通过在 NexT 配置文件中设置值pace.color 来更改进度条的颜色。
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue
  # All available themes:
  # Pace 包含一系列主题来帮助您入门。 默认情况下，NexT 使用最小主题 (pace-theme-minimal)。 您可以通过编辑 NexT 配置文件中的pace.theme 部分中的值来配置它。
  # 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

# Generate a ribbon in your website with HTML5 canvas.
# canvas-ribbon.js 是在画布上绘制的网站的丝带背景。
# 可以通过在 NexT 配置文件中将 canvas_ribbon 值设置为 true 来启用它。 您还可以通过编辑 canvas_ribbon 部分中的值来配置功能区设置：
# For more information: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon丝带
  alpha: 0.6 # The transparency of the ribbon丝带
  zIndex: -1 # The display level of the ribbon丝带

Advanced Settings

Besides common Theme Settings and Third-party Plugins, NexT supports some advanced settings which makes NexT customizable.

请注意，如果以下这些设置错误，可能会导致异常行为。 仅当您知道它们是什么时才更改它们。

  • Vendors
  • Custom Files
  • Injects
  • Front-matter

Front Matter

Front-matter 是位于文件开头的 YAML 或 JSON 块，用于配置您的作品的设置。 当用 YAML 编写时，Front-matter 以三个破折号终止；当用 JSON 编写时，前面的内容以三个分号终止。

YAML

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

JSON

1
2
3
"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

接下来扩展并提供更多变量。 它允许用户配置单个页面。

Settings & Their Default Values

Setting Type Description Default
author string Author name for post copyright author in Hexo config file
post_link string The original link of the reposted article None
link string Clicking on the post title on the index or archive page will redirect to the set external link None
description string Docs here None
direction string Available value: rtl None
header boolean Whether to display the post header true
mathjax boolean MathJax support Depends on math.every_page in NexT config file
sidebar boolean Whether the sidebar will be shown Depends on sidebar.display in NexT config file
copyright boolean Whether to display copyright notices below the post with creative_commons.license and creative_commons.post enabled true
sticky number Pin the post to the top of the index page. hexo-generator-index plugin required 0
quicklink object (1) Quicklink support From NexT config file
reward_settings object (1) Reward settings From NexT config file
toc object (1) Table of Contents in the sidebar From NexT config file

示例

1
2
3
4
5
6
7
8
9
10
11
12
toc:
  enable: true
  number: false
  max_depth: 3
reward_settings:
  enable: true
  comment: Buy me a coffee
quicklink:
  enable: true
  delay: true
  timeout: 3000
  priority: true

测试发现，上面的语法好像不对，最终以下方式有效：

1
toc: true