我的博客的诞生（二）

本文记录和讲解一下我的博客是如何进行个性化设置和配置的，可供参考。

本文对于文件（代码）变动的描述方式为第一行说明本行为相关文件的哪一行（如果没有这行描述，则本行即为第一行），-指删掉改行，+指增加改行（如果你是直接复制此行，请注意删掉+和上下文对齐）。另外，本文对于文件（代码）变动的描述只针对当时的文件（代码）版本，请根据实际情况决定对自己的相应文件（代码）进行变动。

个性化设置和配置前的提示

个性化设置和配置了一处自己的博客，可以通过本地部署的方式（hexo s）查看相应效果，甚至可以直接修改一处，刷新一下查看效果，等都设置和配置完毕了再部署到 Github Pages 等平台（hexo g -d）。

Hexo 的个性化设置和配置

NexT 主题的下载和设置

原版的 landscape 主题并不好看，在网上搜索了一下，发现 NexT 主题是最受欢迎的。

在<博客构建目录>下进入终端，输入如下命令，等待 NexT 下载到当前文件夹下 themes 下 next 下。原来 themes 下的 landscape 就可以删掉了。

1	git clone https://github.com/theme-next/hexo-theme-next themes/next

下载完成后，编辑 Hexo 的配置文件：

# 本行为<博客构建目录>\_config.yml的第92行（随着Hexo的不断更新，本行对应在你的_config.yml中不一定是第92行，请以实际情况为准）
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
-theme: landscape

# 本行为<博客构建目录>\_config.yml的第92行（随着Hexo的不断更新，本行对应在你的_config.yml中不一定是第92行，请以实际情况为准）
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
+theme: next

配置博客基本信息

编辑 Hexo 的配置文件，个性化配置自己的站点信息：

# 本行为<博客构建目录>\_config.yml的第4行（随着Hexo的不断更新，本行对应在你的_config.yml中不一定是第4行，请以实际情况为准）
# Site
-title: Hexo
-subtitle: ''
-description: ''
-keywords:
-author: John Doe
-language: en
timezone: ''

# 本行为<博客构建目录>\_config.yml的第4行（随着Hexo的不断更新，本行对应在你的_config.yml中不一定是第4行，请以实际情况为准）
# Site
+title: ql's blog
+subtitle: It's a beautiful day!
+description: 一尘不染不是不再有尘埃，而是尘埃让它飞扬，我自做我的阳光。
+keywords: 学习与生活
+author: ql
+language: zh-CN
timezone:

效果图：

配置博客站点基本信息.png

配置永久链接

默认的永久链接是年月日加文章标题，而我们文章的标题一般都是中文的，但是永久链接中的标题并不是中文的，而是转码过的，这样非常不利于链接的分享。

我的解决办法是配置永久链接为年月日加文章标题的英文翻译，编辑 Hexo 的配置文件：

# 本行为<博客构建目录>\_config.yml的第13行（随着Hexo的不断更新，本行对应在你的_config.yml中不一定是第13行，请以实际情况为准）
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
-url: http://yoursite.com
root: /
-permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 本行为<博客构建目录>\_config.yml的第13行（随着Hexo的不断更新，本行对应在你的_config.yml中不一定是第13行，请以实际情况为准）
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
+url: https://blog.xxx.xx
root: /
+permalink: :year/:month/:day/:trans/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

之后记得在每篇博文的开头部分加上 trans 和文章标题的英文翻译：

更换默认的 Markdown 渲染器[1]

默认的 Markdown 渲染器不支持脚注，于是我们执行以下命令换一个渲染器。

1 2	npm uninstall --save hexo-renderer-marked npm install --save hexo-renderer-markdown-it

编辑 Hexo 的配置文件：

