【Hexo系列】【6】NexT主题使用

本期将为大家讲解Hexo NexT主题的使用。

1. NexT介绍

NexT是Hexo的知名第三方主题，黑白极简风格四合一，有相当多的使用者，维护也相当给力，数年来一直都在频繁更新。

Next主题官网：https://github.com/next-theme/hexo-theme-next

官网效果图：

2. NexT安装

2.1 下载主题

建议你使用clone最新版本的方式，之后的更新可以通过 git pull 来快速更新， 而不用再次下载压缩包替换。

切换到博客的主题根目录下打开Git Bash并执行以下命令：

git clone https://github.com/next-theme/hexo-theme-next.git themes/next

下载完成后，会在项目themes目录下生成next文件夹。

如果没有修改代码的需求可以直接通过npm来安装。

npm install hexo-theme-next

2.2 切换主题

与所有 Hexo 主题启用的模式一样。当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

theme: next

到此，NexT 主题安装完成。

2.3 验证主题

启动服务并访问http://localhost:4000查看效果.

hexo clean && hexo s

3. NexT配置

NexT的主题配置文件是themes/next/_config.yml。

3.1 配置说明

以下是themes/next/_config.yml文件的翻译版本，可以复制进去替换原文件

# ---------------------------------------------------------------
# 主题核心配置设置
# 参见：https://theme-next.js.org/docs/theme-settings/
# ---------------------------------------------------------------

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

# 生成 Hexo 后删除不必要的文件。
minify: false

# 定义自定义文件路径。
# 在 `source/_data` 目录下创建自定义文件并取消下面需要的文件的注释。
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

# ---------------------------------------------------------------
# 方案设置
# ---------------------------------------------------------------

# 方案
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

# 暗黑模式
darkmode: false

# ---------------------------------------------------------------
# 网站信息设置
# ---------------------------------------------------------------

favicon:
  # 小图标
  small: /images/favicon-16x16-next.png
  # 中图标
  medium: /images/favicon-32x32-next.png
  # Apple 触摸图标
  apple_touch_icon: /images/apple-touch-icon-next.png
  # Safari 固定标签页图标
  safari_pinned_tab: /images/logo.svg
  # Android 清单
  #android_manifest: /manifest.json

# 自定义 Logo（警告：Mist 方案不支持）
custom_logo: #/uploads/custom-logo.png

# 知识共享 4.0 国际许可协议。
# 参见：https://creativecommons.org/about/cclicenses/
creative_commons:
  # 可用值：by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # 可用值：big | small
  size: small
  sidebar: false
  post: false
  # 如果您希望使用知识共享许可协议的翻译版本，可以设置一个语言值，例如 deed.zh
  # 知识共享许可协议提供 39 种语言版本，您可以在 https://creativecommons.org 上找到您需要的特定和正确的缩写
  language:

# 开放图谱设置
# 参见：https://hexo.io/docs/helpers#open-graph
open_graph:
  enable: true
  options:
    #twitter_card: <twitter:card>
    #twitter_id: <twitter:creator>
    #twitter_site: <twitter:site>
    #twitter_image: <twitter:image>
    #google_plus: <g+:profile_link>
    #fb_admins: <fb:admin_id>
    #fb_app_id: <fb:app_id>
    
    
# ---------------------------------------------------------------
# 菜单设置
# ---------------------------------------------------------------

# 使用：`键: /链接/ || 图标`
# 键是菜单项的名称。如果此项目有可用的翻译，将加载翻译后的文本，否则将使用键名称。键是区分大小写的。
# 值在 `||` 分隔符之前是目标链接，值在 `||` 分隔符之后是 Font Awesome 图标名称。
# 外部 URL 应该以 http:// 或 https:// 开头
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

# 启用/禁用菜单图标/项目徽章。
menu_settings:
  icons: true
  badges: false

# ---------------------------------------------------------------
# 侧边栏设置
# 参见：https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
  # 侧边栏位置。可用值：left | right
  position: left

  # 侧边栏宽度。
  # 适用于 Muse | Mist 和 Pisces | Gemini 的移动设备。
  width_expanded: 320
  # 适用于 Pisces | Gemini 的桌面设备。
  width_dual_column: 240

  # 侧边栏显示。
  # 适用于 Muse | Mist 和 Pisces | Gemini 的移动设备。
  # 可用值：
  #  - post   自动展开文章。默认。
  #  - always  自动展开所有页面。始终。
  #  - hide    仅在点击侧边栏切换图标时展开。
  #  - remove  完全移除侧边栏，包括侧边栏切换。
  display: post

  # 侧边栏内边距（像素）。
  padding: 18
  # 侧边栏偏移量，从顶部菜单栏开始（仅适用于 Pisces | Gemini）。
  offset: 12

# 侧边栏头像
avatar:
  # 替换默认图片并在这里设置 URL。
  url: #/images/avatar.gif
  # 如果为 true，则头像将显示为圆形。
  rounded: false
  # 如果为 true，则头像将随着光标旋转。
  rotated: false

# 侧边栏中的文章/分类/标签。
site_state: true

# 社交链接
# 使用：`键: 永久链接 || 图标`
# 键是最终用户看到的链接标签。
# 值在 `||` 分隔符之前是目标永久链接，值在 `||` 分隔符之后是 Font Awesome 图标名称。
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
  enable: true
  icons_only: false
  transition: false

# 友情链接设置
links_settings:
  icon: fa fa-globe
  # 可用值：block | inline
  layout: block

links:
  #标题: https://example.com

# 侧边栏中的目录
toc:
  enable: true
  # 自动为目录添加列表编号。
  number: true
  # 如果为 true，则当标题宽度超过侧边栏宽度时，所有单词将放在下一行。
  wrap: false
  # 如果为 true，则显示文章中所有级别的目录，而不是仅显示激活部分。
  expand_all: false
  # 生成目录的最大标题深度。
  max_depth: 6

# ---------------------------------------------------------------
# 页脚设置
# 参见：https://theme-next.js.org/docs/theme-settings/footer
# --------------------------------------------------------------