GitHub

如何为博客添加 GitHub 的热力贡献图

使用第三方服务接口

适合快速部署，无需开发经验，支持大多数静态博客（Hexo、Hugo、Quarto 等）。

可利用 2016 rshah 大佬提供的 API，其源码在 GitHub 上开源，仓库地址。只需访问链接 https://ghchart.rshah.org/<github - user - name>，将 <github-user-name> 替换为你的 GitHub 用户名，即可获取指定用户的贡献图表。若想选择一个颜色作为主题颜色，例如主题颜色为 26a397，则访问 https://ghchart.rshah.org/26a397/<github-user-name>。
获取链接后，在博客对应的页面代码中，添加 <img src="https://ghchart.rshah.org/<github - user - name>" alt="My Github Chart" width=100% position='relative'> 代码即可，其中 width 等属性可根据需求调整。

使用 Markdown 语法

如果你的博客支持 Markdown 语法，可以直接使用特定链接来显示热力贡献图。格式为
![Contribution Graph](https://github - readme - activity - graph.vercel.app/graph?username=用户名&repo=仓库名&theme=github&area=true&hide_border=true)，将 “用户名” 替换为你的 GitHub 用户名，“仓库名” 替换为你要展示热力图的仓库名称，然后将此 Markdown 代码添加到博客相应位置即可。

如何使用制作 GitHub 徽章

使用 Shields.io 可以快速制作自定义徽章，非常适合放在 GitHub 仓库 README、博客或个人网站中展示项目信息。以下是详细使用方法：

徽章的基础 URL 结构：

https://img.shields.io/badge/[标签]-[内容]-[颜色].svg

核心参数说明

1. 标签（label）：徽章左侧的文字
2. 内容（message）：徽章右侧的文字
3. 颜色（color）：徽章的背景色，支持：

• 预定义颜色名：red、green、blue、yellow 等
• 十六进制色值：如 #ff0000（注意需替换 # 为 %23）

进阶用法

1. 添加图标：通过 ?logo=[图标名] 参数添加图标，支持 GitHub、Python、Docker 等常见图标
2. 链接跳转：在 Markdown 中可将徽章作为链接使用（如示例中注释部分）
3. 动态数据：结合 GitHub API 可制作显示星数、下载量等动态数据的徽章，例如：

https://img.shields.io/github/stars/yourusername/yourrepo.svg

注意事项

• 特殊字符需要 URL 编码（如空格用 %20 表示）
• 可通过 Shields.io 官网 在线生成更复杂的徽章
• 部分参数（如 style=flat-square）可改变徽章样式
• [标签] 和 [内容] 是必须的
  徽章的核心功能是展示「标签 - 内容」的对应关系（例如 License-MIT），缺少任何一个都会导致徽章逻辑不完整。

<!-- 正确示例：包含标签（Language）和内容（JavaScript） -->
<img src="https://shields.io/badge/Language-javascript.svg" alt="JavaScript">

如果只想显示单一文本（如 

<!-- 仅显示内容，标签为空 -->
<img src="https://shields.io/badge/-javascript.svg" alt="JavaScript">