NexT 笔记

发表于 更新于 本文字数： 8.7k 阅读时长 ≈ 8 分钟
NexT 配置文件、插件及服务的小小笔记

本文以 hexo/ 指代博客根目录；以 next/ 指代 NexT 主题根目录 (hexo/node_modules/hexo-theme-next/) 。

NexT 技巧

阅读全文 - Read More

在.md博文内容文件中使用<!-- more -->，在生成文章时会自动保留截断标志<!-- more -->以上的内容，并生成阅读全文(Read More)按钮：

readmore

注意：如果该方法会被博文摘要配置 - Preamble Text覆盖

进度条 - Pace

  • NexT 配置

    • color → 进度条的颜色 (英文单词)

    • theme → 主题配置 (themes)

      theme name theme effect
      Minimal Minimal
      Flash Flash
      Barber Shop Barber Shop
      Mac OSX Mac OSX
      Fill Left Fill Left
      Flat Top Flat Top
      Big Counter Big Counter
      Corner Indicator Corner Indicator
      Bounce Bounce
      Loading Bar Loading Bar
      Center Circle Center Circle
      Center Atom Center Atom
      Center Radar Center Radar
      Center Simple Center Simple 
    1
    2
    3
    4
    5
    6
    7
    8
    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

数学公式 - Math Equations

以下启用 mathjax + hexo-renderer-pandoc

  • next 配置文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # Math Formulas Render Support
    math:
      # Default (false) will load mathjax / katex script on demand.
      # That is it only render those page which has `mathjax: true` in front-matter.
      # If you set it to true, it will load mathjax / katex script EVERY PAGE.
      every_page: false

      mathjax:
        enable: true
        # Available values: none | ams | all
        tags: none

      katex:
        enable: false
        # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
        copy_tex: false

    建议按需手动在 front-matter 中设置 mathjax: true

然后我们卸载原来的渲染器hexo-renderer-marked，然后安装hexo-renderer-pandoc：

1
2
npm un hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

与此同时，我们需要安装 pandoc

进入 https://github.com/jgm/pandoc/releases 选择最新版下载并进行安装

pandoc-asset

重启后我们便可正常使用 pandoc 公式渲染器

接下来我们在需要使用 mathjax 的页面，配置 front-matter 中 mathjax: true 即可达到想要的效果

更多自定义请参考 https://github.com/wzpan/hexo-renderer-pandoc

NexT 服务、插件配置 - Adding Plugins

可以使用以下了解插件

  • 第三方服务 https://theme-next.js.org/docs/third-party-services/
  • Tag 插件（更合适的排版样式） https://theme-next.js.org/docs/tag-plugins/
  • 本站

NexT 博文头 - Front-matter

参数 类型 意义 默认值
author string 博文作者 站点配置_config.yml的author
post_link string 发布链接 (相对路径) None
description string 简介 None
direction string 有效值： rtl None
header boolean 是否在索引页展示标题 true
mathjax boolean 是否支持 MathJax math.every_page in _config.yml
sidebar boolean 侧边栏是否显示 Depends on sidebar.display in _config.yml
copyright boolean 是否在版权页显示theme.creative_commons.license 同时启用theme.creative_commons.post true
sticky number 置顶该帖子 (需要插件 hexo-generator-index) 0
quicklink object (1) 快速链接 From _config.yml
reward_settings object (1) 捐赠设置 From _config.yml
toc object (1) 文章目录 TOC From _config.yml

NexT 主题配置

NexT 主题配置文件为hexo/node_modules/hexo-theme-next/_config.yml

缓存设置 - Cache Support

1
2
cache:
  enable: true				# 允许缓存内容生成

最小化生成设置 - Minify Support

1
minify: true				# 删除 hexo 不必要文件

排版方案设置 - Choosing Scheme

  • Muse → 黑白主调，大量留白
  • Mist → 更紧凑的 Muse 版本，具有整洁的单列视图
  • Pisces → 双栏排版，小家碧玉似的清新
  • Gemini → 类似 Pisces，有明显的柱状块，有阴影，显得更敏感的视野

黑夜模式 - Dark Mode

1
darkmode: false

网站图标配置 - Configuring Favicon

默认情况下，NexT 使用 next/source/images 文件夹中的图片作为网站图标

可以直接更改其中的图片来变更网站图标（名字不能改变）

最好是通过更改配置中的 favicon 参数进行更改网站图标配置

图片资源路径为相对路径，默认在 hexo/source/ 和 next/source/ 文件夹中搜索

可以使用 Favicon Generator 自动化生成网站图标

1
2
3
4
5
6
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

自定义 Logo 设置 - Custom Logo Support

