Hexo-NexT 主题安装并配置教程

发表于 2020-05-17 更新于 2023-12-20 分类于 Hexo 本文字数： 6.4k 阅读时长 ≈ 11 分钟

前言： 该教程不定时更新，该教程主要提供 Hexo 和 NexT 官方教程上没有内容，至于其他的请阅读官方教程！

Hexo：快速，简单且功能强大的博客框架

由 Node.js 提供支持的令人难以置信的生成速度。数以百计的文件仅需几秒钟即可构建。
支持 GitHub Flavored Markdown 的所有功能，包括大多数 Octopress 插件。
您只需要一个命令即可将您的站点部署到 GitHub Pages，Heroku 或其他平台。
具有功能强大的 API，可实现无限扩展。各种插件可用于支持大多数模板引擎（EJS，Pug，Nunjucks 等）。轻松与现有 NPM 软件包（Babel，PostCSS，Less / Sass 等）集成。

NexT：Hexo 的典雅而强大的主题。（该 GitHub 仓库上的 NexT 版本为稳定版）

NexT 支持大量的第三方插件，它们可以被轻松地配置。
NexT 每个月都会发布新版本。
最新的 GitHub 地址 (该 GitHub 仓库上的 NexT 版本为开发板)。
NexT 官方配置教程及更新说明网址。

基本安装

