Appearance
隐藏文章功能的实现
在 md 文件的 frontmatter 中设置 hidden: true
,从而在构建时将文章从所有列表中排除
实现方式:构建时过滤
这个逻辑在构建阶段执行,核心代码位于 ./.vitepress/theme/serverUtils.ts
在
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), // 获取处理后的文章列表 // ... } })
在
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
,则所有文章(包括被隐藏的)都会被显示出来