1
2
3
4
5
6
7
8
9
10
# 在 Hexo + Butterfly 主题中集成 Qexo 编辑文章按钮

> 本文档适用于 Hexo 博客使用 Butterfly 主题并结合 Qexo 后台编辑器的用户，实现点击“编辑此文章”按钮，跳转到对应的 Qexo 后台文章编辑页面。

---

## 🧱 背景说明

Butterfly 主题自带“编辑此页”按钮功能，但默认跳转地址是 GitHub 仓库中的 `.md` 文件。我们要将这个按钮改为跳转到 Qexo 的后台页面，例如：

http://192.168.137.6:33333/edit.html?file=source/_posts/xxx.md&postname=xxx

1
2
3
4
5
6
7
8
9
10
11
12

---

## ✏️ 第一步：修改主题配置文件

打开你的博客根目录中的 `themes/butterfly/_config.yml`，找到 `post_edit` 部分，修改为：

```yaml
post_edit:
  enable: true
  type: custom
  url: http://192.168.137.6:33333/edit.html

替换为你实际的 Qexo 地址和端口。

🧩 第二步：修改 Butterfly 主题模板文件

编辑文件：

1
themes/butterfly/layout/includes/header/post-info.pug

找到以下原始代码：

1
2
3
if theme.post_edit.enable
  a.post-edit-link(href=theme.post_edit.url + page.source title=_p('post.edit') target="_blank")
    i.fas.fa-pencil-alt

将其替换为以下内容：

1
2
3
4
5
6
7
if theme.post_edit.enable
  - var sourceFile = encodeURIComponent('source/' + page.source)
  - var postName = encodeURIComponent(page.source.replace(/\.md$/, ''))
  - var editLink = theme.post_edit.url + '?file=' + sourceFile + '&postname=' + postName
  a.post-edit-link(href=editLink title='编辑此文章' target="_blank")
    i.fas.fa-pen-to-square
    | 编辑此文章

🔍 说明：

  • page.source 是文章 .md 文件的相对路径（从 _posts 开始）；

  • 我们拼接出 Qexo 所需的参数 file 与 postname；

  • 使用 encodeURIComponent() 编码中文与特殊字符，防止出错；

  • 按钮打开方式为新标签页。

✅ 第三步：重新生成博客

在终端运行：

1
hexo clean && hexo g

访问文章页，确认“编辑此文章”按钮是否跳转正确。

🧪 示例效果

文章路径：

1
source/_posts/网络/Github/Github Page/Hexo/Qexo 安装与配置.md

按钮跳转链接：

1
http://192.168.137.6:33333/edit.html?file=source%2F_posts%2F网络%2FGithub%2FGithub%20Page%2FHexo%2FQexo%20安装与配置.md&postname=_posts%2F网络%2FGithub%2FGithub%20Page%2FHexo%2FQexo%20安装与配置

✅ Qexo 后台成功打开并加载对应文章。

🎨 可选：添加按钮样式

编辑 source/css/_custom/custom.styl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.post-edit-link
  display: inline-block
  padding: 0.4rem 0.8rem
  margin-top: 0.5rem
  background: #0078e7
  color: white
  border-radius: 6px
  font-size: 0.9rem
  text-decoration: none
  transition: all 0.2s ease
  i
    margin-right: 0.3em

  &:hover
    background: #005bb5

然后重新生成：

1
hexo g

📌 小贴士

  • 建议每篇文章 front-matter 添加 slug 字段，统一 URL 和管理；

  • 可将按钮挪到文章底部（如 layout/post.pug 中）；

  • 可扩展为只管理员可见，或与 Git 同步部署自动触发刷新。

✅ 效果演示图（可选）

可插入一张截图，展示点击“编辑此文章”跳转到 Qexo 编辑页的效果。

🧾 参考资料

如需进一步美化、自动刷新、访问控制、Docker 集成等功能，请联系作者或查阅后续高级教程。

1
2
3
4

---

如果你希望我也帮你生成这个文档为本地文件（.md），或者上传到你的 Hexo 博客文档页，我也可以帮你打包好。是否需要？