自动索引(Auto Index)

建站
本站主题
0 字 / 约 0 分钟

自动索引(Auto Index)

功能说明

自动为每个目录生成 index.md 的文章列表页,显示该目录下的所有文章,支持分页和加载更多功能。

实现流程

1. 创建索引页

  • 在每个目录下检查是否存在 index.md
  • 如果不存在,则创建基础的 index.md 文件(不含首页)

2. Auto Frontmatter 处理

  • 为所有 index.md 文件生成/更新 frontmatter
  • 自动分配 permalink(基于目录规则,如 /eda/e78b7
  • 设置 createTimeupdateTime
  • 添加基础字段:titledescriptionasideoutline

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 控制是否启用监听