使用 Vue 3 + Element Plus 从头开始写一个数据库网站-07-添加 VuePress Theme Hope 作为内嵌文档
由于 PrismJS 尚不支持 Vue 的语法高亮，因此 Vue 代码块均先使用 HTML 的高亮
2024-09-23
VuePress 是一个基于 Vue.js 的静态网站生成器，专为构建技术文档和博客等内容设计。
VuePress Theme Hope 是一个基于 VuePress 的主题，提供了丰富的 Markdown 语法、组件支持、交互演示、幻灯片、搜索等功能。我们采用它来为网站构建一个美观的帮助文档。这里是[官方使用指南](https://theme-hope.vuejs.press/zh/guide/intro/install.html)。
初始化文档
要将 vuepress-theme-hope 作为文档构建器添加到现有项目中，我们在项目根目录 `ADDB/` 中运行以下命令:
这会在根目录 `ADDB/` 目录下创建一个 `docs/` 目录，结构如下
同时，该命令会修改根目录中的 `package.json` 文件，在 `scripts` 块中增加了这些内容：
这意味着我们可以在根目录中直接使用 `pnpm docs:dev` 来预览我们的文档页
我们先前已经在 `ADDB/src/App.vue` 组件中定义了整个数据库网站的 menu 和 footer
现在，我们希望在点击 About 菜单时能够访问这个文档
针对我们的需求，修改 `ADDB/docs/.vuepress/config.ts` 配置文件：
主要的修改如下：
- 设置了 `base: "/about/"`，使生成的文档文件会基于 `/about/` 路径访问
- 由于文档自带一个 menu，我们在配置文件中取消它
- `ADDB/public/` 用于存放整个项目的静态资源，我们将文档构建的输出目录改为 `ADDB/public/about/`，与 base 一致
嵌入文档
最简单的方法是在页面用 `iframe` 嵌入生成的文档：
我们仍然可以在 `ADDB/src/views/` 中编写一个 `AboutDocs.vue` 文件来实现
但是在此处，我们来展示一下将其作为组件 `ADDB/src/components/AboutDocs.vue` 的写法：
+++info 一点缺陷
我们将样式设置为无边框，且高度为视口高度，但这种方法仍然有一定的缺陷：
当文档页面高度超过了视口高度，iframe 也会出现滚动条，这在体验上是不太友好的
为了整体性与沉浸性，我尝试了数种方法来使 iframe 可以根据内部文档的高度自适应高度，但都没有成功，目前我没有办法解决这个问题。
+++
我们在 `ADDB/src/router/index.js` 添加 About 页面的路由
在以上配置中，我们明确地将 `/about` 重定向到文档首页 `/about/index.html`，并使用 `pathMatch` 捕获 `/about/` 下的子路径
参考资料
- [Vuepress Theme Hope 的安装/使用](https://theme-hope.vuejs.press/zh/guide/intro/install.html)
- [如何把VuePress制作的文档管理页面打包进现有的vue项目中？](https://devpress.csdn.net/vue/66cd4158c618435984a2686c.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MjA2NzU4NywiZXhwIjoxNzMwMTA2MTM4LCJpYXQiOjE3Mjk1MDEzMzgsInVzZXJuYW1lIjoiQ1NETl9MSU0ifQ.h-aWTvtUhiZnYvDJXMPGFFgdmjdHxUO286crK_o_2r8&spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Ebaidujs_baidulandingword%7Eactivity-3-123026004-blog-135412294.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Ebaidujs_baidulandingword%7Eactivity-3-123026004-blog-135412294.235%5Ev43%5Epc_blog_bottom_relevance_base3&utm_relevant_index=4)
- [自适应 iframe 高度](https://liaoxuefeng.com/blogs/all/2024-02-25-auto-resize-iframe/)
Loading...
