Hexo 博客配置

发表于 更新于

环境准备

本地安装 Git NodeJS

检查环境

1
2
3
4
5
git -v

node -v

npm -v

切换镜像站,具体参考NPM配置国内源

1
npm config set registry https://registry.npmmirror.com

Hexo环境搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pnpm install -g hexo-cli                # 安装Hexo cli工具

hexo init                            # 初始化博客环境
npm install                          # 安装依赖库

# 插件
npm install hexo-asset-img           # 头像
npm install hexo-auto-category       # 自动分类
npm install hexo-generator-searchdb  # 生成搜索数据库
npm install hexo-backlink            # Obsdian链接转换
npm install hexo-deploy-git          # git自动发布
npm install hexo-theme-next          # hexo NexT主题
npm install hexo-server              # hexo服务器
npm install hexo-next-giscus         # giscus评论组件
npm install hexo-wordcount           # 字数统计

Hexo 配置

参考官方文档

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
...
theme: next     # 配置主题next

giscus:         # 评论配置
  enable: true
  repo:  # Github repository name
  repo_id: # Github repository id
  category: # Github discussion category
  category_id: # Github discussion category id
  # Available values: pathname | url | title | og:title
  mapping: title
  # Available values: 0 | 1
  reactions_enabled: 1
   # Available values: 0 | 1
  emit_metadata: 1
  # Available values: light | light_high_contrast | light_protanopia | light_tritanopia | dark | dark_high_contrast | dark_protanopia | dark_tritanopia | dark_dimmed | preferred_color_scheme | transparent_dark | noborder_light | noborder_dark | noborder_gray | cobalt | purple_dark
  theme: light
  # Available values: en | zh-CN
  lang: zh-CN
  # Place the comment box above the comments
  input_position: bottom
  # Load the comments lazily
  loading: lazy
  
deploy:   # 发布配置
  - type: git
    repo:        # 仓库发布地址
    branch: main # 发布分支
    name:        # git用户名 git config user.name <username>
    email:       # git邮箱 git config user.email <email>
...

注意： 评论部分需要借助Github Discussions, 参考Hexo博客配置Giscus评论

Hexo主题配置

安装主题后从npm_modules/<主题名>/文件夹中复制_config.yml到博客根目录并重命名为_config.next.yml,当博客deploy时回自动应用主题配置，一下主题修改都基于此文件进行。

设置语言

NexT主题支持多种语言，只需要编辑_config.next.yml中的language设置即可

语言 代码 设定示例
English en language: en
简体中文 zh-CN（注：zh-Hans已经无法使用） language: zh-CN
Frangais fr-FR language: fr-FR
Portugues pt language: pt
或者
language:pt-BR
繁體中文 zh-hk
或者
zh-tw		 language: zh-hk
Pycckmi 93bIK ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko
如果需要添加非内置的字段需要手动添加翻译文件，例如中文的翻译文件路径为node_modules/next/languages/zh-CN.yml

设置关于

在source/about/index.md中添加如下内容

1
2
3
4
5
6
---
title: 关于
date: 2025-08-27 00:00:00
---

<个人信息>

选择Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Schem

  • Muse - 默认 Scheme
  • Mist - Muse 的紧凑版本
  • Pisces - 双栏 Scheme
  • Gemini

菜单配置

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。

1
2
3
4
5
6
7
8
menu: home: / || home 
categories: /categories/ || th 
archives: /archives/ || archive 
tags: /tags/ || tags 
#schedule: /schedule/ || calendar 
#sitemap: /sitemap.xml || sitemap 
#commonweal: /404/ || heartbeat 
about: /about/ || user

NexT 默认的菜单项有（标注 * 的项表示需要手动创建这个页面）：

注意: 若站点运行在子目录中，请将链接前缀的 / 去掉。

键值 设定值 显示文本（简体中文）
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页 *
tags tags: /tags 标签页 *
about about: /about 关于页面*
commonweal commonweal: /404.html 公益 404 !

