如何添加 Git Commit 更新页面和底部信息

2026 年 5 月 14 日

1067 字

5 分钟

本文总阅读量 0 次本文总访客量 0 人

AI Summary

文章介绍了如何在博客中集成Git提交历史展示功能，包括更新日志页面和页脚的提交信息，更新日志页面展示完整的提交历史，支持分页浏览；页脚的提交信息在页面底部显示最新的提交信息，GitHubAPI有速率限制，建议配置Token提升到每小时5000次请求，文章还提供了生成新的Token的方法，以及如何编辑仓库信息、添加代码统计等详细步骤，最后，文章还提到了如何自定义样式和适配主题。

本摘要由AI生成，仅供参考，内容准确性请以原文为准。

功能介绍

本博客集成了 Git 提交历史展示功能，包含两个部分：

更新日志页面 (/diff) - 展示完整的提交历史，支持分页浏览
页脚 Commit 信息 - 在页面底部显示最新的提交信息

配置步骤

1. 配置 GitHub Token（可选但推荐）

GitHub API 有速率限制（未认证每小时 60 次请求），建议配置 Token 提升到每小时 5000 次：

访问 GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
生成新的 Token（不需要特殊权限，只需要 public_repo 或留空即可）
在 .env 文件中添加：

PUBLIC_GITHUB_TOKEN=your_github_token_here

2. 修改配置文件

编辑 src/config.ts，配置你的仓库信息：

export const gitCommitConfig: GitCommitConfig = {
    enable: true,           // 是否启用功能
    repoOwner: "你的用户名",  // GitHub 用户名
    repoName: "你的仓库名",   // 仓库名称
    branch: "main",         // 分支名称
    pageSize: 6,            // 每页显示的提交数量
};

3. 添加更新日志页面

创建 src/pages/diff.astro（或 [...locale]/diff.astro 用于多语言）：

---
import MainPageLayout from '@layouts/MainPageLayout.astro'
import Cover from '@components/Cover.astro'
import { siteConfig, profileConfig, gitCommitConfig } from '@/config'
import { getCommitHistory } from '@/utils/git-info';

const allCommits = gitCommitConfig.enable ? await getCommitHistory(100) : [];
---

<MainPageLayout title="更新日志">
  <Cover title="更新日志" subTitle="记录每一次更新"/>
  <!-- 页面内容 -->
</MainPageLayout>

4. 在页脚添加 Commit 信息

修改 src/components/Footer.astro，添加以下代码：

---
import { gitCommitConfig } from '@/config'
import { getLatestCommit, formatDate } from '@/utils/git-info'

const latestCommit = gitCommitConfig.enable ? await getLatestCommit() : null
---

{latestCommit && (
  <div class="git-commit-info">
    <a href={`https://github.com/${gitCommitConfig.repoOwner}/${gitCommitConfig.repoName}/commit/${latestCommit.sha}`} target="_blank">
      <span>{latestCommit.shortSha}</span>
      <span>{latestCommit.message.split('\n')[0]}</span>
      <span>{formatDate(latestCommit.date)}</span>
    </a>
  </div>
)}

功能特性

更新日志页面

✅ 分页浏览 - 每页显示 6 条提交（可配置）
✅ 文件变更详情 - 显示每个提交的文件改动
✅ 状态标识 - A(新增)、D(删除)、M(修改)、R(重命名)
✅ 代码统计 - 显示增删行数和文件数量
✅ 明暗模式适配 - 自动适配博客主题
✅ 响应式设计 - 支持移动端浏览

页脚信息

✅ 显示最新提交的简短 SHA
✅ 显示提交信息摘要
✅ 显示提交时间
✅ 点击跳转到 GitHub 提交详情

类型定义

如需在其他地方使用相关类型，可以参考：

// src/types/config.ts
type GitCommitConfig = {
  enable: boolean;
  repoOwner: string;
  repoName: string;
  branch: string;
  pageSize: number;
};

// src/utils/git-info.ts
interface CommitInfo {
  sha: string;
  shortSha: string;
  message: string;
  author: string;
  date: string;
  totalAdditions: number;
  totalDeletions: number;
  files: FileChange[];
}

interface FileChange {
  filename: string;
  status: 'added' | 'removed' | 'modified' | 'renamed';
  additions: number;
  deletions: number;
  changes: number;
  blob_url: string;
}

常见问题

页面显示 "暂时无法加载更新记录"

可能是 GitHub API 速率限制导致。解决方案：

配置 PUBLIC_GITHUB_TOKEN 提升限额
等待一段时间后刷新页面

如何修改每页显示的提交数量？

修改 src/config.ts 中的 pageSize 值：

pageSize: 10, // 改为每页 10 条

如何禁用这个功能？

将 enable 设为 false：

enable: false,

支持私有仓库吗？

支持。需要在 GitHub Token 中添加 repo 权限，并在配置中正确设置仓库信息。

样式自定义

更新日志页面使用 CSS 变量适配主题，主要变量：

--card-color          /* 卡片背景色 */
--button-border-color /* 边框颜色 */
--button-hover-color  /* 悬停背景色 */
--link-color          /* 链接颜色 */
--text-color          /* 主文字颜色 */
--text-color-70       /* 次要文字颜色 */
--text-color-50       /* 辅助文字颜色 */