Vitepress 是否支持动态内容加载？

Vitepress 作为一款新兴的静态站点生成器，因其出色的性能和简洁的配置而备受关注。

然而，一个常见的问题摆在开发者面前：Vitepress 是否支持动态内容加载呢？

咱们得弄清楚啥叫动态内容加载。简单来说，就是在页面运行时，能够根据用户的操作或者某些条件，实时地获取并展示新的数据，而不是在页面初始加载时就把所有内容一股脑儿都弄进来。

动态数据内容，让页面更加灵活和智能。

那 Vitepress 本身呢？严格来讲，Vitepress 主要侧重于静态内容的生成和展示。它的设计初衷是为了创建快速、高效的静态文档站点。但是，这并不意味着完全没办法实现动态内容加载。

比如说，如果您只是想在页面中加载一些简单的动态数据，比如从一个固定的 API 获取一些数据并展示，那可以通过 JavaScript 的 fetch 或者 axios 这样的库来实现。下面是一个简单的示例代码：

fetch('https://example.com/api/data')
 .then(response => response.json())
 .then(data => {
    // 在这里处理获取到的数据，并将其展示在页面上
    console.log(data);
  })
 .catch(error => {
    console.error('出错啦：', error);
  });

不过，这种方式相对来说比较基础。

如果您想要更强大、更全面的动态内容加载支持，可能就得考虑将 Vitepress 与其他前端框架或库结合使用。比如说，结合 Vue.js 来创建一个更加复杂的动态应用。

Vitepress 本身对动态内容加载的支持相对有限，但通过一些巧妙的手段和与其他技术的结合，还是能够在一定程度上满足动态需求的。

回到最初的问题，Vitepress 是否支持动态内容加载？答案是：能，但需要您根据具体的需求，灵活运用各种技术和方法，才能达到理想的效果。

在文档里调用接口

在Markdown里是可以使用标签<script setup></script>

示例(这一段是可以直接写在Markdown文档中的)：

<script setup>  
const title = ref('')
fetch('https://example.com/api/data')
 .then(response => response.json())
 .then(data => {
    // 在这里处理获取到的数据，并将其展示在页面上
    console.log(data);
    title.value = data.title
  })
 .catch(error => {
    console.error('出错啦：', error);
  });
</script>  
  
<template>  
 {{title}}
</template>

这里演示的是直接代码写在Markdown里，还可以把代码块写在自定义组件中，在文档中使用组件。

自定义组件调用接口

非通用的组件，可以写在目录docs/.vitepress/。

通用的组件，建议写在主题目录 docs/.vitepress/theme/components/ 。

比如写一个随机显示鸡汤语录的组件：

文件名 /docs/.vitepress/theme/components/saying/index.vue

<script setup>  
import {reactive} from "vue";  
  
//鸡汤语录  
//这里是写的固定内容，也可以改为使用接口获取数据
// fetch('https://example.com/api/data')
const saying = [  
    "心若有所向往，何惧道阻且长。",  
    "你只管努力，剩下的交给时间。",  
    "如今我努力奔跑，不过是为了追上那个曾经被寄予厚望的自己。 —— 约翰.利文斯顿",  
    "成功的秘诀就是每天都比别人多努力一点。",  
    "选一个方向，定一个时间；剩下的只管努力与坚持，时间会给我们最后的答案。",  
    "你可以走慢点，但千万别后退",  
    "你的压力来源于无法自律只是假装努力"  
]  
  
const $data = reactive({   saying  })  
  
function randomSay() {  
    return saying[getRandomInt(0, saying.length - 1)]  
}  
  
function getRandomInt(min, max) {  
    min = Math.ceil(min);  
    max = Math.floor(max);  
    return Math.floor(Math.random() * (max - min + 1)) + min;  
}
</script>  
  
<!-- 随机显示 -->  
<template>  
  <div class="saying" v-html="randomSay()"></div>  
</template>  
  
<style scoped>  
  
.saying {  
  border-color: var(--vp-custom-block-tip-border);  
  color: var(--vp-custom-block-tip-text);  
  background-color: var(--vp-custom-block-tip-bg);  
  
  border: 1px solid var(--vp-custom-block-tip-border);  
  border-radius: 8px;  
  padding: 16px 16px 8px;  
  line-height: 24px;  
  font-size: var(--vp-custom-block-font-size);  
}  
  
</style>

总结

你可能已经看出来了，VitePress就是一个Vue的前端项目，Vue能用的方法在VitePress里基本都能用。