VitePress 会员主题

Appearance

通过侧边栏数据在页面输出目录 ​


在.md文件中可以直接写vue代码，所以也可以直接使用主题数据做渲染。

代码示例 ​

markdown
<script setup>
import {useData} from "vitepress";
const {theme} = useData();
const items = theme.value.sidebar['/themes/'];
</script>

<template v-for="(item,i) in items">
  <div>
    <a v-if="item.link" :href="item.link">{{i+1}}. {{ item.text }}</a>
    <h3 v-if="!item.link">{{i+1}}. {{ item.text }}</h3>
    <div v-if="item.items">
      <template v-for="(item2,i2) in item.items">
        <div style="margin-top: 15px;"><a :href="item2.link||'javascript:void(0);'">{{i+1}}.{{i2+1}}. {{ item2.text }}</a></div>
      </template>
    </div>
  </div>
</template>

TIP

以上代码，还可以改成独立vue组件，然后在多个.md文件中使用组件，不用重复拷贝代码。

效果预览 ​

TIP

上面目录是示例代码的渲染输出结果。