自动索引(Auto Index)
建站
本站主题
0 字 / 约 0 分钟
自动索引(Auto Index)
功能说明
自动为每个目录生成 index.md 的文章列表页,显示该目录下的所有文章,支持分页和加载更多功能。
实现流程
1. 创建索引页
- 在每个目录下检查是否存在
index.md - 如果不存在,则创建基础的
index.md文件(不含首页)
2. Auto Frontmatter 处理
- 为所有
index.md文件生成/更新 frontmatter - 自动分配
permalink(基于目录规则,如/eda/e78b7) - 设置
createTime和updateTime - 添加基础字段:
title、description、aside、outline
3. Auto Generate Index 更新内容
- 扫描目录下的所有文章,收集文章信息
- 读取现有
index.md的 frontmatter,完全保留 - 仅更新正文内容:文章列表、分页组件、统计数据
- 不修改任何 frontmatter 字段
技术实现
- 组件:
.vitepress/components/ArticleIndex.vue - 工具函数:
.vitepress/utils/generateIndex.ts - 插件集成:
.vitepress/plugins/auto-generate-indexes.js - 数据格式:各
index.md内通过 JSON 字符串提供articles列表
页面配置选项
评论开关
- 在
index.md的 frontmatter 中添加comments: false可禁用该索引页的评论功能 - 默认情况下索引页会显示评论区域
版权声明开关
- 在
index.md的 frontmatter 中添加copyright: false可禁用该索引页的版权声明 - 默认情况下索引页会显示版权声明模块
示例配置
yaml
---
title: EDA-文章索引
description: 本目录下的所有文章列表
aside: false
outline: false
permalink: /eda/xxxxx
comments: false # 禁用评论
copyright: false # 禁用版权声明
---执行时机
- 开发模式:
pnpm docs:dev时自动执行 - 构建模式:
pnpm docs:build时自动执行 - 顺序保证:Auto Frontmatter → Auto Generate Index
开发模式监听功能
- 文件监听:开发模式下自动监听
.md文件变化 - 实时更新:新建、修改、删除文件时自动更新相关索引
- 防抖处理:1秒内多次变化只更新一次,避免频繁操作
- 配置选项:可通过
watchOnDev: true/false控制是否启用监听