Hexo中有很多主题，可以在官网 Hexo主题中查找选择自己喜欢的主题，我最终选择的是 Next，主要是因为简洁且网上的教程也比较多，这里记录下我博客的 Next 主题配置，效果详见博客

更换主题

Hexo 中默认的主题是 landscape，现在更换为 Next

Next 官方文档：

Next 0.1.0-5.4.1版本
 NexT 6.0.0-8.8.0版本

Next主题 github tags note：

0.1.0-5.4.1版本
 6.0.0-7.8.0版本
 8.0.0-8.8.0版本

配置 Hexo 主题

根据上面的版本，下载一个即可，我目前使用的是7.8.0版本
将下载好的主题添加到你的博客根目录下 themes 文件夹中，其中可以看到有默认的主题 landscape

修改博客根目录下_config.yml文件中的theme

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: next-7.8.0

配置 Next 主题

修改个人信息

修改博客根目录下_config.yml文件中的 site 相关信息

# Site
title: Monkeylzl's World
subtitle: ''
description: 经历一个过程然后成为更好的自己
keywords:
author: monkeylzl
#language: en
language: zh-CN
timezone: Asia/Shanghai

修改 next 的主题风格

next 一共提供了四种主题风格，可以分别切换，通过hexo s预览一下效果

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

修改菜单栏

修改配置

修改 next 主题文件夹下的_config.yml文件

# 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

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true # 是否显示各个页面的图标
  badges: true # 是否显示分类/标签/归档页的内容量

解决Next主题 Cannot GET /tags/ 问题

增加了新的 menu，但是点击之后显示Cannot GET /tags/
1
hexo new page "tags"
执行命令后，在根目录下的source下会出现tags文件下，修改 tag 文件夹下的index.md，增加type: “tags”
如果你的博客已经增加了评论系统，由于评论系统默认是打开的，所以这里要屏蔽下，所以增加 comments: false

示例

---
title: tags
type: "tags"
date: 2021-10-04 17:31:26
comments: false
---

待研究

增加本地搜索功能

安装插件

1	npm install hexo-generator-searchdb --save

修改博客根目录下_config.yml文件，增加 search

# Search
search:
path: search.xml # 支持json和xml，可自行设定，索引文件的路径，相对于站点根目录
field: post # 搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
format: html
limit: 10000 # 限制搜索的条目数

修改 next 主题文件夹下的_config.yml文件

# 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

增加阅读全文功能

修改 next 主题文件夹下的_config.yml文件

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

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

配置完后，由于next 7.6 版本以后删除自动摘要功能，需要我们手动设置，方法主要有
- 为每个博客写好 description
  1
  2
  3
  4
  5
  6
  7
  ---
  title: Hexo 中 Next 主题（持续更新...）
  date: 2021-10-04 20:52:01
  tags: 博客搭建
  categories: 技术
  description: xxxx
  ---
- 在博客中间手动添加以截断，推荐该方法

增加评论系统

选择评论系统

next 支持的评论系统，详见next 主题文件夹下的_config.yml文件，我选择的是 valine

# 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

配置 valine

Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

注册 LeanCloud 账号，直接点击主页右侧控制台注册账号
进入控制台后点击左下角创建应用，选择免费的「开发版」，也可以了解下「计价方案」
创建完应用，点击应用卡片中的设置图标，在左侧菜单栏中点击「应用凭证」，可以看到自己的 AppID，Appkey
选择安全中心，可以选择自己的「服务开关」，然后在 Web 安全域名中添加自己博客的域名「https://monkeylzl.github.io/」

修改 next 主题文件夹下的_config.yml文件

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: xx # Your leancloud application appid
  appkey: xx # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: 有什么问题，欢迎留言指正与交流... # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-CN # 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

查看评论数据，通过点击自己创建的卡片应用的第一个图标「数据存储」中的 Comment 查看

目录设置

修改 next 主题文件夹下的_config.yml文件

# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6

next 7.8.0 版本 toc 中包含中文导致无法点击跳转问题
该问题官方已经FIX，详见官方修改

修改 source/js/utils.js 文件，如下：

