个人博客自建指南（5.1 番外）：文章信息标准化 —— SEO 模板与作者时间组件

前言

第5篇我们把 VitePress 主题调成了自己喜欢的风格，博客看起来像那么回事了。但写着写着发现一个问题：每篇文章都要手写作者名、手敲发布日期、手动对齐文末落款的格式。

刚开始还好，写到第三篇就开始烦了。尤其是日期——写的时候是 2026 年 8 月 6 日 10:50，如果后来改稿忘了同步文末的时间，就会出现 Front Matter 和正文落款对不上的尴尬。

这篇来解决这个问题。目标很简单：作者名、发布日期、SEO 描述，只写在 Front Matter 里，其他地方自动读取、自动渲染。 以后写新文章，只填数据，不管展示。

一、问题拆解

写一篇博客文章时，有几样信息是每篇都需要的：

信息	当前做法	痛点
作者名	文末手写 `阶进遐`	每篇都要敲，漏了不一致
发布日期	Front Matter 写一次，文末再手写一次	两处维护，容易不同步
SEO 描述	想起来才写，格式不统一	搜索引擎抓取效果不稳定
文末落款	手动对齐格式	各篇风格可能跑偏

理想的方案是：Front Matter 管数据，主题组件管展示，正文只写内容。

二、方案选择

方案	优点	缺点	推荐度
每篇手写作者和日期	零配置	重复劳动，易出错	❌
Front Matter 写数据 + 自定义组件自动渲染	一次配置，永久复用	需要写一段 Vue 组件	✅ 推荐
用第三方 SEO 插件	功能全面	增加依赖，配置复杂	⚠️ 可选

VitePress 本身提供了自定义主题插槽的能力，我们只需要写一个小组件，挂在 doc-footer-before 插槽上，就能在所有文章底部自动显示作者和日期。

三、操作步骤

1. 规范 Front Matter 模板

以后每篇文章的开头，统一写成这样：

yaml

---
title: 个人博客自建指南（5.1 番外）：文章信息标准化 —— SEO 模板与作者时间组件
date: 2026-08-06 10:55
author: 阶进遐
description: 阶进遐详解 VitePress 博客文章信息标准化方案：规范 Front Matter 模板、自定义 AuthorDate 组件自动渲染作者与发布日期、全局注入 SEO meta 标签。一次配置，永久复用，告别手写落款与日期不同步。
head:
  - - meta
    - name: author
      content: 阶进遐
---

各字段说明：

字段	必填	作用
`title`	是	文章标题，也是浏览器标签栏和搜索引擎显示的标题
`date`	推荐	发布日期，格式 `YYYY-MM-DD HH:mm`，影响文章排序，组件会读取并展示
`author`	推荐	作者名，自定义字段，组件会读取并展示
`description`	推荐	SEO 描述，搜索引擎结果中显示的摘要
`head`	可选	注入额外的 `<meta>` 标签，这里是告诉搜索引擎作者是谁

如果你觉得每篇写 head 太啰嗦，也可以在 VitePress 配置文件中统一注入作者 meta，这样所有文章自动带上，不用每篇手写。具体见下文“进阶优化”。

2. 创建作者日期组件

在 .vitepress/theme/components/ 目录下新建 AuthorDate.vue：

vue

<!-- .vitepress/theme/components/AuthorDate.vue -->

<template>
  <div v-if="page.frontmatter.date && page.frontmatter.author" class="author-date">
    <p class="signature">
      <span v-if="page.frontmatter.author">{{ page.frontmatter.author }}</span>
      <span v-if="page.frontmatter.date && page.frontmatter.author"> · </span>
      <span v-if="page.frontmatter.date">{{ formatDate(page.frontmatter.date) }}</span>
    </p>
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'

const { page } = useData()

function formatDate(date: string | Date): string {
  const d = new Date(date)
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hh = String(d.getHours()).padStart(2, '0')
  const mm = String(d.getMinutes()).padStart(2, '0')
  return `${y} 年 ${m} 月 ${day} 日 ${hh}:${mm}`
}
</script>

<style scoped>
.author-date {
  border-top: 1px solid var(--vp-c-divider);
  padding: 24px 0;
}

.signature {
  text-align: center;
  color: var(--vp-c-text-2);
  font-size: 14px;
}
</style>

这个组件做的事情很简单：

读取当前文章的 Front Matter 数据
如果有 author 和 date，就渲染成“作者 · 日期”的格式
日期自动格式化为 2026 年 07 月 25 日 20:31 的中文格式

3. 注册组件到主题

