hexo博客使用NexT主题+个性化配置

最新推荐文章于 2026-05-09 08:02:42 发布

原创最新推荐文章于 2026-05-09 08:02:42 发布 · 1.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

hexo

本文详细介绍了如何安装和配置Hexo NexT主题，包括主题安装、个性化配置如字数统计、代码高亮、Valine评论系统及阅读数、本地搜索服务等。通过本文，你可以快速掌握NexT主题的高级用法。

文章目录

NexT主题安装

安装

进入blog目录，使用npm install hexo-theme-next@latest来安装最新的NexT主题，主题会安装到node_modules中，使用cp -r node_modules/hexo-theme-next/* themes/next/复制主题。
将_config.yml中theme配置项修改为next
使用hexo clean && hexo s进行测试，查看主题是否应用成功。

部署

我的部署方案是上传到我的云服务器。具体可见之前的博客

配置文件

hexo 5.0+，官方推荐在_config.yml同级目录下创建主题配置文件_config.[name].yml，这种方式不用去修改next主题下的_config.yml文件，需要什么配什么。
我们使用cp node_modules/hexo-theme-next/_config.yml _config.next.yml复制默认的next配置文件

我们强烈建议你将所有的主题配置集中在一处。如果你不得不在多处配置你的主题，那么这些信息对你将会非常有用：Hexo 在合并主题配置时，Hexo 配置文件_config.yml中的 theme_config 配置项的优先级最高，其次是 _config.[theme].yml 文件，最后是位于主题目录下的 _config.yml 文件。

NexT主题、插件个性化配置

对于一些简单的配置，可参照官网进行快速配置，以下记录容易出问题的配置项

字数统计

安装hexo-word-counter插件

$ npm install hexo-word-counter
$ hexo clean

hexo站点配置文件_config.yml

symbols_count_time:
  total_symbols: true
  total_time: true
  # 单篇文章的统计
  symbols: false
  time: false
  awl: 4
  wpm: 275

NexT主题配置文件_config.next.yml

# 字数统计
symbols_count_time:
  separated_meta: false
  item_text_total: true

代码高亮

Hexo 5.0+以后，开始支持Prism，本文使用最早支持的Highlight

hexo站点配置文件_config.yml

# 代码高亮设置，俩者只能使用其中一个
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: false
  tab_replace: ''

Next主题配置文件_config.next.yml。注意prism部分主题需要下载，访问NexT Highlight Theme Preview了解

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: tomorrow-night-bright
    dark: tomorrow-night-bright
  # prism:
  #   light: prism-dracula
  #   dark: prism-dracula
  copy_button:
    enable: true
    style: flat

Valine评论系统+阅读数

去valine官网注册账号 -> 创建应用
进入创建的应用，打开设置 -> 应用Keys，获取AppID和AppKey
在设置中打开安全中心，设置Web安全域名用于开发和调试时都能测试valine评论，记得保存。

在NexT主题配置文件_config.next.yml中添加，具体的配置参数可见官网

valine:
  enable: true
  appId: zGz......oHsz # AppID
  appKey: 0bm....DNBX # AppKey
  placeholder: 说点什么吧！ # comment box placeholder
  avatar: mm # gravatar style
  meta: [nick, mail, link] # Custom comment header
  pageSize: 20 # pagination size
  language: zh-cn
  visitor: true # 用于显示文章阅读量，具体见https://valine.js.org/visitor.html
  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)
  requiredFields: ['nick','mail'] # Set required fields: ['nick'] | ['nick','mail']

文章标题评论显示Valine的问题
- 问题：
- 解决方案：在themes -> next -> language -> zh-CN.yml文件中添加以下部分即可。
添加文章阅读数：
- 在上4配置中，配置visitor:true即可。此时文章标题处显示阅读数量，可通过上5方法修改views改成自己喜欢的文字。

博客搜索服务

Local search does not require any external 3rd-party services and can be extra indexed by search engines. This search method is recommended for most users.

安装插件
```
$ npm install hexo-generator-searchdb
```

hexo站点配置文件_config.yml

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

NexT主题配置文件_config.next.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: false