本页提供了一份全面的指南,介绍了如何自定义你的 GitHub Readme Stats 卡片。GitHub Readme Stats 提供了丰富的自定义选项,允许你通过 URL 参数个性化所有卡片的样式和内容。有关特定卡片类型及其生成的信息,请参阅卡片生成系统。
GitHub Readme Stats 允许通过 URL 查询参数进行自定义。当你将这些参数添加到卡片 URL 时,它们会修改卡片的显示方式和显示的数据。
来源:src/cards/stats-card.js20-450
以下参数可用于所有卡片类型
| 参数 | 描述 | 类型 | 默认 |
|---|---|---|---|
title_color | 卡片标题颜色 | 十六进制颜色(不含 #) | 2f80ed |
text_color | 正文文本颜色 | 十六进制颜色(不含 #) | 434d58 |
icon_color | 图标颜色 | 十六进制颜色(不含 #) | 4c71f2 |
border_color | 卡片边框颜色 | 十六进制颜色(不含 #) | e4e2e2 |
bg_color | 卡片背景颜色 | 十六进制颜色或渐变 | fffefe |
hide_border | 隐藏卡片边框 | 布尔值 | false |
theme | 主题名称 | 主题名称 | 默认 |
cache_seconds | 设置缓存头 | 整数 | 21600 |
locale | 设置卡片中的语言 | 地区代码 | en |
border_radius | 卡片的圆角 | 数字 | 4.5 |
主题系统提供了预定义的颜色集,可以应用于任何卡片。主题在 themes/index.js 文件中定义为具有颜色属性的 JavaScript 对象。
要使用主题,请将 &theme=THEME_NAME 添加到卡片 URL。例如:
https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=radical
GitHub Readme Stats 包含 40 多个内置主题,例如dark、radical、merko、gruvbox、tokyonight 等等。你可以在themes documentation 中查看所有可用主题。
来源:themes/index.js1-465 readme.md178-194
GitHub Readme Stats 提供了几种创建响应 GitHub 亮色和暗色模式的卡片的方法。
透明主题:使用 &theme=transparent 创建一个背景透明的卡片,该卡片在亮色和暗色 GitHub 主题中都能良好显示。
透明背景:使用 &bg_color=00000000 为任何主题的背景添加透明 alpha 通道。
GitHub 主题上下文标签:在图片 URL 的末尾使用 #gh-dark-mode-only 或 #gh-light-mode-only,以根据用户的 GitHub 主题显示不同的卡片。
媒体查询:使用 HTML 的 <picture> 元素和 prefers-color-scheme 媒体查询,以根据用户的系统主题显示不同的卡片。
你可以通过使用特定的颜色参数来自定义单个颜色,这将覆盖主题颜色。
&title_color=ff6347&text_color=8a2be2&icon_color=4caf50&bg_color=ffffff
颜色应指定为不带 # 前缀的十六进制值。
你可以使用以下格式应用渐变背景:
&bg_color=DEG,COLOR1,COLOR2,COLOR3...COLOR10
其中 DEG 是渐变方向角,而 COLOR1、COLOR2 等是渐变中使用的颜色。
每种卡片类型都有其自己的一组特定自定义选项。
| 参数 | 描述 | 类型 | 默认 |
|---|---|---|---|
hide | 隐藏特定统计数据 | 逗号分隔值 | null |
hide_title | 隐藏卡片标题 | 布尔值 | false |
card_width | 手动设置卡片宽度 | 数字 | ~500px |
hide_rank | 隐藏排名圆圈 | 布尔值 | false |
rank_icon | 更改排名图标样式 | github、percentile 或 default | 默认 |
show_icons | 显示统计数据的图标 | 布尔值 | false |
include_all_commits | 计算总提交次数,而非仅当前年份 | 布尔值 | false |
line_height | 设置文本行之间的行高 | 数字 | 25 |
exclude_repo | 排除指定存储库 | 逗号分隔值 | null |
custom_title | 设置自定义标题 | 字符串 | <username> GitHub 统计 |
text_bold | 使用粗体文本 | 布尔值 | true |
disable_animations | 禁用动画 | 布尔值 | false |
ring_color | 排名圆圈的颜色 | 十六进制颜色(不含 #) | 2f80ed |
number_format | 数字的显示格式(short 或 long) | 字符串 | short |
show | 显示额外的统计数据 | 逗号分隔值 | null |
来源:readme.md368-385 src/cards/types.d.ts16-31
| 参数 | 描述 | 类型 | 默认 |
|---|---|---|---|
show_owner | 显示存储库的拥有者名称 | 布尔值 | false |
description_lines_count | 设置描述行数(1-3) | 数字 | null |
来源:readme.md391-396 src/cards/types.d.ts33-36
| 参数 | 描述 | 类型 | 默认 |
|---|---|---|---|
hide | 隐藏指定的语言 | 逗号分隔值 | null |
hide_title | 隐藏卡片标题 | 布尔值 | false |
layout | 卡片布局风格 | normal, compact, donut, donut-vertical, pie | normal |
card_width | 手动设置卡片宽度 | 数字 | 300 |
langs_count | 要显示的语言数量 | number (1-20) | 5/6 |
exclude_repo | 排除指定存储库 | 逗号分隔值 | null |
custom_title | 设置自定义标题 | 字符串 | 最常用语言 |
disable_animations | 禁用动画 | 布尔值 | false |
hide_progress | 隐藏百分比和条形图 | 布尔值 | false |
size_weight | 语言大小在算法中的权重 | 数字 | 1 |
count_weight | 存储库计数在算法中的权重 | 数字 | 0 |
来源:readme.md404-418 src/cards/types.d.ts38-47
| 参数 | 描述 | 类型 | 默认 |
|---|---|---|---|
hide | 隐藏指定的语言 | 逗号分隔值 | null |
hide_title | 隐藏卡片标题 | 布尔值 | false |
line_height | 设置行高 | 数字 | 25 |
hide_progress | 隐藏进度条和百分比 | 布尔值 | false |
custom_title | 设置自定义标题 | 字符串 | WakaTime 统计 |
layout | 卡片布局风格 | default, compact | 默认 |
langs_count | 限制语言数量 | 数字 | null |
api_domain | 设置自定义 API 域名 | 字符串 | wakatime.com |
display_format | 统计数据显示格式 | time, percent | time |
disable_animations | 禁用动画 | 布尔值 | false |
来源:readme.md426-437 src/cards/types.d.ts49-59
| 参数 | 描述 | 类型 | 默认 |
|---|---|---|---|
show_owner | 显示 gist 的拥有者名称 | 布尔值 | false |
来源:readme.md398-401 src/cards/types.d.ts61-63
GitHub Readme Stats 提供了隐藏特定元素或显示额外数据的选项。
使用 &hide= 参数,并用逗号分隔的值来隐藏特定统计数据。
&hide=stars,commits,prs,issues,contribs
例如:https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,prs
使用 &show= 参数,并用逗号分隔的值来显示额外统计数据。
&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage
例如:https://github-readme-stats.vercel.app/api?username=anuraghazra&show=reviews,prs_merged
对于“最常用语言”卡片,你可以
&hide=javascript,html&langs_count=8&layout=compact、&layout=donut、&layout=pie 等。&hide_progress=trueGitHub Readme Stats 通过 locale 参数支持多种语言。
可用地区包括:
| 代码 | 本地化 | 代码 | 本地化 | 代码 | 本地化 | ||
|---|---|---|---|---|---|---|---|
cn | 中文 | it | 意大利语 | id | 印度尼西亚语 | ||
zh-tw | 中文(台湾) | ja | 日语 | ml | 马拉雅拉姆语 | ||
ar | 阿拉伯语 | kr | 韩语 | my | 缅甸语 | ||
cs | 捷克语 | nl | 荷兰语 | sk | Slovak | ||
de | 德语 | pt-pt | 葡萄牙语(葡萄牙) | tr | 土耳其语 | ||
en | 英语 | pt-br | 葡萄牙语(巴西) | pl | 波兰语 | ||
bn | 孟加拉语 | np | 尼泊尔语 | uz | 乌兹别克语 | ||
es | 西班牙语 | el | 希腊语 | vi | 越南语 | ||
fr | 法语 | ru | 俄语 | se | 瑞典语 | ||
hu | 匈牙利语 | uk-ua | 乌克兰语 |
例如:https://github-readme-stats.vercel.app/api?username=anuraghazra&locale=fr
来源:src/translations.js1-732 readme.md313-365
以下是一些组合多个自定义选项的示例
https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&title_color=ff6347&icon_color=79ff97&text_color=9f9f9f&bg_color=151515
https://github-readme-stats.vercel.app/api?username=anuraghazra&bg_color=30,e96443,904e95&title_color=fff&text_color=fff
https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact&langs_count=8
https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&theme=dracula
您可以使用 HTML 将多个卡片并排放在您的 README 中
来源:readme.md716-736 readme.md675-704
GitHub Readme Stats 中的自定义系统按特定顺序处理选项
代码库中的 getCardColors 函数根据主题和覆盖项处理解析最终颜色值的逻辑
来源:src/cards/stats-card.js245-255 src/common/utils.js
GitHub Readme Stats 提供了一个强大而灵活的自定义系统,允许您根据 GitHub 个人资料的风格定制卡片的显示和内容。从简单的颜色更改到复杂的主题和布局,该系统提供了许多选项来创建独特且个性化的统计卡片。