Next配置

发表于 更新于 分类于
Hexo-Next主题配置

Next部署

安装更新

  • 在站点根目录下安装NEXT_8.x仓库
    • 首次安装：git clone https://github.com/next-theme/hexo-theme-next themes/next
    • 后续更新：git -C themes/next pull
  • 安装完成后，更改站点配置文件theme: next

备用配置

  • 传统配置NEXT主题的方式是直接编辑主题配置文件（themes/next/_config.yml），然而在升级主题时配置文件会被覆盖，因此使用备用主题配置的方法
  • 在站点根目录中创建备用主题配置文件cp themes/next/_config.yml _config.next.yml
    • 或者只将修改的部分放到_config.next.yml中，默认的部分不放入

主题设置

  • Next 8.x支持原生黑夜主题，主要在主题配置文件_config.next.yml中配置darkmode: true
    • 此后根据系统偏好自动决定是否启用黑夜主题
  • 上述方法缺少主动切换网页端主动切换的按键，可以通过插件解决
    • 关闭原生黑夜主题darkmode: false
    • 安装插件npm install hexo-next-darkmode --save
    • 在主题配置文件中添加如下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 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: '32px' # default: '32px'
  left: 'unset' # 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

信息设置

图标

1
2
3
4
5
6
7
8
favicon:
  small: /images/favicon-16x16-A.png
  medium: /images/favicon-32x32-A.png
  large: /images/favicon-48x48-A.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/favicon-A.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

版权说明

  • 使用by-nc-sa协议，显示版权说明
1
2
3
4
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: false

菜单设置

  • 打开themes/next目录下的主题配置文_config.yml，查找menu
1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  # tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  # schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  • 根目录下使用命令在source中建立文件夹
    • hexo new page "categories"
    • hexo new page "tags"
  • 修改所生成文件夹中的index.md文件自定义标题
1
2
3
4
5
6
---
title: 分类
date: 2025-07-09 11:44:14
type: "categories"
comments: false
---

侧边栏设置

头像

  • 自定义头像、设置头像圆形显示并随鼠标旋转
1
2
3
4
5
# Sidebar Avatar
avatar:
  url: /images/A.png
  rounded: true
  rotated: true

目录

  • 开启标题自动编号、禁止目录自动换行、启用默认展开所有目录
1
2
3
4
5
6
toc:
  enable: true
  number: true      #目录项前显示数字序号
  wrap: false       #文章过长时是否自动换行
  expand_all: true  #是否默认展开所有层级目录
  max_depth: 6      #生成目录的最大标题深度

页脚设置

  • 启用图标动态化、关闭Powered by显示
1
2
3
4
5
6
footer:
  icon:
    name: fa fa-heart
    animated: true
    color: "#ff0000"
  powered: false

正文设置

标签图标

  • 设置文末的标签使用图标代替#符号
1
tag_icon: true

其他设置

正文对齐

  • 左右对齐更改为根据左对齐，以适配窄屏设备
1
2
3
4
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: start
  mobile: start

代码块渲染

  • 设置代码框为MAC样式，开启复制按键，并设置代码块自动折叠
1
2
3
4
5
6
7
codeblock:
  copy_button:
    enable: true
    style: mac
  fold:
    enable: true
    height: 300

浏览进度

  • 在返回顶部按键中显示当前阅读进度
1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

外部库

预加载

  • 启用pjax进行预加载
1
2
3
# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true

图片放大

  • 图片视频放大浏览
1
2
3
# 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

中英文显示

  • 自动在页面上所有的汉字和英文数字符号之间插入一个空格
1
2
3
4
# Automatically insert whitespace between CJK and half-width characters.
# For more information: https://github.com/vinta/pangu.js
# Server-side plugin: https://github.com/next-theme/hexo-pangu
pangu: true

快速链接

  • 在空闲时间预加载页面链接，来加快后续页面的加载速度
1
2
3
4
5
6
7
quicklink:
  enable: true
  home: true
  archive: true
  delay: true
  timeout: 3000
  priority: true

搜索服务

  • 开启本地搜索服务
1
2
3
4
5
local_search:
  enable: true
  top_n_per_article: 1     #每篇文章显示的结果数
  unescape: false          #是否转义HTML特殊字符
  preload: false           #是否预加载搜索结果

自定义文件

  • 将自定义文件与主题文件分开，避免因git merge（git pull包含拉取更新和合并分支两个操作）而产生的冲突
  • 将自定义文件添加到hexo-site/source/_data，随后取消备用主题配置文件中对应的注释即可
1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

标题编号

  • 对于Hexo-NEXT渲染的html文件，默认为TOC自动添加编号，但是缺少对正文标题编号的自动添加
  • 首先在hexo-site/source./_data中新建styles.styl文件，取消_config.next.yml中的注释
  • 往hexo-site/source./_data/styles.styl中添加如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.post-block {
  .post-body {counter-reset: h1}
          h1 {counter-reset: h2}
          h2 {counter-reset: h3}
          h3 {counter-reset: h4}
          h4 {counter-reset: h5}
          h5 {counter-reset: h6}
}
.post-body {
  h1:before {counter-increment: h1; content: counter(h1) ". "}
  h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
  h3:before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}
  h4:before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}
  h5:before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
  h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
}

页脚自定义

  • 在hexo-site/source./_data中新建footer.njk文件，取消_config.next.yml中的注释
  • 往hexo-site/source./_data/footer.njk中添加如下代码
1
2
3
<div class="custom-footer">
  <p>自定义文字</p>
</div>

修改源码

  • 对于8.23.2版本的Next，无法在只修改自定义文件的前提下实现以下功能，注意做好版本更新时的迁移
  • 虽然实测可行，但出于更新风险的考虑，以下所有功能已弃用，源码恢复原样

球形标签云

  • 右键另存tagcanvas.js入next-site/source/js路径下
  • 在next-site/source/js路径下创建文件tagcloud.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.onload = function () {
    try {
        TagCanvas.Start('my3DTags', 'tags',
            {
                textFont: 'Georgia,Optima',
                textColour: null,
                outlineColour: 'black',
                weight: true,
                reverse: true,
                depth: 0.8,
                maxSpeed: 0.05,
                bgRadius: 1,
                freezeDecel: true
            });
    }
    catch (e) {
        document
            .getElementById('myTags')
            .style
            .display = 'none';
    }
};
  • 如下修改next-site/layout/_partials/pages/tags.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="tag-cloud">
  <div class="tag-cloud-title">
    {{ _p('counter.tag_cloud', site.tags.length) }}
  </div>
  <div class="tag-cloud-tags">
    {{ tagcloud({
      min_font: theme.tagcloud.min,
      max_font: theme.tagcloud.max,
      amount  : theme.tagcloud.amount,
      orderby : theme.tagcloud.orderby,
      order   : theme.tagcloud.order,
      class   : 'tag-cloud'
      })
    }}
  </div>
  {# 球形云标签 #}
  <div class="tags" id="myTags">
    <canvas width="720" height="720" id="my3DTags" style="display: block;margin: 0 auto;">
    </canvas>
  </div>
  <div class="tags" id="tags">
    <ul style="display: none">
      {{ tagcloud({
          min_font   : 16,
          max_font   : 35,
          amount     : 999,
          color      : false,
          start_color: 'black',
          end_color  : 'green'
        })
      }}
    </ul>
  </div>
  <script type="text/javascript" src="/js/tagcanvas.js"></script>
  <script type="text/javascript" src="/js/tagcloud.js"></script>
  {# 球形云标签 #}
</div>
  • 在站点配置文件中添加如下开关
1
2
crashcheat: true
tagcanvas: true