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

NexT主题安装

安装

1. 进入blog目录，使用npm install hexo-theme-next@latest来安装最新的NexT主题，主题会安装到node_modules中，使用cp -r node_modules/hexo-theme-next/* themes/next/复制主题。
2. 将_config.yml中theme配置项修改为next
3. 使用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主题、插件个性化配置

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

字数统计

1. 安装hexo-word-counter插件

   $ npm install hexo-word-counter
   $ hexo clean
   

2. hexo站点配置文件_config.yml

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

3. 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评论系统+阅读数

1. 去valine官网注册账号 -> 创建应用

2. 进入创建的应用，打开设置 -> 应用Keys，获取AppID和AppKey

   

3. 在设置中打开安全中心，设置Web安全域名用于开发和调试时都能测试valine评论，记得保存。

   

4. 在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']
   

5. 文章标题评论显示Valine的问题

   • 问题：

     

   • 解决方案：在themes -> next -> language -> zh-CN.yml文件中添加以下部分即可。

     

6. 添加文章阅读数：

   • 在上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