侧栏配置

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。配置具体如下

1
2
3
4
5
6
7
...

sidbar:
  position: left     # 配置侧栏居左
  display: post      # 侧栏显示行为

...

侧栏显示位置支持

  • left: 居左显示
  • right: 居右显示

侧栏显示行为支持

  • post 默认行为，在文章页面（拥有目录列表）时显示
  • always 所有页面都显示
  • hide 在所有页面中都隐藏（可以手动展开）
  • remove 完全移除

注册Github账号,Gitea账号(可选)
[^注] Github由于网络问题会经常无法链接，可使用Gitea作为中转，先将代码提交道Gitea，然后Gitea配置自动推送到Github

设置头像

1
avatar: /images/avatar.jpg

头像地址如果是以/起始则表示头像图片放置在博客发布后的目录下，例如测试博客地址是http://localhost:4000,头像图片地址为http://localhost:4000/images/avatar.jpg
此配置需要在博客的source/images目录中放置头像图片avatar.jpg

侧边栏社交链接

1
2
3
4
5
6
7
8
9
10
social:
  #GitHub: https://github.com/<username> || fab fa-github
  #E-Mail: <email> || 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

next主题默认支持的社交链接 ||符号后是链接的图标

使用已有配置放开注释即可，如果要添加默认不存在链接示例如下

1
2
social:
  微信: https://wx.qq.com || weixin

注意: 图标对应的名称是FontAwesom图标的名称（不必带 fa- 前缀）

打赏功能

1
2
3
4
# Reward 
reward: 
  wechatpay: /images/custom/wechatpay.jpg 
  alipay: /images/custom/alipay.jpg

放开此部分注释并在source/images中放入收款码图片

站点建立时间

1
2
footer:
  since: 2025

订阅微信公众号

1
2
3
4
5
# Wechat Subscriber 
wechat_subscriber: 
  enabled: true 
  qcode: /images/wechat-qcode.jpg 
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

放开此部分注释，并在source/images中放入公众号二维码

注意: 此功能需要NexT版本在5.0.1之后

设置动画

NexT 默认开启动画效果，效果使用 JavaScript 编写，因此需要等待 JavaScript 脚本完全加载完毕后才会显示内容。 如果您比较在乎速度，可以将设置此字段的值为 false 来关闭动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Use velocity to animate everything. 
motion: 
  enable: true 
  async: true 
  transition: 
    # Transition variants: 
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut 
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut 
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut 
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut 
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut 
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut 
    post_block: fadeIn 
    post_header: slideDownIn 
    post_body: slideDownIn 
    coll_header: slideLeftIn # Only for Pisces | Gemini. 
    sidebar: slideUpIn

设置全文阅读

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。

  • 在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式 推荐。
  • 在文章的 front-matter 中添加 description，并提供文章摘录
  • 自动形成摘要，需要添加如下配置
    1
    2
    3
    4
    5
    # Automatically Excerpt. Not recommend. 
    # Please use <!-- more --> in the post to control excerpt accurately. 
    auto_excerpt: 
      enable: true 
      length: 150

设置字数统计/阅读时长

在_config.yml中配置如下

1
2
3
4
5
6
7
8
# Post wordcount display settings 
# Dependencies: https://github.com/willin/hexo-wordcount 
post_wordcount: 
  item_text: true 
  wordcount: true 
  min2read: true 
  totalcount: false 
  separated_meta: true

加载进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

搜索服务

在_config.yml中配置如下

1
2
3
4
5
6
# hexo-generator-searchdb 
search: 
  path: search.xml 
  field: post 
  format: html 
  limit: 10000

在_config.next.yml中配置如下

1
2
3
4
5
6
7
8
9
# Local search 
# Dependencies: https://github.com/flashlab/hexo-generator-search 
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

参考
官方文档
Hexo 博客使用 Next 主题及美化 | Jiz4oh’s Life