docs: vuepress构建文档

2025-07-27 14:30:54 +00:00 · 2024-03-28 08:31:49 +08:00
parent a8f6a25369
commit 0ac374f5df
41 changed files with 4041 additions and 0 deletions
--- a/docs/demo/markdown.md
+++ b/docs/demo/markdown.md
@ -0,0 +1,269 @@
+---
+title: Markdown 展示
+icon: fab fa-markdown
+order: 2
+category:
+  - 使用指南
+tag:
+  - Markdown
+---
+
+VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。
+
+你应该创建和编写 Markdown 文件，以便 VuePress 可以根据文件结构将它们转换为不同的页面。
+
+<!-- more -->
+
+## Markdown 介绍
+
+如果你是一个新手，还不会编写 Markdown，请先阅读 [Markdown 介绍](https://theme-hope.vuejs.press/zh/cookbook/markdown/) 和 [Markdown 演示](https://theme-hope.vuejs.press/zh/cookbook/markdown/demo.html)。
+
+## Markdown 配置
+
+VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。
+
+::: info
+
+Frontmatter 是 VuePress 中很重要的一个概念，如果你不了解它，你需要阅读 [Frontmatter 介绍](https://theme-hope.vuejs.press/zh/cookbook/vuepress/page.html#front-matter)。
+
+:::
+
+## Markdown 扩展
+
+VuePress 会使用 [markdown-it](https://github.com/markdown-it/markdown-it) 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 [语法扩展](https://github.com/markdown-it/markdown-it#syntax-extensions) 。
+
+### VuePress 扩展
+
+为了丰富文档写作，VuePress 对 Markdown 语法进行了扩展。
+
+关于这些扩展，请阅读 [VuePress 中的 Markdown 扩展](https://theme-hope.vuejs.press/zh/cookbook/vuepress/markdown.html)。
+
+### 主题扩展
+
+通过 [`vuepress-plugin-md-enhance`][md-enhance]，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。
+
+#### 提示容器
+
+::: v-pre
+
+安全的在 Markdown 中使用 {{ variable }}。
+
+:::
+
+::: info 自定义标题
+
+信息容器，包含 `代码` 与 [链接](#提示容器)。
+
+```js
+const a = 1;
+```
+
+:::
+
+::: tip 自定义标题
+
+提示容器
+
+:::
+
+::: warning 自定义标题
+
+警告容器
+
+:::
+
+::: caution 自定义标题
+
+危险容器
+
+:::
+
+::: details 自定义标题
+
+详情容器
+
+:::
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/hint.html)
+
+#### 代码块
+
+::: code-tabs
+
+@tab pnpm
+
+```bash
+pnpm add -D vuepress-theme-hope
+```
+
+@tab yarn
+
+```bash
+yarn add -D vuepress-theme-hope
+```
+
+@tab:active npm
+
+```bash
+npm i -D vuepress-theme-hope
+```
+
+:::
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/code-tabs.html)
+
+#### 上下角标
+
+19^th^ H~2~O
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/sup-sub.html)
+
+#### 自定义对齐
+
+::: center
+
+我是居中的
+
+:::
+
+::: right
+
+我在右对齐
+
+:::
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/align.html)
+
+#### Attrs
+
+一个拥有 ID 的 **单词**{#word}。
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/attrs.html)
+
+#### 脚注
+
+此文字有脚注[^first].
+
+[^first]: 这是脚注内容
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/footnote.html)
+
+#### 标记
+
+你可以标记 ==重要的内容== 。
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/mark.html)
+
+#### 任务列表
+
+- [x] 计划 1
+- [ ] 计划 2
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/tasklist.html)
+
+### 图片增强
+
+支持为图片设置颜色模式和大小
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/image.html)
+
+#### 组件
+
+```component VPCard
+title: Mr.Hope
+desc: Where there is light, there is hope
+logo: https://mister-hope.com/logo.svg
+link: https://mister-hope.com
+background: rgba(253, 230, 138, 0.15)
+```
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/component.html)
+
+#### 导入文件
+
+<!-- @include: ./README.md{11-17} -->
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/include.html)
+
+#### 样式化
+
+向 Mr.Hope 捐赠一杯咖啡。 _Recommended_
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize.html)
+
+#### Tex 语法
+
+$$
+\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
+= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}
+$$
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/tex.html)
+
+#### 图表
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/chartjs.html" width="100%" height="450"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/chartjs.html)
+
+#### Echarts
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/echarts.html" width="100%" height="800"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/echarts.html)
+
+#### 流程图
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/flowchart.html" width="100%" height="450"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/flowchart.html)
+
+#### MarkMap
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/markmap.html" width="100%" height="380"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/markmap.html)
+
+#### Mermaid
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/mermaid.html" width="100%" height="620"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/mermaid.html)
+
+#### 代码演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/code-demo.html" width="100%" height="450"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/demo.html)
+
+#### 交互演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/playground.html" width="100%" height="480"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/playground.html)
+
+#### Kotlin 交互演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/kotlin-playground.html" width="100%" height="220"/>
+
+- [View Detail](https://theme-hope.vuejs.press/zh/guide/markdown/kotlin-playground.html)
+
+#### Vue 交互演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/vue-playground.html" width="100%" height="380"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/vue-playground.html)
+
+#### Sandpack 交互演示
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/sandpack.html" width="100%" height="380"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/sandpack.html)
+
+#### 幻灯片
+
+<iframe src="https://plugin-md-enhance-demo.vuejs.press/snippet/revealjs.html" width="100%" height="400"/>
+
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/revealjs.html)
+
+[md-enhance]: https://plugin-md-enhance.vuejs.press/zh/