Scheme Mist 排版方案不支持自定义 Logo

1
custom_logo: #/uploads/custom-logo.jpg

版权协议配置 - Creative Commons

1
2
3
4
5
6
7
8
9
10
11
12
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
  # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # Available values: big | small
  size: small
  sidebar: true
  post: true
  # 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
  language: deed.zh

配置参考：https://creativecommons.org

菜单、分类页配置 - Configuring Menu Items

菜单设置项的格式 Key: /link/ || icon 包含 3 个值：

  • Key

    Key → 菜单项的名称（home、archives等）。 如果找到此菜单的翻译语言，则将加载此翻译；如果没有，Key 将使用名称。

  • link

    link → 指向网站内相对 url 的目标链接

  • icon

    icon → Font Awesome 图标的名称。图标的名称可以在 Font Awesome 中找到。

1
2
3
4
5
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  archives: /archives/ || fa fa-archive
  about: /about/ || fa fa-user
1
2
3
menu_settings:
  icons: true				# 启用菜单项图标
  badges: true				# 启用计数

侧边栏样式 - Sidebar Style

侧边栏样式配置包括 position, width, display, padding 和 offset

  • position

    更改侧边栏位置：

    • left → 放置在屏幕左侧。
    • right → 放置在屏幕右侧。

  • width

    以像素为单位，指定侧边栏宽度

  • display

    侧边栏出现的条件：

    • post → 仅在有索引的帖子中显示侧边栏。
    • always → 在所有页面中显示侧边栏。
    • hide → 在所有页面中隐藏（但可以由用户手动打开）。
    • remove → 完全删除侧边栏。

  • padding

    以像素为单位，指定侧边栏填充量

  • offset

    一像素为单位，指定菜单栏偏移量

1
2
3
4
5
sidebar:
  position: left
  display: post
  padding: 18
  offset: 12

侧边栏头像设置 - Configuring Avatar

图片资源路径为相对路径，默认在博客根目录下的./source/和NexT主题根目录下的./source/文件夹中搜索

头像图片的尺寸不影响显示（固定尺寸显示），但图片的清晰程度影响

1
2
3
4
avatar:
  url: /images/avatar.gif		# 头像相对路径
  rounded: true					# 是否取圆头像
  rotated: false				# 指针 focus 头像时，是否旋转一周

侧边栏网站状态 - Sidebar Site State

与 菜单、分类页配置 - Configuring Menu Items 配置中的 menu_settings.badges 冲突

1
site_state: true				# 启用计数

侧边栏社交链接 - Sidebar Social Links

侧边栏社交链接的格式 Name: link || icon 包含 3 个值：

  • Name

    Name → 会被显示的社交网站名称（Github、Google等）。

  • link

    link → 社交主页的完整地址。

  • icon

    icon → Font Awesome 图标的名称。图标的名称可以在Font Awesome中找到。

1
2
3
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #Google: https://plus.google.com/yourname || fab fa-google
1
2
3
4
social_icons:
  enable: true					# 启用社交图标
  icons_only: false				# 启用不带有名称的社交图标
  transition: false				# 启用具有过渡效果的社交图标

侧边栏 Blogrolls 配置 - Sidebar Blogrolls

1
2
3
4
links_settings:
  icon: fa fa-globe				# Font Awesome 图标的名称
  title: Links					# 默认值
  layout: block					# 布局方式 (block | inline)

如果links没有参数，不显示 Blogrolls

1
2
links:
  Google: https://www.google.com

侧边栏文章目录 - Sidebar TOC (Table of Contents)

1
2
3
4
5
6
toc:
  enable: true					# 自动生成 TOC
  number: true					# 自动生成 TOC 序号
  wrap: false					# 目录名宽度大于侧边栏宽度时，自动换行
  expand_all: false				# 显示所有级别的目录，而不是当前级别的
  max_depth: 6					# 目录最大深度

页脚配置 - Site Footer Setting

页脚多语种 - Language Switcher

1
language_switcher: true			# 是否自动展示不同的页脚

网站开始时间 - Site Start Time

1
2
footer:
  since: 2022					# 开始年份   @ 2022 - 当前年份

页脚图标 - Site Footer Icon

1
2
3
4
5
footer:
  icon:
    name: fa fa-user			# Font Awesome 图标的名称。
    animated: true				# 图标动画化
    color: 'ff0000'				# 图标颜色

网站版权名称 - Site Copyright Name

1
2
footer:
  copyright: [name]				# 空白默认使用站点配置下的 author

网站平台信息 - Site Platform Information

1
2
footer:
  powered: false				# 是否显示网站框架

网站备案信息 - Site Beian Information

