巧妙的高阶技巧集
妙用 Markdown 文档引用
1. Markdown 引用基础
VitePress 的一个独特功能是 Markdown 文档引用,也就是在一个 .md 文件中引用其他的 .md 文件。你可以引用全部,也可以指定引用部分内容:
<!--@include: ./parts/basics.md-->
还可以指定引用部分,以下是引用第3-10行。
<!--@include: ./parts/basics.md{3,10}-->
所选行范围的格式可以是: {3,}
、 {,10}
、{1,10}
2. 使用引用创建文档组合
有了引用之后,我们可以用如下思路来创建文档组合。
- 比如,我们有一系列 AI 提示语(prompt),我们将之放在一个目录中。
- 在撰写文章时,每次我们引用相应的提示语。
3. 引用代码
VitePress 的另一个相关功能是代码引用。可具体参考文档
md
<<< @/filepath
使用 .md 模板
VitePress 的 Markdown 引用在通常场景中很有用,但是,假如我们想要能够创建一个模板,每次更改 .md 中的部分元素呢?(讨论)
以下示例代码来自brc-dd,略有更改:
1. 创建一个模板
以下这个文件实际上是一个 Vue 组件。
./.vitepress/templates/welcome.md
md
# Hello {{name}}
Welcome to {{prefix}} Home!
<script setup lang="ts">
defineProps<{
name: string
prefix: string
}>()
</script>
2. 在页面中使用
在 ./app/index.md
中使用的示例如下:
<MyTemplate name="John Doe" prefix="App" />
<script setup lang="ts">
import MyTemplate from './.vitepress/templates/welcome.md'
</script>
实际效果如图所示: