最新 vuepress2 获取所有 formatter 教程

当前 vuepress 版本为：v2.0.0-rc.26

1. 写插件：把所有 frontmatter 挂到 siteData#

核心代码：

1
export const getAllFrontmatter = {
2
  name: 'get-all-frontmatter',
3

4
  onInitialized(app) {
5
    // 自定义 frontmatter 属性，将 app.pages 中的 page.frontmatter 映射在 frontmatter 上
6
    app.siteData.frontmatter = app.pages.map((page) => page.frontmatter)
7
  },
8
}

2. 在配置中注册插件#

1
import { defineUserConfig } from 'vuepress'
2
import { getAllFrontmatter } from './getAllFrontmatter.js'
3

4
export default defineUserConfig({
5
  plugins: [getAllFrontmatter],
6
})

注册完成以后，前端组件里就可以通过 useSiteData() 读取：

1
siteData.value.frontmatter

3. 在组件中使用#

1
<template>
2
  <div>
3
    <div v-for="(item, index) in frontmatter" :key="index">
4
      <pre>{{ JSON.stringify(item, null, 2) }}</pre>
5
    </div>
6
  </div>
7
</template>
8

9
<script setup>
10
import { computed } from 'vue'
11
import { useSiteData } from 'vuepress/client'
12

13
const siteData = useSiteData()
14
const frontmatter = computed(() => siteData.value.frontmatter || [])
15
</script>

意思是：

useSiteData() 取到 VuePress 全局站点数据
siteData.value.frontmatter 就是你在插件里挂进去的全站 frontmatter

4. 注册这个组件#

1
import { defineClientConfig } from 'vuepress/client'
2
import AllFrontmatter from './components/AllFrontmatter.vue'
3

4
export default defineClientConfig({
5
  enhance({ app }) {
6
    app.component('info', info)
7
  },
8
})

5. 在 markdown 中使用这个组件#

1
---
2
title: Info Page
3
description: A compact rendering of all collected frontmatter records.
4
---
5
## Site data snapshot
6

7
<info/>

音乐

音乐

1. 写插件：把所有 frontmatter 挂到 siteData#

2. 在配置中注册插件#

3. 在组件中使用#

4. 注册这个组件#

5. 在 markdown 中使用这个组件#

6. 验收成果#

文章分享

评论区

音乐

文章目录