安装 Hexo
- 安装 Node.js(Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
- 安装 Git
- 安装 Hexo（这里将 Hexo 作为博客目录）
  1
  npm install -g hexo-cli
  1
  hexo init Hexo
  1
  cd Hexo
  1
  npm install
- Hexo 安装完成
安装 NexT
- 安装 NexT
  1
  cd Hexo/
  1
  npm install hexo-theme-next
  NexT 安装完成
- 使用 NexT 主题
  1
  theme: next
  修改 Hexo\_config.yml 配置

Hexo 插件

hexo-enhancer
- 简介
  - hexo-enhancer 是一个 Hexo 功能增强插件。
  - 此插件支持的功能较多，到目前为止，此插件支持的功能如下：
    - 自动生成 title：根据文件名自动生成标题。
    - 自动生成 date：根据文件名自动生成日期，具体策略类似 Jekyll。
    - 自动生成 abbrlink：根据标题进行 base32 和 crc32 生成短链接。
    - 自动生成 categories：根据文件的路径解析文章所属分类。
    - 自动生成 tags：根据配置在 _config.yml 中的可用 tags 和 keywords 自动扫描文章中出现的标签。
- 安装
  1
  npm install hexo-enhancer@1.0.7 --save
  这里建议安装 1.0.7 版本，因为＞1.0.7 版本的其他版本会有分类界面不准确 #10 或更新时间不准确 #19 等问题！
- 基础配置
  - 将 Hexo\scaffolds\post.md 做如下修改
    1
    2
    title: {{ title }}
    date: {{ date }}
    即删除了原来的 tags:
  - Hexo\_config.yml 配置标签设置：
    1
    tags: Java, Golang, React, Vue, ...
    自动给每篇文章添加标签，将你要的标签填写到 tags 后边即可
  - Hexo\_config.yml 配置 abbrlink 设置
    1
    permalink: :year/:abbrlink/
    自动为每篇文章分配短小且唯一的 url
  - 其他配置见中文文档
RSS
- 给自己的网站添加 RSS 订阅服务！
- 使用教程
live2d
- 一个往 Hexo 博客里放上一只萌萌哒二次元看板娘的插件
- 使用教程

hexo-submit-urls-to-search-engine

简介
- 中文文档
- hexo 使用 hexo-submit-urls-to-search-engine 插件后，可主动推送 Hexo 博客新链接至谷歌、必应、百度搜索引擎站长平台以提升网站收录质量和速度。本插件允许你向各大搜索引擎发送纯天然、植物饲养的索引编制请求，一劳永逸。
- 比如，现在我的一篇文章刚发布 5 分钟，即可在必应搜索到。看吧，这就是 hexo-submit-urls-to-search-engine 的威力。百度与谷歌略慢一筹。
- 这三大搜索引擎已占据 97% 的全球搜索引擎市场份额（包括使用 bing 索引的雅虎、ecosia 等）。后期可能会加入向 Yandex（官方仅开通重点页面提交）、360（目前官方没开通，但我已提交建议）提交链接的功能。

安装

1	npm install --save hexo-submit-urls-to-search-engine

Hexo 配置`_config.yml`

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: cjh_google_url_submitter
  - type: cjh_bing_url_submitter
  - type: cjh_baidu_url_submitter

在 deploy 下添加以上内容

hexo_submit_urls_to_search_engine:
  submit_condition: count #链接被提交的条件，可选值：count | period 现仅支持count
  count: 10 # 提交最新的10个链接
  period: 900 # 提交修改时间在 900 秒内的链接
  google: 0 # 是否向Google提交，可选值：1 | 0（0：否；1：是）
  bing: 1 # 是否向bing提交，可选值：1 | 0（0：否；1：是）
  baidu: 1 # 是否向baidu提交，可选值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt ## 文本文档名， 需要推送的链接会保存在此文本文档里
  baidu_host: https://cjh0613.github.io ## 在百度站长平台中注册的域名
  baidu_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  bing_host: https://cjh0613.github.io ## 在bing站长平台中注册的域名
  bing_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  google_host: https://cjh0613.github.io ## 在google站长平台中注册的域名
  google_key_file: Project.json #存放google key的json文件，放于网站根目录（与hexo _config.yml文件位置相同），请不要把json文件内容直接发布在公众仓库里!
  replace: 0  # 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）

在 Hexo 末尾添加以上内容

成功推送返回信息

必应
1
Bing response: { d: null }

百度

1	Baidu response: {"remain":2999,"success":1}

谷歌

Google response:  { urlNotificationMetadata:
   { url:
      'https://cjh0613.github.io',
     latestUpdate:
      { url:
         'https://cjh0613.github.io',
        type: 'URL_UPDATED',
        notifyTime: '2020-06-12T05:37:25.701779228Z' } } }

其他返回信息可参考它们的官方文档。

NexT 插件

hexo-symbols-count-time

简介
- 给 Hexo 博客添加文字计数和阅读时长！
- 比 hexo-reading-time 更好，比 hexo-wordcount 更快。没有外部依赖。
安装
1
npm install hexo-symbols-count-time

Hexo 配置 `_config.yml`

# 发布字数统计
# https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  # 允许排除代码块内的所有内容，以实现更准确的字数统计。
  exclude_codeblock: false
  awl: 2
  wpm: 300
  suffix: "mins."

hexo-generator-searchdb

简介
- Hexo 的搜索数据生成器插件。
- 该插件用于生成搜索索引文件，其中包含文章的所有必要数据，您可以使用这些数据为博客编写本地搜索引擎。支持 XML 和 JSON 格式输出。
安装
1
npm install hexo-generator-searchdb

Hexo 配置 `_config.yml`

# 本地搜索
# hhttps://github.com/next-theme/hexo-generator-searchdb
search:
  path: search.xml
  field: post
  content: true
  format: html

NexT 配置 `_config.yml`

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

hexo-filter-emoji

简介
- 一个 Hexo 插件，使用 Github Emojis API 添加表情符号支持。
- 查看表情符号备忘单，了解它支持的所有表情符号。
安装
1
npm install hexo-filter-emoji

Hexo 配置 `_config.yml`

# 一个使用Github Emojis API添加了表情符号支持的Hexo插件
# https://github.com/theme-next/hexo-filter-emoji
# https://api.github.com/emojis
# https://www.webfx.com/tools/emoji-cheat-sheet/
emoji:
  enable: true
  className: github-emoji
  styles: 
  customEmojis:

hexo-next-twikoo

简介
- NexT 的 Twikoo 评论系统。
- Twikoo 是一个简单、安全、免费的评论系统。

安装

# For NexT version >= 8.0.0 && < 8.4.0
npm install hexo-next-twikoo@1.0.0
# For NexT version >= 8.4.0
npm install hexo-next-twikoo@1.0.3

配置

在 Hexo 或主题的 _config.yml 文件中配置它们：

# Twikoo
# For more information: https://twikoo.js.org, https://github.com/imaegoo/twikoo
twikoo:
  enable: true
  visitor: true
  envId: twikoo-1gs9l0fb17e7897a # 环境 ID，搭建教程：https://twikoo.js.org/quick-start.html
  # region: ap-guangzhou # 环境地域，默认为 ap-shanghai
  # path: 'window.location.pathname' # 自定义文章路径
  # jsUrl: https://cdn.staticfile.org/twikoo/1.5.10/twikoo.all.min.js # 自定义 JS 文件地址

评论系统推荐
- hexo-next-valine
- hexo-next-waline

hexo-next-fireworks
- 简介
  一个鼠标点击动画特效！
- 安装
  1
  npm install next-theme/hexo-next-fireworks
- 用法
  您可以在 Hexo 的 _config.yml （位于您博客的根目录中）中设置此插件的选项：
  1
  2
  fireworks:
  enable: true
activate-power-mode
- 一个为博客添加酷炫打字特效的插件
- 使用教程

更新 Hexo

进入博客目录
1
cd folder
folder 为你的 Hexo 博客文件路径，例如：/e/Hexo
更新 hexo-cli
1
npm install hexo-cli@latest -g
更新 hexo
1
npm install hexo@latest

更新 NexT

说明

如何配置 Hexo 和 NexT ？传统的方法是将一些选项存储在站点配置文件中，其他选项存储在主题配置文件中。这种方法是适用的，但是通过获取或下载新版本来更新 NexT 主题并不顺利。
目前 NexT 鼓励用户使用 Alternate Theme Config 进行配置。并且可以轻松地通过 Custom Files 自定义主题的布局和样式。
不推荐直接修改 NexT 主题的文件。因为这可能导致错误（例如 git merge 冲突），并且在升级主题时修改的文件可能丢失。
然而你也可以通过提交（Commit）、贮藏（Stash）或忽视（Discard）本地更改以绕过这种更新错误（例如 «Commit your changes or stash them before you can merge»）。具体方法请参考这里。

`_config.[name].yml`

请确保您使用的是 Hexo 5.0 (或更高版本)。
在站点的根目录下创建一个配置文件，例如：_config.next.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
通过这种方式，您的所有配置都位于主站点配置文件中。您不需要编辑主题配置文件或创建任何新文件。这样更新 NexT 主题时不会引发冲突或丢失文件。

更新

通过 npm 安装最新版本

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

通过 git 更新到最新的 master 分支
1
2
$ cd themes/next
$ git pull

常见问题

'hexo' 不是内部或外部命令，也不是可运行的程序或批处理文件。
将站点目录下的 node_modules\.bin 添加到 Path 环境变量下，然后重启即可

基本安装

安装 Hexo

安装 NexT

Hexo 插件

简介

安装

基础配置

简介

安装

Hexo 配置_config.yml

成功推送返回信息

简介

安装

Hexo 配置 _config.yml

简介

安装

Hexo 配置 _config.yml

NexT 配置 _config.yml

简介

安装

Hexo 配置 _config.yml

简介

配置

评论系统推荐

更新 Hexo

更新 NexT

说明

_config.[name].yml

更新

通过 npm 安装最新版本

通过 git 更新到最新的 master 分支

常见问题

友情链接

Hexo 配置`_config.yml`

Hexo 配置 `_config.yml`

Hexo 配置 `_config.yml`

NexT 配置 `_config.yml`

Hexo 配置 `_config.yml`

`_config.[name].yml`