上帝是孤独的,恶魔却总在拉帮结伙。——梭罗的《瓦尔登湖》。
接上文:
这次是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