此页内容

约 314 字大约 1 分钟

2023-02-26

npm versionnpm total downloadsnpm yearly downloadsgithub source

指南

根据配置,读取 vuepress 应用下的 markdown 文件,将符合规则的 page 归类为 blog ,并提供 useBlogPostData方法获取 文章列表 数据,提供给 vuepress 主题的开发者。

插件不提供组件,仅提供相关的数据,主题开发者可通过数据开发自定义的 blog 文章列表页、以及其他功能。

安装

yarn
yarn add @vuepress-plume/plugin-blog-data

使用

// .vuepress/config.ts
import blogDataPlugin from '@vuepress-plume/plugin-blog-data'

module.exports = {
  //...
  plugins: [
    blogDataPlugin({
      include: ['**/*.md']
    })
  ]
  // ...
}

Options

interface BlogDataPluginOptions {
  /**
   * 包含的文件, glob匹配
   */
  include?: string | string[]
  /**
   * 排除的文件, glob匹配
   */
  exclude?: string | string[]
  /**
   * 排序方式
   */
  sortBy?: 'createTime' | false | (<T>(prev: T, next: T) => boolean)
  /**
   * 是否生成文章摘要
   */
  excerpt?: boolean
  /**
   * 扩展单个 post 的数据
   */
  extendBlogData?: <T = any>(page: T) => Record<string, any>
}

useBlogPostData()

在 client 端,获取 blog post data

<script lang="ts" setup>
import { useBlogPostData } from '@vuepress-plume/plugin-blog-data/client'
const postList = useBlogPostData()
</script>

<template>
  <div v-for="post in postList">
    <h3>{{ post.title }}</h3>
    <a :href="post.path" >阅读全文</a>
  </div>
</template>