编辑 .vitepress/theme/index.ts：

typescript

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'
import AuthorDate from './components/AuthorDate.vue'

export default {
  extends: DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      // 在文章内容下方插入组件 (文末导航前)
      'doc-footer-before': () => h('div', [
        // 署名日期组件
        h(AuthorDate),

        // 未来其他组件...
      ]),
    })
  },
}

如果你是第一次创建这个文件，目录结构是这样的：

.vitepress/
├── theme/
│   ├── index.ts          # 主题入口
│   └── components/
│       └── AuthorDate.vue # 作者日期组件

如果需要了解默认主题布局源码情况，可以参考如下目录

jiejinx-blog/node_modules/vitepress/dist/client/theme-default/
├── Layout.vue           # 默认主题布局组件，包含各种 slot 插槽
├── NotFound.vue         # 404 页面组件
├── index.js             # 主题入口/导出
├── index.d.ts           # 类型声明
├── shared.js            # 共享逻辑
├── without-fonts.js     # 不含默认字体的入口变体
├── components/           # 默认主题用到的 Vue 组件
├── composables/         # 组合式函数 / 状态逻辑
├── fonts/                # 默认字体资源
├── styles/               # 默认样式
└── support/              # 兼容/支持相关逻辑

它适合用来参考 Layout.vue、各种 components、插槽名和默认样式；但真正要改博客行为时，一般不要在 node_modules 里直接改，而是在项目自己的 .vitepress/theme/index.ts 或 .vitepress/theme/Layout.vue 里扩展/覆盖。

4. 验证效果

找一篇已有的文章，确保 Front Matter 里有 author 和 date
启动本地预览：pnpm run docs:dev
打开文章，滚动到底部，应该看到：

阶进遐 · 2026 年 07 月 25 日 20:31

检查浏览器标签栏，确认 title 正确显示
右键查看网页源代码，搜索 description，确认 SEO 描述已注入

如果都正常，说明配置生效。

四、进阶优化

1. 全局注入作者 meta

如果你不想每篇文章都写 head 那段，可以在 VitePress 配置文件中统一注入：

typescript

// .vitepress/config.ts

export default defineConfig({
  // ... 其他配置
  head: [
    ['meta', { name: 'author', content: '阶进遐' }],
  ],
})

这样所有页面都会带上 <meta name="author" content="阶进遐">，不需要每篇单独写。

2. 只在部分文章显示落款

如果你希望某些文章不显示作者日期（比如转载、公告类），那么在不想显示的文章 Front Matter 里不写 author、 date 属性即可。

3. 自定义日期格式

formatDate 函数里的输出格式可以按喜好调整：

// 简洁版：2026-07-25
return `${y}-${m}-${day}`

// 完整版：2026年7月25日 20:31
return `${y} 年 ${m} 月 ${day} 日 ${hh}:${mm}`

// ISO 版：2026-07-25T20:31
return `${y}-${m}-${day}T${hh}:${mm}`

五、验证清单

部署上线后，建议检查以下几项：

检查项	方法	预期结果
文章底部落款	打开任意文章，滚动到底部	显示“作者 · 日期”
搜索引擎描述	右键查看源代码，搜 `description`	显示 Front Matter 中写的描述
作者 meta	右键查看源代码，搜 `name="author"`	显示“阶进遐”
标题显示	看浏览器标签栏	显示文章标题
日期一致性	对比 Front Matter 和文末日期	完全一致

小结

这篇我们做了三件事：

步骤	说明
规范 Front Matter 模板	title / date / author / description / head 统一填写
创建 AuthorDate 组件	自动读取 Front Matter，渲染作者和日期
注册到主题插槽	挂在 doc-after 上，所有文章底部自动显示

从此写新文章，只需要在 Front Matter 里填好数据，正文只管写内容。作者名、日期、SEO 描述都由组件和配置自动处理，不再需要手写文末落款，也不再担心日期不同步。

结合第5篇的主题微调，你的博客现在既有好看的外壳，又有标准化的信息结构。

个人博客自建指南（5.1 番外）：文章信息标准化 —— SEO 模板与作者时间组件 ​

前言 ​

一、问题拆解 ​

二、方案选择 ​

三、操作步骤 ​

1. 规范 Front Matter 模板 ​

2. 创建作者日期组件 ​

3. 注册组件到主题 ​

4. 验证效果 ​

四、进阶优化 ​

1. 全局注入作者 meta ​

2. 只在部分文章显示落款 ​

3. 自定义日期格式 ​

五、验证清单 ​

小结 ​