registerSidebarTOC: function() {
    const navItems = document.querySelectorAll('.post-toc li');
    const sections = [...navItems].map(element => {
      var link = element.querySelector('a.nav-link');
      var target = document.getElementById(decodeURI(link.getAttribute('href')).replace('#', ''));
      // TOC item animation navigate.
      link.addEventListener('click', event => {
        event.preventDefault();
        //var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', ''));
        var offset = target.getBoundingClientRect().top + window.scrollY;
        window.anime({
          targets  : document.scrollingElement,
          duration : 500,
          easing   : 'linear',
          scrollTop: offset + 10
        });
      });
      //return document.getElementById(link.getAttribute('href').replace('#', ''));
      return target;
    });

代码风格设置

修改 next 主题文件夹下的_config.yml文件

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
  highlight_theme: night bright
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

切换暗黑模式

Next 7.x 使用 hexo-next-darkmode 插件自动添加可切换的暗黑模式，教程
安装
1
npm install hexo-next-darkmode --save

配置
修改 next 主题文件夹下的_config.yml文件，必须确保 NexT 原生的 darkmode 选项设置为 false，isActivated: true：默认激活暗黑/夜间模式，请始终与 saveInCookies: false、autoMatchOsTheme: false 一起使用

# close NexT's darkmode
darkmode: false

# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

增加版权信息

修改 next 主题文件夹下的_config.yml文件

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# 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
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

增加文章结束语

修改修改 next 主题文件夹下的layout/_macro/post.swig 文件，在文章结束 END POST BODY 位置增加

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
            ------------- 本文结束 <i class="fa fa-heart-o"></i> 感谢您的阅读-------------
    	</div>
    {% endif %}
</div>

订阅微信公众号

修改 next 主题文件夹下的_config.yml文件

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || twitter
  #Telegram: https://t.me/channel_name || telegram
  WeChat: /images/wechat_channel.jpg || wechat
  #RSS: /atom.xml || rss

右上角增加GitHub

修改 next 主题文件夹下的_config.yml文件

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/monkeylzl
  title: Follow me on GitHub

返回顶部功能

修改 next 主题文件夹下的_config.yml文件，默认显示了阅读进度

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

设置头像

修改 next 主题文件夹下的_config.yml文件，默认显示了阅读进度

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: images/avatar.png #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

字数统计和阅读时长

安装插件

1	npm install hexo-symbols-count-time --save

修改 next 主题文件夹下的_config.yml文件

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true  #分隔线
  item_text_post: true  #文章中的显示是否显示文本
  item_text_total: true       #网页底部的显示是否显示文本
  awl: 2 #平均每个字符的长度
  wpm: 275 # 设定每分钟可阅读的字符数
  symbols: true #是否统计字数
  time: true #是否统计阅读时长
  total_symbols: true #是否统计总字数
  total_time: true #是否统计总阅读时长

添加音乐

登陆网页版网易云音乐，然后找到自己喜欢的歌，点击歌曲下面的「生成外链播放器」

修改 next 主题下 layout/_macro/sidebar.swig 文件，在<div class="sidebar-inner">中添加

1
2
3

<div id="music">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=28285910&auto=1&height=66"></iframe>
</div>

TODO APlayer 悬浮左下角音乐 Button 样式

社交链接

修改 next 主题文件夹下的_config.yml文件

# 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/monkeylzl || 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

添加阅读次数，访问量等

修改 next 主题文件夹下的_config.yml文件

# 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

RSS服务

在blog根目录，安装插件
1
npm install hexo-generator-feed --save
安装完之后执行hexo g,可以看到在 blog 根目录的pulic文件夹中出现一个 atom.xml 文件

修改 next 主题文件夹下的_config.yml文件，侧边栏显示 RSS

# Social Links
# Usage: `Key: permalink || icon`
# icon from https://fontawesome.dashgame.com/
# 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/monkeylzl || github
  RSS: https://monkeylzl.github.io/atom.xml || rss

修改 next 主题文件夹下的_config.yml文件，每篇文章底部显示

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || twitter
  #Telegram: https://t.me/channel_name || telegram
  WeChat: /images/wechat_channel.jpg || wechat
  RSS: /atom.xml || rss

页面底部添加站点运行时间

在 themes/next/layout/_partials/ 目录下创建 runtime.swig 源文件，并添加如下内容

<div id="site-runtime">
  <span class="post-meta-item-icon">
    <i class="fa fa-clock-o"></i>
  </span>
  <span id="runtime"></span>
</div>

<script language="javascript">
  function isPC() {
    var userAgentInfo = navigator.userAgent;
    var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    for (var i = 0; i < agents.length; i++) {
      if (userAgentInfo.indexOf(agents[i]) > 0) {
        return false;
      }
    }
    return true;
  }

  function siteTime(openOnPC, start) {
    window.setTimeout("siteTime(openOnPC, start)", 1000);
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;

    {%- if theme.runtime.start %}
      start = new Date("{{ theme.runtime.start }}");
    {%- endif %}
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var diff = now - start;

    var diffYears = Math.floor(diff / years);
    var diffDays = Math.floor((diff / days) - diffYears * 365);
    var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
    var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
    var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);

    if (openOnPC) {
      document.getElementById("runtime").innerHTML = "Running: " + diffYears + " years " + diffDays + " days " + diffHours + " hours " + diffMinutes + " mins " + diffSeconds + " secs";
    } else {
      document.getElementById("runtime").innerHTML = "Running: " + diffYears + "y " + diffDays + "d " + diffHours + "h " + diffMinutes + "m " + diffSeconds + "s";
    }˜
  }

  var showOnMobile = {{ theme.runtime.mobile }};
  var openOnPC = isPC();
  var start = new Date();
  siteTime(openOnPC, start);

  if (!openOnPC && !showOnMobile) {
    document.getElementById('site-runtime').style.display = 'none';
  }
