vuepress2一次性获取所有frontmatter

简介: vuepress2一次性获取所有frontmatter

上帝是孤独的,恶魔却总在拉帮结伙。——梭罗的《瓦尔登湖》。

接上文:

vuepress获取所有页面frontmatter

这次是vuepressv2.0.0-beta.66

首页 | VuePress

核心代码:

// .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

20230821195510.png

相关文章
|
JavaScript IDE 前端开发
如何在大型代码仓库中删掉废弃的文件和 exports?
本文是我最近在公司内部写的废弃代码删除工具的一篇思考总结。
|
前端开发 JavaScript 数据可视化
Vue项目打包完后如何自动上传至服务器
Vue项目打包完后如何自动上传至服务器
1262 0
Vue项目打包完后如何自动上传至服务器
|
1月前
|
自然语言处理 JavaScript 前端开发
静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
【10月更文挑战第3天】静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
静态文档网站生成神奇器:VuePress!尤雨溪的旧爱!
|
30天前
|
前端开发 JavaScript 开发工具
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
226 0
|
3月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
3月前
|
开发工具
如何修改Vscode查看源代码管理版本变动文件的查看方式
这篇文章介绍了如何在VSCode中通过源代码管理插件修改查看源代码版本变动文件的方式,提供了树形视图和列表视图两种查看方法,并说明了如何通过设置选项来切换查看方式,帮助用户根据自己的喜好更高效地查看和管理代码变动。
如何修改Vscode查看源代码管理版本变动文件的查看方式
|
5月前
vuepress打包报错【已解决】
vuepress打包报错【已解决】
106 4
.vitepress执行了,npm init,npm,修改了scipt,出错了如何解决,vitepress的配置,结合up主成功版,能够实现侧边栏跳转,解决方法,一个一个尝试
.vitepress执行了,npm init,npm,修改了scipt,出错了如何解决,vitepress的配置,结合up主成功版,能够实现侧边栏跳转,解决方法,一个一个尝试
Vitepress初始化配置的样式,写法,序,文本,vitepress乱序的问题,vitepress的index.md文件没有出现的问题如何解决,细节问题,----必须带
Vitepress初始化配置的样式,写法,序,文本,vitepress乱序的问题,vitepress的index.md文件没有出现的问题如何解决,细节问题,----必须带
|
5月前
|
JavaScript CDN
大事件项目61------打包发布_dist瘦身的分析_把第三方包排除掉换成cdn链接
大事件项目61------打包发布_dist瘦身的分析_把第三方包排除掉换成cdn链接