1
2
3
4
5
6
7
footer:
  beian:
    enable: true				# 是否显示以下信息
    icp: 京ICP备 1234567890号-1
    gongan_id: 1234567890
    gongan_num: 京公网安备 1234567890号
    gongan_icon_url: /uploads/beian.png

博文摘要配置 - Preamble Text

1
2
3
4
5
excerpt_description: true		# 使用 description 的内容作为 Read More 的摘要。
read_more_btn: true				# 显示 Read More 按钮
auto_excerpt:
	enable: true				# 若不开启且 description 为空则使用全文做摘要
	length: 150					# 摘要长度

注意：该配置会与 <!-- more --> 产生冲突

front-matter: description

发布信息配置 - Post Meta Display

1
2
3
4
5
6
7
post_meta:
  item_text: true				# 显示描述文本
  created_at: true				# 显示创建时间
  updated_at:
    enable: true				# 显示更新时间
    another_day: true			# 显示更新日
  categories: true				# 显示分类

文末标签图标 - Tag Icon

默认情况下，博文末尾存在以#开头的标签超链接。

1
tag_icon: true					# 开启标签图标

捐赠、打赏配置 - Donate Settings

1
2
3
4
5
6
7
8
9
reward_settings:
  enable: false					# 开启捐赠链接 (默认在所有博文下显示)
  animation: false				# 是否开启动画效果
  comment: ''					# 捐赠注释

# 收款码
reward:
  #wechatpay: /images/wechatpay.png	
  #alipay: /images/alipay.png

关注 - Follow Me

参数参考侧边栏社交链接 - Sidebar Social Links

1
2
3
4
5
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

博文编辑配置 - Post Edit

1
2
3
post_edit:
  enable: false					# 是否允许在存储库直接浏览和编辑源代码
  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name/

博文导航配置 - Post Navigation

1
post_navigation: left			# 上一章、下一章 (left | right | false)

CDN配置 - Preconnect

1
preconnect: true

文本对齐方式 - Text Align

值 Effect
start The same as left if direction is left-to-right and right if direction is right-to-left.
end The same as right if direction is left-to-right and left if direction is right-to-left.
left The inline contents are aligned to the left edge of the line box.
right The inline contents are aligned to the right edge of the line box.
center The inline contents are centered within the line box.
justify The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
justify-all Same as justify, but also forces the last line to be justified.
match-parent Similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value. 
1
2
3
text_align:
  desktop: justify				# 桌面端
  mobile: justify				# 移动端

移动端适配 - Mobile Devices Adaptation

1
mobile_layout_economy: true

主题颜色 - Theme Color

1
2
3
theme_color:
  light: "#222"
  dark: "#222"

正文滚动条 - Body Scrollbar

1
2
3
body_scrollbar:
  overlay: false				# 是否使用正文滚动条 (会覆盖浏览器默认样式)
  stable: false					# 是否固定滚动条

代码样式 - Codeblock Style

NexT使用Highlight.js和Prism进行语法高亮

可以预先使用NexT Highlight Theme Preview查看配置效果

1
2
3
4
5
6
7
8
9
10
codeblock:
  theme:
    light: default
    dark: tomorrow-night
  prism:
    light: prism
    dark: prism-dark
  copy_button:
    enable: true				# 启用代码一键复制按钮
    style:						# 代码框样式 (default | flat | mac)

快速回顶 - Back To Top

1
2
3
4
back2top:
  enable: true					# 启用快速回顶按钮
  sidebar: false				# 按钮嵌入侧边栏
  scrollpercent: false			# 按钮嵌入滚动条

阅读进度 - Reading Progress

1
2
3
4
5
6
7
reading_progress:
  enable: true					# 是否启用阅读进度提示
  start_at: left				# 从左开始还是从右开始加载 (left | right)
  position: top					# 位置在哪 (top | bottom)
  reversed: false				# (从满到无 | 从无到满)
  color: "#37c6c0"				# 进度条颜色
  height: 2px					# 进度条粗细

书签 - Bookmark

书签标记后，下一次进入网站自动跳转到用户上一次浏览的地方

1
2
3
4
bookmark:
  enable: false					# 开启书签
  color: "#222"					# 书签的颜色
  save: auto					# 是否自动保存书签 (auto | manual)

字体配置 - Fonts Customization

NexT 提供了 5 种特定的字体设置：

  • Global Font: 整个网站的基本字体
  • Title Font: 网站标题的字体
  • Headlines Font: 内容标题的字体
  • Article Font: 内容的字体
  • Code Font: 代码字体

如果字体不可用，会回退到 NexT 主题默认的字体

详情请参考 Fonts Customization