# 本行为<博客构建目录>\_config.yml的第104行（随着Hexo的不断更新，本行对应在你的_config.yml中不一定是第104行，请以实际情况为准）
+# Markdown-it config
+## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
+markdown:
+  # 渲染设置
+  render:
+    # 置为true时，html内容保持不变；置为false时，html内容将被转义成普通字符串
+    html: true
+    # 是否生成与XHTML完全兼容的标签（不懂是什么意思）
+    xhtmlOut: false
+    # # 置为true时，每个换行符都被渲染成一个<br>（即Hexo的默认表现）；置为false时，每个换行符都被忽略，但两个换行符即空行可正常创建段落（GFM的默认表现）
+    breaks: false
+    # 是否自动识别链接并把它渲染成链接
+    linkify: true
+    # 是否自动识别印刷格式（例如(c)渲染为©）
+    typographer: true
+    quotes: '“”‘’'
+  # 设置所需插件
+  plugins:
+    - markdown-it-footnote

2021 年 12 月 26 日前后，在写作环境换为语雀后，我发现语雀似乎不支持脚注，只能利用锚点来实现类似脚注的功能了。

NexT 的个性化设置与配置

配置站点图标

编辑 NexT 的配置文件：

# 本行为<博客构建目录>\themes\next\_config.yml的第41行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第41行，请以实际情况为准
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: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

# 本行为<博客构建目录>\themes\next\_config.yml的第41行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第41行，请以实际情况为准
favicon:
+  small: <自己图床的地址或者本地地址>
+  medium: <自己图床的地址或者本地地址>
+  apple_touch_icon: <自己图床的地址或者本地地址>
+  safari_pinned_tab: <自己图床的地址或者本地地址>
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

效果图：

配置站点图标.png

在页脚设定建站年份

编辑 NexT 的配置文件：

# 本行为<博客构建目录>\themes\next\_config.yml的第49行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第49行，请以实际情况为准
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
-  #since: 2015

# 本行为<博客构建目录>\themes\next\_config.yml的第49行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第49行，请以实际情况为准
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
+  since: 2020

效果展示（从设定的起始年份到当前年份）：

建站年份.png

在页脚添加备案信息

编辑 NexT 的配置文件：

# 本行为<博客构建目录>\themes\next\_config.yml的第78行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第78行，请以实际情况为准
  # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
  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. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

# 本行为<博客构建目录>\themes\next\_config.yml的第78行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第78行，请以实际情况为准
  # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
  beian:
+    enable: true
+    icp: 京ICP备20031573号
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

效果展示：

备案信息.png

选择主题风格

编辑 NexT 的配置文件（喜欢什么风格的话把前面的 # 去掉即可，注意只能启用一种风格）：

# 本行为<博客构建目录>\themes\next\themes\next\_config.yml的第105行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第105行，请以实际情况为准
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

各种主题风格展示：

添加标签和分类页面

编辑 NexT 的配置文件，添加标签和分类菜单项：

# 本行为<博客构建目录>\themes\next\_config.yml的第116行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第116行，请以实际情况为准
# 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-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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

# 本行为<博客构建目录>\themes\next\_config.yml的第116行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第116行，请以实际情况为准
# 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-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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

在<博客构建目录>下进入终端，执行如下命令。

1	hexo new page tags

编辑生成的 index.md：

---
-title: tags
date: 2020-01-24 22:20:25
---

---
+title: 标签
date: 2020-01-24 22:20:25
+type: tags
---

在<博客构建目录>下进入终端，执行如下命令。

1	hexo new page categories

编辑生成的 index.md：

---
-title: categories
date: 2020-01-24 22:21:09
---

---
+title: 分类
date: 2020-01-24 22:21:09
+type: categories
---

编辑文章模板文件（为<博客构建目录>下 scaffolds 下 post.md）：

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

以后想写文章（执行hexo new post <自定义名>，编辑相应生成的<自定义名>.md）时，只需自定义 tags 和 categories 的值（注意键值之间有空格），该文章就会在标签页面和分类页面被标记和分类起来。

加入豆瓣页面

我的 Butterfly 主题的博客也加入了豆瓣页面，考虑到 NexT 主题博客还是要偏简洁一点，于是豆瓣页面我后来又去掉了，这里我目前未进行配置。

