---
title: "PageLastCommit"
description: "PageLastCommit 在文档页面标题下方自动显示最后更新时间、提交作者和 commit message，支持 PR squash merge 场景下的自动作者识别。需配置 NUXT_GITHUB_TOKEN 和 github.rootDir，支持 Intl.DateTimeFormatOptions 自定义日期格式。"
seo_title: "PageLastCommit"
seo_description: "Show the latest GitHub commit details on Movk Nuxt Docs pages, including update time, author detection, commit message, and date formatting."
canonical_url: "https://docs.mhaibaraai.cn/docs/components/page-last-commit"
---
# PageLastCommit

> PageLastCommit 在文档页面标题下方自动显示最后更新时间、提交作者和 commit message，支持 PR squash merge 场景下的自动作者识别。需配置 NUXT\_GITHUB\_TOKEN 和 github.rootDir，支持 Intl.DateTimeFormatOptions 自定义日期格式。

## 概述

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

- **更新时间**：文件最后一次提交的时间
- **作者信息**：提交者的 GitHub 用户名（可点击跳转）
- **提交信息**：最后一次提交的 commit message（可点击跳转到具体 commit）

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

## 效果展示

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

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

## 前置要求

### 1\. GitHub Token 配置

在 `.env` 文件中配置 GitHub Personal Access Token：

```bash [.env]
NUXT_GITHUB_TOKEN=ghp_your_personal_access_token_here
```

> \[\!WARNING\]
> See: https://github.com/settings/tokens
> 
> GitHub Token 需要具有读取仓库提交历史的权限（
> 
> repo
> 
>  或 
> 
> public\_repo
> 
>  scope）。

### 2\. GitHub 配置

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

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

## 自定义日期格式

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

```ts [app/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 |

> \[\!TIP\]
> 
> dateFormat.options
> 
>  使用标准的 
> 
> Intl.DateTimeFormatOptions
> 
>  配置。

## PR Squash Merge 支持

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

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

## API

### Props

```ts
/**
 * Props for the PageLastCommit component
 */
interface PageLastCommitProps {
  /**
   * 文件路径（不含扩展名），通常由页面自动传入
   */
  stem: string;
  /**
   * 文件扩展名，通常由页面自动传入
   */
  extension: string;
  /**
   * 是否显示提交信息。
   * @default "true"
   */
  showMessage?: boolean | undefined;
  /**
   * 是否显示作者头像。
   * @default "true"
   */
  showAvatar?: boolean | undefined;
}
```

## 相关

- [CommitChangelog](/docs/components/commit-changelog) — 展示组件的完整 Git 提交时间线

## Changelog

See commit history for [layer/app/components/content/PageLastCommit.vue](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/app/components/content/PageLastCommit.vue).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.