Hexo 文章之间的相对路径跳转

在 Hexo 中，实现文章之间的相对路径跳转主要分为两种场景：在 Markdown 文章内跳转，以及在主题模板（EJS/Nunjucks）中跳转。

---

1. 在 Markdown 文章中跳转

在编写 Markdown 博客时，不建议直接硬编码绝对路径（如 /2024/05/10/my-post/），因为一旦更改域名前缀或文章链接结构，链接就会失效。Hexo 提供了以下几种方法来实现相对或动态跳转：

方法一：使用 Hexo 官方标签插件（最推荐）

Hexo 内置了 post_link 标签，它会自动根据目标文章的文件名（slug）解析出正确的相对或绝对路径，并且支持动态获取目标文章的标题。

• 基本语法：

{% post_link "文章的slug" "自定义链接文字" %}

• 示例：
  假如你想跳转到 source/_posts/hello-world.md 这篇文章：

<!-- 使用自定义文本 -->
点击查看 {% post_link hello-world 我的首篇文章 %}。

<!-- 不写文本，Hexo 会自动将其替换为 hello-world.md 的实际文章标题 -->
参考文章：{% post_link hello-world %}。

注意： slug 通常是 source/_posts/ 目录下文件名去掉 .md 后的名字。如果文章存放在子目录中（例如 source/_posts/tech/docker.md），slug 需要写成 tech/docker。

---

方法二：使用标准 Markdown 语法（配合插件）

如果你希望在本地编辑器（如 Typora、VS Code）中预览时也能点击跳转，可以在根目录的 _config.yml 中开启相对路径支持。

1. 检查或安装渲染插件：
   Hexo 默认使用的是 hexo-renderer-marked，执行以下命令确保已安装：

npm install hexo-renderer-marked --save

2. 修改站点配置文件 _config.yml：

# 开启相对链接支持
relative_link: true

# 配置 marked 渲染器（可选，用于更好地支持相对资源与链接）
marked:
  prependRoot: true
  postAsset: true

3. 在 Markdown 中使用相对路径：

[跳转到另一篇文章](../other-post-folder/hello-world.md)

---

2. 在主题模板（EJS / Nunjucks）中跳转

如果你正在修改主题代码（如 layout/ 目录下的 .ejs 或 .njk 文件），需要使用 Hexo 提供的辅助函数（Helpers）来处理路径。

方法一：使用 url_for 辅助函数（最稳健）

url_for 会自动根据你的 _config.yml 配置（包含 root 设置）生成正确的 URL，避免出现 404 或绝对路径错乱的问题：

<!-- EJS 模板示例 -->
<a href="<%- url_for('posts/hello-world/') %>">前往 Hello World</a>

方法二：使用 relative_url 辅助函数

如果你需要严格相对于当前页面的相对路径，可以使用 relative_url 函数：

<!-- EJS 模板示例：计算从当前页面 (page.path) 到目标路径的相对位置 -->
<a href="<%- relative_url(page.path, 'posts/hello-world/') %>">前往 Hello World</a>

---

总结与建议

使用场景	推荐方式	示例 / 语法	优点
Markdown 文章内部	Hexo 标签	{% post_link "slug" "链接文本" %}	自动处理路径变动，自动同步目标文章标题
需要本地编辑器预览	标准 Markdown + 插件	[文本](../hello-world/)	本地与线上环境体验一致
修改主题模板代码	Helper 函数	<%- url_for('path') %>	兼容多级子路径部署，不易踩坑