在<博客构建目录>下进入终端，输入如下命令安装插件 hexo-douban。

1	npm install --save hexo-douban

编辑 Hexo 的配置文件：

# 本行为<博客构建目录>\_config.yml的第104行（随着Hexo的不断更新，本行对应在你的_config.yml中不一定是第105行，请以实际情况为准
+douban:
+  user: <豆瓣ID>
+  builtin: true
+  book:
+    title: <书籍页面的标题>
+    quote: <开头的引言>
+  movie:
+    title: <电影页面的标题>
+    quote: <开头的引言>
+  game:
+    title: <游戏页面的标题>
+    quote: <开头的引言>
+  timeout: 10000

添加图书、电影和游戏菜单项。编辑 NexT 的配置文件：

# 本行为<博客构建目录>\themes\next\_config.yml的116行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第116行，请以实际情况为准
# 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-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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
+  books: /books || book
+  movies: /movies || video-camera
+  games: /games || gamepad

编辑 NexT 的中文语言文件（为<博客构建目录>下 themes 下 next 下 languages 下 zh-CN.yml）：

---
title:
  archive: 归档
  category: 分类
  tag: 标签
  schedule: 日程表
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404
+  books: 阅读
+  movies: 电影
+  games: 游戏

设置侧边栏总是显示（只适合风格 Muse 或 Mist）

编辑 NexT 的配置文件：

# 本行为<博客构建目录>\themes\next\_config.yml的第152行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第152行，请以实际情况为准
  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
-  display: post

# 本行为<博客构建目录>\themes\next\_config.yml的第152行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第152行，请以实际情况为准
  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
+  display: always

头像

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第166行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第166行，请以实际情况为准
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
-  url: #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
-  rounded: false
  # If true, the avatar will be rotated with the cursor.
-  rotated: false

# 本行为<存储 HexoBlog 的文件夹>\themes\next\_config.yml的第166行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第166行，请以实际情况为准
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
+  url: <自己图床的地址或者本地地址>
  # If true, the avatar will be dispalyed in circle.
+  rounded: true
  # If true, the avatar will be rotated with the cursor.
+  rotated: true

添加社交链接

编辑 NexT 的配置文件，个性化添加自己的社交链接：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第178行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第178行，请以实际情况为准
# Social Links
# 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 || github
-  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  #RSS: /atom.xml || rss

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第178行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第178行，请以实际情况为准
# Social Links
# 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:
+  blog: https://blog.imql.life/ || sticky-note
+  www: https://imql.life/ || quora
+  nav: https://nav.imql.life/ || location-arrow
+  space: https://space.imql.life/ || codepen
+  Github: https://github.com/ql-isaac || github
+  E-Mail: mailto:834471527@qq.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  #RSS: /atom.xml || rss

添加友情链接

编辑 NexT 的配置文件：

1
2
3

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第211行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第211行，请以实际情况为准
links:
-  #Title: http://yoursite.com

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第211行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第211行，请以实际情况为准
links:
+  <标题1>: <地址1>
+  <标题2>: <地址2>
+  <标题3>: <地址3>

Use icon instead of the symbol # to indicate the tag at the bottom of the post

编辑 NexT 的配置文件：

1
2
3

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第269行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第269行，请以实际情况为准
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
-tag_icon: false

1
2
3

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第269行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第269行，请以实际情况为准
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
+tag_icon: true

效果展示：

添加在线编辑按钮

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第298行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第298行，请以实际情况为准
# Post edit
# Dependencies: https://github.com/hexojs/hexo-deployer-git
post_edit:
-  enable: false
-  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

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第298行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第298行，请以实际情况为准
# Post edit
# Dependencies: https://github.com/hexojs/hexo-deployer-git
post_edit:
+  enable: true
+  url: https://github.dev/ql-isaac/# # Link for view & edit

设置文本对齐方式为左对齐

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第344行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第344行，请以实际情况为准
# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
-  desktop: justify
-  mobile: justify

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第344行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第344行，请以实际情况为准
# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
+  desktop: left
+  mobile: left

