上帝是孤独的,恶魔却总在拉帮结伙。——梭罗的《瓦尔登湖》。
这次是vuepressv2.0.0-beta.66
核心代码:
// .vuepress/getAllFrontmatter.s
module.exports = {
name: 'get-all-frontmatter',
extendsPage: (page, app) => {
console.log({ page, app })
console.log(page.data.frontmatter)
app.siteData.frontmatter = app.siteData.frontmatter ?? []
app.siteData.frontmatter.push(page.data.frontmatter)
},
};
然后配置:
// .vuepress/config.ts
import { getDirname, path } from '@vuepress/utils'
import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
const __dirname = getDirname(import.meta.url)
export default {
plugins: [
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components'),
}),
require('./getAllFrontmatter'),
// ...其他插件
],
// ...其他配置
};
接下来是使用:
<!-- .vuepress/components/AppInfo.vue -->
<template>
<div>
<div v-for="(frontmatter, index) in frontmatter" :key="index">{{ frontmatter }} </div>
</div>
</template>
<script setup>
import { siteData } from '@vuepress/client';
const frontmatter = siteData.value.frontmatter
console.log({frontmatter})
siteData.value.frontmatter.forEach(console.log)
</script>
使用组件README.md
:
---
title: home page
autho: VampireAchao
---
<AppInfo />
还有一个页面guide/README.md
---
title: guide page
autho: Achao
---
最后看效果:
pnpm run docs:dev