</script>

编辑源文件 themes/next/layout/_partials/footer.swig，在文件末尾添加如下内容
1
2
3
4
{%- if theme.runtime.enable %}
{% include 'runtime.swig' %}
{%- endif %}

更改 Next 主题的配置文件 themes/next/_config.yml，添加以下内容

# Site Runtime
runtime:
  enable: true
  # The time of the site started running. If not defined, current time of local time zone will be used.
  # You can specify the time zone by adding the `+HOURS` or `-HOURS` format time zone.
  # If not specify the time zone, it will use `+0000` as default.
  # ex: "2015-06-08 07:24:13 +0800", `+0800` specify that it is the time in the East Eight Time Zone.
  start: 2019-11-23 09:00:00 +0800
  # Whether to show on the mobile side
  mobile: false

参考文献

Hexo主题 : https://hexo.io/themes/
monkeylzl 效果博客 : https://monkeylzl.github.io/
Next 0.1.0-5.4.1版本 : https://theme-next.iissnan.com/getting-started.html
NexT 6.0.0-8.8.0版本 : https://theme-next.js.org/
0.1.0-5.4.1版本 : https://github.com/iissnan/hexo-theme-next/tags
6.0.0-7.8.0版本 : https://github.com/theme-next/hexo-theme-next/tags
8.0.0-8.8.0版本 : https://github.com/next-theme/hexo-theme-next/tags
valine : https://valine.js.org/
LeanCloud : https://www.leancloud.cn/
hexo-next-darkmode : https://github.com/rqh656418510/hexo-next-darkmode
Hexo Next 主题详细配置之一 : https://www.techgrow.cn/posts/755ff30d.html

更换主题

Next 官方文档：

Next主题 github tags note：

配置 Hexo 主题

配置 Next 主题

修改个人信息

修改 next 的主题风格

修改菜单栏

修改配置

解决Next主题 Cannot GET /tags/ 问题

如何自定义Menu

增加本地搜索功能

增加阅读全文功能

增加评论系统

选择评论系统

配置 valine

目录设置

代码风格设置

切换暗黑模式

增加版权信息

增加文章结束语

订阅微信公众号

右上角增加GitHub

返回顶部功能

设置头像

字数统计和阅读时长

添加音乐

社交链接

添加阅读次数，访问量等

RSS服务

页面底部添加站点运行时间

参考文献