vuepress获取所有页面frontmatter

简介: vuepress获取所有页面frontmatter

倘若没有骄傲的思想,人将不成其为人,他自身的弱点会使他蜕化为禽兽。——高尔基

今天实现了vuepress中获取所有页面的frontmatter

frontmatter是页面的页头信息,例如:

---
title: xxx
author: 作者
date: 2023-08-17
---

可以编写一个插件:

module.exports = (options, context) => ({
  extendPageData($page) {
    const { pages } = context;
    // 获取除首页外的其他所有页面的 frontmatter 数据
    const frontmatters = pages
      .filter(page => page.path !== '/')
      .map(page => page.frontmatter);
    // 将 frontmatter 数组传递给首页的 frontmatter
    $page.frontmatter.homepageFrontmatters = frontmatters;
  }
});

然后配置一下:

plugins: [
// ....其他plugin
  [require('../plugins/frontmatter'), {}]
]

接下来是使用

console.log(this.$frontmatter.homepageFrontmatters)

效果:

相关文章
解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题
用Hexo搭了个Gitpage的博客,兴冲冲的发了11篇博文后发现翻页按钮不正常显示,显示为`<i class="fa fa-angle-right"></i>`的HTML编码。本文介绍如何解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题。
51 1
|
JavaScript 前端开发
HTML VSCode 自用插件列表 (包含Vue)
HTML VSCode 自用插件列表 (包含Vue)
188 0
|
4月前
|
JavaScript 前端开发 Go
8 大博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比
探索各类博客引擎:Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman的对比,包括语言、模板引擎、速度、社区活跃度等。了解每种引擎的优缺点,助你选择合适的博客构建工具。查看详细文章以获取更多实战和安装指南。
|
4月前
vscode中设置HTML模板
vscode中设置HTML模板
|
10月前
|
资源调度 JavaScript 应用服务中间件
VuePress介绍及使用指南
VuePress是一个基于Vue.js的静态网站生成工具,它专注于以Markdown为中心的项目文档。VuePress具有简单易用的特性,同时提供了强大的自定义和扩展性。
161 2
VuePress介绍及使用指南
|
4月前
|
搜索推荐
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
80 0
|
10月前
|
JSON 前端开发 JavaScript
ElementUI -- Mock.js介绍和使用与首页导航栏左侧菜单搭建
ElementUI -- Mock.js介绍和使用与首页导航栏左侧菜单搭建
51 0