本文主要记录在参考以下两篇教程搭建Hexo博客时，所进行的一些额外配置。

一、自动化文章链接（Slug）

为了确保每篇文章都有一个唯一的、对SEO友好的URL，同时避免手动设置的麻烦，我们创建了一个自定义的 hexo write-py 命令。

功能：

执行 hexo write-py "我的新文章" 后，脚本会自动在 source/_posts/ 目录下完成以下操作：

  1. 创建一个拼音化（无声调）的文件名，如 wo-de-xin-wen-zhang.md。
  2. 创建一个同名的资源文件夹 wo-de-xin-wen-zhang/。
  3. 在 .md 文件的 Front-matter 中，自动填入 title: "我的新文章" 和 slug: wo-de-xin-wen-zhang。

实现过程:

  1. 安装 pinyin 依赖包

    1
    npm install pinyin --save-dev

  2. 创建自动化脚本
    在项目根目录下创建 scripts/pinyin-slug.js 文件，并写入相应逻辑。（由Gemini CLI生成）

二、文章内图片引用

为了让图片管理更方便，并确保本地预览和线上部署都能正常显示，我们采用“文章资源文件夹”（Post Asset Folder）的方式。

1. 核心配置

确保 _config.yml 文件中有以下两项配置：

1
2
3
4
5
6
7
# _config.yml

# 开启此功能后，`hexo new` 或我们的 `hexo write-py` 会自动创建与文章同名的文件夹
post_asset_folder: true 

# 将文章的永久链接格式设置为基于 slug，确保URL与资源文件夹路径匹配
permalink: :slug/

2. 正确使用方式

将图片（例如 example.png）放入文章对应的资源文件夹中，然后在 Markdown 中直接引用图片文件名即可。

目录结构示例：

1
2
3
4
source/_posts/
├── my-first-post/
│   └── example.png   <--- 图片放在这里
└── my-first-post.md

Markdown引用示例：

1
![图片描述](my-first-post/example.png)

优点：
这种写法非常简洁，它不仅能在最终发布的网站上被正确解析，也能在本地使用 VS Code 等编辑器时正常预览图片，实现了本地和线上的体验统一。

三、添加Busuanzi加速链接

1
2
3
4
# _config.butterfly.yml
CDN:
   option:
      busuanzi: https://cdn.jsdelivr.net/npm/busuanzi@2.3.0/bsz.pure.mini.min.js

四、区别本地测试环境配置文件

在package.json中添加命令 hexo server -c _config.development.yml

1
2
3
4
5
6
7
"scripts": {
  "build": "hexo generate",
  "clean": "hexo clean",
  "deploy": "hexo deploy",
  "server": "hexo server",
  "hexo-test": "hexo server -c _config.development.yml"
}

新建_config.development.yml配置文件

1
url: http://localhost:4000