代码块设置

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第362行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第362行，请以实际情况为准
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: false
    # Show text copy result.
-    show_result: false
    # Available values: default | flat | mac
    style:

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第362行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第362行，请以实际情况为准
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: solarized
  # Add copy button on codeblock
  copy_button:
+    enable: true
    # Show text copy result.
+    show_result: true
    # Available values: default | flat | mac
    style:

以上设置为个人偏好，请查看上下文注释，通过本地部署的方式查看确定自己的偏好。

回到顶部按钮设置

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第375行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第375行，请以实际情况为准
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
-  scrollpercent: false

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第375行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第375行，请以实际情况为准
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
+  scrollpercent: true

在页面顶部显示浏览进度

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第382行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第382行，请以实际情况为准
# Reading progress bar
reading_progress:
-  enable: false
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第382行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第382行，请以实际情况为准
# Reading progress bar
reading_progress:
+  enable: true
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

在右上角添加渲染本站的源码仓库传送门

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第399行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第399行，请以实际情况为准
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
-  enable: false
-  permalink: https://github.com/yourname
  title: Follow me on GitHub

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第399行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第399行，请以实际情况为准
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
+  enable: true
+  permalink: https://github.com/ql-isaac
  title: Follow me on GitHub

字体

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第419行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第419行，请以实际情况为准
font:
-  enable: false

  # Uri of fonts host, e.g. //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:

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第419行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第419行，请以实际情况为准
font:
+  enable: true

  # Uri of fonts host, e.g. //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:
    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: Noto Serif SC

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:

优雅地查看图片

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第533行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第533行，请以实际情况为准
# 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

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第533行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第533行，请以实际情况为准
# 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 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第542行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第542行，请以实际情况为准
# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
-lazyload: false

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第542行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第542行，请以实际情况为准
# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
+lazyload: true

添加 Valine 评论系统

Valine 是基于 LeanCloud 的，首先需要注册 LeanCloud 账号，注意需要验证邮箱，注册成功后进入控制台，需要先实名认证，认证成功后，点击创建应用，新应用名称就填 Valine，这个随便，选择开发版，点击创建，点击存储图标，点击创建 Class，Class 名称填 Comment，添加，再点击创建 Class，Class 名称填 Counter，添加，创建 Class 成功后如下图。

创建Class.png

点击左边的设置，点击安全中心，服务开关里仅打开数据存储服务，Web 安全域名中填写自己的博客地址，保存，点击左侧应用 keys，获取到<自己的 App ID>和<自己的 App key>。

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第578行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第578行，请以实际情况为准
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
-  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 navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第578行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第578行，请以实际情况为准
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
+  active: valine
  # 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 navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第625行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第625行，请以实际情况为准
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
-  enable: false
-  appid: # Your leancloud application appid
-  appkey: # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
-  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
-  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第625行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第625行，请以实际情况为准
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
+  enable: true
+  appid: <自己的App ID>
+  appkey: <自己的App key>
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
+  language: zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
+  recordIP: true # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

开启 busuanzi 统计

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第725行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第725行，请以实际情况为准
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
-  enable: false
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第725行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第725行，请以实际情况为准
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
+  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

添加搜索功能

在<博客构建目录>下进入终端，输入如下命令安装 hexo-generator-searchdb。

1	npm install --save hexo-generator-searchdb

开启搜索功能：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第753行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第753行，请以实际情况为准
# Local Search
# Dependencies: https://github.com/theme-next/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

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第753行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第753行，请以实际情况为准
# 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

设置 Note tag

编辑 NexT 的配置文件：

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第798行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第798行，请以实际情况为准
# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-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

# 本行为<存储HexoBlog的文件夹>\themes\next\_config.yml的第798行（随着NexT的不断更新，本行对应在你的_config.yml中不一定是第798行，请以实际情况为准
# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-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: flat
+  icons: true
  # 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

参考

为 Hexo 博客添加脚注插件 ↩