PageLastCommit

了解如何使用 PageLastCommit 组件在文档页面显示最后更新时间、作者和提交信息。

概述

PageLastCommit 组件用于显示当前文档页面的最后更新信息,包括:

  • 更新时间:文件最后一次提交的时间
  • 作者信息:提交者的 GitHub 用户名(可点击跳转)
  • 提交信息:最后一次提交的 commit message(可点击跳转到具体 commit)

该组件已内置于文档页面的页头区域,无需手动添加。

效果展示

组件会在页面描述下方显示类似以下内容:

最后更新于 2025/11/26 14:37mhaibaraai 提交 docs: 完善文档内容并新增模板说明

前置要求

1. GitHub Token 配置

.env 文件中配置 GitHub Personal Access Token:

.env
NUXT_GITHUB_TOKEN=ghp_your_personal_access_token_here
GitHub Token 需要具有读取仓库提交历史的权限(repopublic_repo scope)。

2. GitHub 配置

确保在 app.config.ts 中正确配置了 GitHub 相关信息:

app.config.ts
export default defineAppConfig({
  github: {
    rootDir: 'docs', // 文档所在目录
  }
})

自定义日期格式

通过 dateFormat 配置可以自定义日期显示格式:

app.config.ts
export default defineAppConfig({
  github: {
    rootDir: 'docs',
    dateFormat: {
      locale: 'zh-CN',
      options: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      }
    }
  }
})

常用日期格式示例

配置输出示例
{ year: 'numeric', month: 'short', day: 'numeric' }2025年11月26日
{ year: 'numeric', month: 'numeric', day: 'numeric' }2025/11/26
{ year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }2025/11/26 14:37
{ dateStyle: 'full' }2025年11月26日星期三
{ dateStyle: 'medium', timeStyle: 'short' }2025年11月26日 14:37
dateFormat.options 使用标准的 Intl.DateTimeFormatOptions 配置。

PR Squash Merge 支持

组件智能处理 GitHub 的 PR squash merge 场景:

  • 当检测到提交者是 web-flow(GitHub 自动合并机器人)时
  • 自动解析 commit message 中的 PR 编号(如 #123
  • 获取实际的 PR 作者信息并显示

API

Props

Prop Default Type
stem''string

文件路径(不含扩展名),通常由页面自动传入

extension'md'string

文件扩展名,通常由页面自动传入

showMessagetrueboolean

是否显示提交信息。

showAvatartrueboolean

是否显示作者头像。

Changelog

4e45d — refactor: 重构组件结构和优化代码组织

073a9 — refactor: 优化组件使用 Vue 3 组合式 API 最佳实践

c48bb — refactor: 优化 PageLastCommit 组件实现

b3c3d — feat: 添加页面最后提交信息展示功能

Copyright © 2024 - 2026