Skip to content

巧妙的高阶技巧集

妙用 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>

实际效果如图所示:

Alang.AI - Make Great AI Applications