Vitepress中自动将文件名作为页面标题的实现方法

在文档站点开发过程中，页面标题的设置是一个常见需求。Vitepress作为Vue生态下的静态站点生成器，提供了灵活的标题配置方式。本文将介绍如何实现自动将Markdown文件名作为页面标题的功能。

传统标题设置方式的局限性

Vitepress默认支持两种设置标题的方式：

1. 在Markdown文件头部使用frontmatter定义title字段
2. 在Markdown内容中使用一级标题(#)

这两种方式都需要手动维护标题信息，当文档数量较多时，会增加维护成本。特别是当文件名本身就能很好地表达文档内容时，重复定义标题显得冗余。

自动标题转换的实现原理

Vitepress提供了transformPageData配置选项，允许我们在构建过程中对页面元数据进行转换。通过这个钩子函数，我们可以访问到每个页面的filePath属性，从中提取文件名作为标题。

核心实现思路是：

1. 获取文件路径
2. 提取文件名部分
3. 去除文件扩展名
4. 将结果赋值给页面标题

具体实现代码

在vitepress.config.ts配置文件中，添加以下代码：

import { defineConfig } from 'vitepress'

export default defineConfig({
  transformPageData(pageData) {
    // 从文件路径中提取文件名并去除.md后缀
    pageData.title = pageData.filePath.split('/').pop()!.replace(/\.md$/, '')
  }
})

这段代码会：

1. 通过split('/')将文件路径分割成数组
2. 使用pop()获取最后一部分（文件名）
3. 使用replace()移除.md后缀
4. 将结果赋给pageData.title

进阶优化建议

对于更复杂的场景，可以考虑以下优化方向：

1. 文件名格式化：将连字符或下划线转换为空格，提高可读性

pageData.title = pageData.filePath
  .split('/')
  .pop()!
  .replace(/\.md$/, '')
  .replace(/[-_]/g, ' ')

2. 首字母大写：提升标题美观度

pageData.title = pageData.title.charAt(0).toUpperCase() + pageData.title.slice(1)

3. 排除特定文件：如README.md等不需要转换的文件

if (!pageData.filePath.endsWith('README.md')) {
  // 转换逻辑
}

注意事项

1. 此方法会覆盖frontmatter中定义的title和Markdown中的一级标题
2. 对于需要特殊命名的页面，建议保留原有的标题设置方式
3. 文件名应尽量语义化，因为它将直接作为页面标题显示

通过这种方式，开发者可以简化文档维护工作，保持标题与文件名的一致性，特别适合文档数量较多且文件名本身具有良好描述性的项目。