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 等属性可根据需求调整。

Github chart

使用 Markdown 语法

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

Hexo 博客使用插件：
若你的博客是基于 Hexo 搭建的，可以使用 @barry - flynn/hexo - github - calendar 插件。首先在 Hexo 项目根目录执行命令 npm i @barry - flynn/hexo - github - calendar 安装插件。然后在站点配置文件 _config.yml 最后面添加配置：

# hexo - github - canlendar 
githubcalendar:
enable: true 
enable_page: / 
user: 你的GitHub用户名
layout:
githubcalendar_html: '<div class="recent - post - item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable - background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
pc_minheight: 280px
color: "('#ebedf0', '#a2f7af', '#6ce480', '#54ad63', '#469252', '#31753c', '#1f5f2a', '#13531f', '#084111', '#032b09', '#000000')"
api: https://github - calendar - api.meta - code.top/api
calendar_js: https://cdn.jsdelivr.net/gh/barry - flynn/hexo - github - calendar/hexo_githubcalendar.js
plus_style: ""

保存配置后，重新生成并启动 Hexo 博客，即可看到热力贡献图。

如何使用制作 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">

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

DataviewJS error: SyntaxError: Unexpected token '<'
 占位）：

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