菜单

定制

相关源文件

本页提供了一份全面的指南,介绍了如何自定义你的 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

来源:readme.md290-302

主题系统

主题系统提供了预定义的颜色集,可以应用于任何卡片。主题在 themes/index.js 文件中定义为具有颜色属性的 JavaScript 对象。

要使用主题,请将 &theme=THEME_NAME 添加到卡片 URL。例如:

https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=radical

GitHub Readme Stats 包含 40 多个内置主题,例如darkradicalmerkogruvboxtokyonight 等等。你可以在themes documentation 中查看所有可用主题。

来源:themes/index.js1-465 readme.md178-194

响应式卡片主题

GitHub Readme Stats 提供了几种创建响应 GitHub 亮色和暗色模式的卡片的方法。

  1. 透明主题:使用 &theme=transparent 创建一个背景透明的卡片,该卡片在亮色和暗色 GitHub 主题中都能良好显示。

  2. 透明背景:使用 &bg_color=00000000 为任何主题的背景添加透明 alpha 通道。

  3. GitHub 主题上下文标签:在图片 URL 的末尾使用 #gh-dark-mode-only#gh-light-mode-only,以根据用户的 GitHub 主题显示不同的卡片。

  4. 媒体查询:使用 HTML 的 <picture> 元素和 prefers-color-scheme 媒体查询,以根据用户的系统主题显示不同的卡片。

来源:readme.md196-283

自定义颜色

你可以通过使用特定的颜色参数来自定义单个颜色,这将覆盖主题颜色。

&title_color=ff6347&text_color=8a2be2&icon_color=4caf50&bg_color=ffffff

颜色应指定为不带 # 前缀的十六进制值。

渐变背景

你可以使用以下格式应用渐变背景:

&bg_color=DEG,COLOR1,COLOR2,COLOR3...COLOR10

其中 DEG 是渐变方向角,而 COLOR1COLOR2 等是渐变中使用的颜色。

来源:readme.md307-311

卡片特定自定义选项

每种卡片类型都有其自己的一组特定自定义选项。

统计卡片选项

参数描述类型默认
hide隐藏特定统计数据逗号分隔值null
hide_title隐藏卡片标题布尔值false
card_width手动设置卡片宽度数字~500px
hide_rank隐藏排名圆圈布尔值false
rank_icon更改排名图标样式githubpercentiledefault默认
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数字的显示格式(shortlong字符串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, pienormal
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

WakaTime 卡片选项

参数描述类型默认
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, percenttime
disable_animations禁用动画布尔值false

来源:readme.md426-437 src/cards/types.d.ts49-59

Gist 卡片选项

参数描述类型默认
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

来源:readme.md151-158

显示额外统计数据

使用 &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

来源:readme.md160-167

自定义语言卡片显示

对于“最常用语言”卡片,你可以

  1. 隐藏特定语言:&hide=javascript,html
  2. 显示更多语言:&langs_count=8
  3. 使用不同的布局:&layout=compact&layout=donut&layout=pie 等。
  4. 隐藏进度条:&hide_progress=true

来源:readme.md539-593

国际化

GitHub Readme Stats 通过 locale 参数支持多种语言。

可用地区包括:

代码本地化代码本地化代码本地化
cn中文it意大利语id印度尼西亚语
zh-tw中文(台湾)ja日语ml马拉雅拉姆语
ar阿拉伯语kr韩语my缅甸语
cs捷克语nl荷兰语skSlovak
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 函数根据主题和覆盖项处理解析最终颜色值的逻辑

  1. 从默认值开始
  2. 如果指定了主题,则应用主题值
  3. 如果指定了单个颜色覆盖项,则应用它们
  4. 验证所有颜色是否为有效的十六进制值
  5. 返回用于渲染的最终颜色集

来源:src/cards/stats-card.js245-255 src/common/utils.js

结论

GitHub Readme Stats 提供了一个强大而灵活的自定义系统,允许您根据 GitHub 个人资料的风格定制卡片的显示和内容。从简单的颜色更改到复杂的主题和布局,该系统提供了许多选项来创建独特且个性化的统计卡片。

有关特定卡片类型及其生成方式的更多信息,请参阅 卡片生成系统 页面。有关部署选项和托管您自己的实例,请参阅 部署指南