DocsBlogDocsBlog
Log in

开发者专属的快捷编辑功能,在开发模式下直接从前台页面跳转到内容编辑界面,极大提升内容维护效率。

开发模式快捷编辑

DocsBlog 为开发者提供了快捷编辑功能,在本地开发模式下,你可以直接从前台页面跳转到对应内容的编辑界面,省去在后台管理中手动查找的步骤。

工作流程

  1. 启动开发服务器 -- 运行 pnpm dev 启动本地开发环境
  2. 浏览前台页面 -- 在浏览器中访问任意支持快捷编辑的页面
  3. 发现编辑入口 -- 鼠标悬停在内容卡片或条目上,编辑图标自动显示
  4. 点击编辑 -- 点击编辑图标,直接跳转到对应内容的管理编辑页面
  5. 保存修改 -- 在编辑页面修改内容后保存,前台页面自动刷新

整个流程无需离开浏览器,也无需记忆后台管理的路径结构,所见即所编辑。

支持的页面

快捷编辑功能覆盖以下前台页面类型:

页面说明编辑目标
博客文章博客列表和详情页MDX 文件内容和 frontmatter
Twitter 账号Twitter 列表页的账号卡片账号 JSON 数据文件
YouTube 频道YouTube 列表页的频道卡片频道 JSON 数据文件
导航项目导航页面的工具/项目卡片项目 JSON 数据文件
导航分组导航分组页面分组配置文件

使用须知

仅开发模式可用

快捷编辑功能仅在开发模式(NODE_ENV=development)下启用。生产环境中编辑入口完全隐藏,不会影响线上用户的浏览体验,也不会带来安全风险。

权限说明

快捷编辑跳转到的是本地后台管理界面,所有修改直接作用于本地文件系统。修改完成后需要通过 Git 提交并推送到远程仓库,才能触发生产环境的部署更新。

自定义编辑入口

如果你扩展了新的内容类型,可以参考现有实现为新页面添加快捷编辑入口。核心逻辑是在卡片组件中检测 process.env.NODE_ENV,条件渲染指向后台编辑页面的链接。