Skip to content

隐藏文章功能的实现

在 md 文件的 frontmatter 中设置 hidden: true,从而在构建时将文章从所有列表中排除

实现方式:构建时过滤

这个逻辑在构建阶段执行,核心代码位于 ./.vitepress/theme/serverUtils.ts

  1. config.ts 中调用: 在 ./.vitepress/config.ts 中,getPosts 函数被调用,用于获取所有文章数据

    typescript
    // .vitepress/config.ts
    import { defineConfig } from 'vitepress'
    import { getPosts } from './theme/serverUtils'
    const pageSize = 10
    
    export default defineConfig({
        // ...
        themeConfig: {
            posts: await getPosts(pageSize), // 获取处理后的文章列表
            // ...
        }
    })
  2. serverUtils.ts 中过滤getPosts 函数负责读取所有文章并进行处理

    typescript
    // .vitepress/theme/serverUtils.ts (部分代码)
    async function getPosts(pageSize: number) {
        let paths = await globby(['posts/**.md'])
        let posts = await Promise.all(
            // ... 读取每篇文章的 frontmatter ...
        )
        const showHidden = process.env.SHOW_HIDDEN === 'true'
        if (!showHidden) {
            // 根据 frontmatter 中的 'hidden' 字段过滤
            posts = posts.filter((post) => !post.frontMatter.hidden)
        }
        posts.sort(_compareDate as any)
        // ...
        return posts
    }
  • posts.filter((post) => !post.frontMatter.hidden):遍历所有文章,只保留那些 frontMatter.hidden 不为 true 的文章
  • 环境变量 SHOW_HIDDEN:如果在构建时设置环境变量 SHOW_HIDDEN=true,则所有文章(包括被隐藏的)都会被显示出来