上回发布的文章提到我把日常用的AI提示词整理成了开源模板库，后面也在GitHub上收获了一些星星（hhh虽然只有2颗）很感激大家愿意点开我的仓库！！ 但说实话，那个项目一直有个让我不太满意的地方——它只是一个

文件夹里堆满Markdown文件的仓库

用户想找一个提示词，得先打开仓库，再点进目录，再找到对应的

文件，打开才能看到内容。这个流程让我想起在Hugging Face上学习时的体验：他们不仅有清晰的左侧导航，还能一键切换文档的不同版本，整个浏览体验非常流畅。

“我的用户不该只在GitHub的代码视图里看文档”，我想。

 他们应该有一个像样的、可以舒服阅读和查找的文档站。

促使我动手的直接原因有两点：

做一个像Datawhale和Hugging Face那样，有漂亮页面、有导航栏、能一键切换文档的站点。

技术选型——为什么是VitePress？

要建文档站，市面上有好几个选择，做一个对比：

其实中间还考虑过Docusaurus，但它是React生态，我对Vue更熟悉。选技术栈嘛，

迭代之路——从“能用”到“好用”

第一回合：把项目变成“真正的网站”

文件夹，按VitePress的约定组织好目录。同时配置了自动侧边栏——

，新增一个文件，侧边栏会自动出现。

VitePress默认的本地搜索对中文支持很差——搜“密码重置”可能什么都搜不到，但搜“password”却可以。我要的是

插件。这个插件基于Pagefind实现，对中文分词有优化。

第三回合：提供“源码切换”功能（最折腾的一关）

这是整个过程中最复杂、最折腾的一环。用户既要能舒服地阅读渲染好的文档，也要能一键查看和复制原始的Markdown源码，毕竟提示词模板是需要复制去AI对话里用的。

我最初尝试了组件包裹方案——创建一个

包裹内容。但很快撞上了问题：

（YAML frontmatter分隔符）在Vue模板里被当成了HTML标签

[plugin:vite:vue] docs/05-git/commit-message.md: Element is missing end tag.


这让我花了很长时间来排查。我试过：

 Vue解析器在编译阶段就会检查模板结构，

一旦出现就会被当作不完整的HTML标签。无论怎么转义或包裹，都绕不开编译器的静态分析。

最终我换了思路：放弃组件包裹，改用内联Vue方式。

核心思想很简单：把Vue模板代码直接嵌入

块包裹原始内容。因为 Vue 在编译 

不会去检查它内部的模板语法是否合法

，只会原样保留。所以放在里面的 

这个方案终于跑通了！虽然每个文件都需要嵌入这段代码，但可以写一个自动化脚本来批量处理。

如果每次新增文件都要手动嵌入Vue代码，那也太不“程序员”了。我让ai帮我写了一个

成果：一个真正可用、可维护的文档站

用户既可以在线阅读，也可以一键切换到源码模式，直接复制提示词去用。

回顾整个过程，我最大的收获是学会了

报错时，我一直试图“绕过”它——转义、包裹、注释掉，全都失败了。直到我意识到，

本身，而在于我试图让Vue去解析它

当你在一个方向上反复碰壁时，也许应该后退一步，重新审视问题的本质。

如果你也正在尝试把零散的文档整合成一个可用的站点，希望我的这条踩坑路径能给你一些启发。毕竟

自己走通的路，踩过的坑，才是最好的经验。

大家也没有类似这种分隔符误编译的经历和好的解决办法？欢迎在评论区留言！

上回发布的文章提到我把日常用的AI提示词整理成了开源模板库，后面也在GitHub上收获了一些星星（hhh虽然只有2颗）很感激大家愿意点开我的仓库！！ 但说实话，那个项目一直有个让我不太满意的地方——它只是一个文件夹里堆满Markdown文件的仓库。

零成本搭文档站：VitePress + GitHub Pages 就够了

用 VitePress 将散落的 Markdown 提示词构建为可搜索、可交互的文档站，并集成 GitHub Actions 实现自动化部署。零成本，全过程记录

开发工具

前端

后端

作者将GitHub上的AI提示词模板库升级为VitePress文档站，解决中文搜索和源码切换难题，实现自动侧边栏、明暗主题及一键复制功能，分享技术选型与踩坑经验，提供完整项目链接。

文件系统

编译器

GitHub

ReAct 

ES特惠专场，新客首购5.5折起！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

零成本搭文档站：VitePress + GitHub Pages 就够了

零成本搭文档站：VitePress + GitHub Pages 就够了

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