开发者专属的快捷编辑功能,在开发模式下直接从前台页面跳转到内容编辑界面,极大提升内容维护效率。
开发模式快捷编辑
DocsBlog 为开发者提供了快捷编辑功能,在本地开发模式下,你可以直接从前台页面跳转到对应内容的编辑界面,省去在后台管理中手动查找的步骤。
工作流程
- 启动开发服务器 -- 运行
pnpm dev启动本地开发环境 - 浏览前台页面 -- 在浏览器中访问任意支持快捷编辑的页面
- 发现编辑入口 -- 鼠标悬停在内容卡片或条目上,编辑图标自动显示
- 点击编辑 -- 点击编辑图标,直接跳转到对应内容的管理编辑页面
- 保存修改 -- 在编辑页面修改内容后保存,前台页面自动刷新
整个流程无需离开浏览器,也无需记忆后台管理的路径结构,所见即所编辑。
支持的页面
快捷编辑功能覆盖以下前台页面类型:
| 页面 | 说明 | 编辑目标 |
|---|---|---|
| 博客文章 | 博客列表和详情页 | MDX 文件内容和 frontmatter |
| Twitter 账号 | Twitter 列表页的账号卡片 | 账号 JSON 数据文件 |
| YouTube 频道 | YouTube 列表页的频道卡片 | 频道 JSON 数据文件 |
| 导航项目 | 导航页面的工具/项目卡片 | 项目 JSON 数据文件 |
| 导航分组 | 导航分组页面 | 分组配置文件 |
使用须知
仅开发模式可用
快捷编辑功能仅在开发模式(NODE_ENV=development)下启用。生产环境中编辑入口完全隐藏,不会影响线上用户的浏览体验,也不会带来安全风险。
权限说明
快捷编辑跳转到的是本地后台管理界面,所有修改直接作用于本地文件系统。修改完成后需要通过 Git 提交并推送到远程仓库,才能触发生产环境的部署更新。
自定义编辑入口
如果你扩展了新的内容类型,可以参考现有实现为新页面添加快捷编辑入口。核心逻辑是在卡片组件中检测 process.env.NODE_ENV,条件渲染指向后台编辑页面的链接。