博客系列:Hexo搭配Next主题
Next是Hexo静态博客生成器下的一款博客展示主题样式,该主题相较而言比较好看
杂文随笔
2026-06-17
10

Next是Hexo静态博客生成器下的一款博客展示主题样式,该主题相较而言比较好看,功能也比较全,博客网站拥有的功能都有所具备,同时也支持其他功能的扩展,文章使用版本为8.27.0

官网及下载

Next官网,下载方式到最新的Next仓库拉取或直接下载,然后放到themes下,在配置文件中启用

// 这里是文件夹名字
theme: next

Next主题的所有配置在Next目录下的_config.yml中,更改文件即会生效,不需要重启。如需清除Next冗余文件,下面为Next的必须文件

next
  |--languages
  |--layout
  |--scripts
  |--source
  |--_config.yml
  |--_vendors.yml
  |--package.json

之后的配置都在_config.yml中进行

主题选择

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

网站图标

favicon:
  small: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  medium: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  apple_touch_icon: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  safari_pinned_tab: https://s1.ax1x.com/2020/11/10/BqTOfA.png

菜单配置

menu:
  home: / || fa fa-home
  导航: /nav || fa fa-paper-plane
  categories: /categories || fa fa-th
  archives: /archives || fa fa-archive
  作者: /author || fa fa-user

通过命令hexo n page nav创建与路径同名的文件,然后进行配置:

---
title: 标签
date: 2020-11-10 13:57:59
type: "tags"
comments: false
---

Next使用的图标为Font Awesome,可根据喜欢自行选择

侧边头像

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

侧边社交

social:
  GitHub: https://github.com/fanmore  || fab fa-github
  Gitee: https://gitee.com/riskfan  || fab fa-github-alt

开启版权

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: false
  language:

浏览进度

默认放在右下角,开启后放在文章目录下

back2top:
  enable: true
  # Back to top in sidebar. 放在作者下
  sidebar: true
  # Scroll percent label in b2t button. 浏览进行百分比
  scrollpercent: true

关闭大纲数字和展示所有

toc:
  number: false
  expand_all: true

底部运行时间

footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  since: 2021

备案号

beian:
  enable: true
  icp: 黔ICP备2021005697号

背景彩带

解决页面整体黑白调的问题

canvas_ribbon:
  enable: true
  size: 100 # The width of the ribbon
  alpha: 0.4 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

关闭首页阅读全文

read_more_btn: false

代码复制功能

copy_button:
    enable: true

代码样式

copy_button:
  enable: true
  # Available values: default | flat | mac
  style: mac

source/css/main.styl中加入

// 代码样式
figure.highlight {
  box-shadow: none;
}
figure.highlight::before {
  height: 9px;
  width: 9px;
}

异步加载

相同的数据不在重复加载,加快页面加载,页面转换更流畅

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true

图片放大功能

mediumzoom: true

图片懒加载

页面滚动到才加载,但是会影响文章侧边导航定位的精确性,有时会因为没有加载图片无法直接到达某个标题

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: true

导航开启统计

menu_settings:
  icons: true
  badges: true

在进入文章后页面后,导航是没有小点的,这个时候会出现导航右侧空白的情况,不喜欢该风格的情况可以开启导航统计,缓解右侧空白的情况并且导航统计是左右对称的,小点是靠右一丢丢的,与自定义的左侧分类能保持一致的宽度

标签云配置

tagcloud:
  min: 13 # Minimum font size in px
  max: 24 # Maximum font size in px
  amount: 1000 # Total amount of tags
  orderby: name # Order of tags
  order: 1 # Sort order

顶部加载条

pace:
  enable: false
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue
  # All available themes:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

底部驱动

个人建议还是开启,毕竟开源需要大家维护

footer:
  # Powered by Hexo & NexT
  powered: true

ICP备案展示

footer:
  beian:
    enable: true
    icp: xxxx

文章底部标签图标

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

默认使用的是#,开启后就有图标了

文章文字间距固定

某些文字间的间距因为页面宽度而增大,手机端尤为严重,是文字的对齐方式造成的,可在配置文件中配置

# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: left
  mobile: left

全局字体配置

font:
  enable: false

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Helvetica # 更改此处
    size:

首页摘要

Next默认是开启的,在文章的头部加上description:即可,同时可以美化样式

// 摘要
.post-description {
  margin-bottom: 20px;
  text-align: left;
  text-indent: 2em;
}
目录
统计
9
分类
4
文档
2
坚持