Github主页美化-基础构建

Github主页美化

​ 默认github主页为清一色的标签页和图表展示，偶然间逛github主页的时候总会发现一些惊喜的页面，于是就搜索并参考相关内容自己调整一下（不定时完善，看到好玩的内容就会尝试），在这个过程中不仅可以根据自身需要定制化主页以满足强迫症调调，还可在这个过程中探索到许多好玩的扩展和应用，例如常见的github基本操作、Github Actions、Python爬取并处理数据、个人博客信息嵌入、社交信息引用等等，但不管基于何种目的都是希望学有所得、学有所获并学以致用~

DIY Github主页

个人主页初始化

​ 创建一个public仓库：与自身github用户名同名并添加README.md文件。仓库创建完成则可在主页访问相应内容

​ 可通过编辑README.md文件diy主页内容，此处可参考 Awesome-Profile-README-templates，里面收录了各式各样的github主页可供参考。此外github上一些开源的公共仓库也收录了不同的主页作者信息例如awesome-github-profile-readme，awesome-github-profiles。在awesome-github-profile-readme仓库还可查看相关Tools，根据自身需求引用相关工具个性化定制Github仓库

美化参考内容

• 动态GitHub Readme Stats：支持展示Github基本信息、编码语言分布、仓库信息，中文文档参考
• GitHub Readme Activity Graph （GitHub 活动统计图）
• GitHub Profile Trophy（GitHub资料奖杯）
• BADGE-图徽（shields.io）
• Metrics信息统计（GitHub 信息统计）：信息统计一般借助第三方服务提供计数，也可自行搭建
• 社交统计：一些流行社交平台的数据统计（知乎、B站、LeetCode、掘金、牛客、CSDN、Github等）
• GitHub Readme streak Stats（GitHub 连续打卡）
• GraphQL API：GitHub官方提供的API调用文档说明
• 个人博客信息、社交平台信息爬取：可使用RSS进行跟踪，解析xml文件随后自定义格式处理
• 编程&游戏时长统计：涉及Github Action、Wakatime平台机制（待完善）

参考配置

​ 此处大部分以markdown格式进行说明，针对html格式转化无非就是通过html引用img标签显示图片信息，简单说明两种方式参考

参考配置说明

• html语法
• markdown语法

# html语法
<div align="center">
    <img height="137px" src="url链接"/>
</div>

# markdown语法
![图片说明](图片链接URL)

# 或者在图片基础上嵌套URL链接跳转
[![图片说明](图片链接URL)](跳转URL)

GitHub Readme Stats

​ 访问GitHub Readme Stats，查看官方引用说明进行指定，参考中文文档。

GitHub Readme Stats统计

• 统计卡片
• Repo卡片
• 热门语言卡片
• 卡片自定义

![username's GitHub stats](https://github-readme-stats.vercel.app/api?username=xxx)

语法规则

• 隐藏指定统计：可自定义选择拼接参数&hide=stars,commits,prs,issues,contribs
• 将私人项目贡献添加到总提交计数中：拼接参数?count_private=true（自己部署项目的话私人贡献默认会被计数）
• 图标显示：拼接参数&show_icons=true
• 主题：可依赖现有主题进行卡片个性化，现有主题参考：dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula。或者可以通过设定参数配置手动自定义

​ GitHub 更多置顶允许在使用 GitHub readme profile 时，在个人资料中置顶多于 6 个 repo 。可限定show_owner变量指定用户名字

• 参数：username=xxx&repo=xxx

![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=xxx&repo=xxx)

• 参数：api/top-langs?username=xxx

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs?username=xxx)

语法规则

• 隐藏指定语言：?hide=language1,language2
• 紧凑的语言卡片布局：&layout=compact

​ 可通过自定义URL参数配置为Stats Card或者Repo Card自定义样式

常用选项：

• title_color - 卡片标题颜色 （十六进制色码）
• text_color - 内容文本颜色 （十六进制色码）
• icon_color - 图标颜色（如果可用）（十六进制色码）
• bg_color - 卡片背景颜色 （十六进制色码） 或者 以 angle,start,end 的形式渐变（&bg_color=DEG,COLOR1,COLOR2,COLOR3…COLOR10）
• hide_border - 隐藏卡的边框 (布尔值)
• theme - 主题名称，从所有可用主题中选择
• cache_seconds - 手动设置缓存头 （最小值: 1800，最大值: 86400）
• locale - 在卡片中设置语言 (例如 cn, de, es, 等等)

统计卡片专属选项：

• hide - 隐藏特定统计信息 (以逗号分隔)
• hide_title - (boolean)
• hide_rank - (boolean)
• show_icons - (boolean)
• include_all_commits - 统计总提交次数而不是仅统计今年的提交次数 (boolean)
• count_private - 统计私人提交 (boolean)
• line_height - 设置文本之间的行高 (number)

Repo卡片专属选项：

• show_owner - 显示 Repo 的所有者名字 (boolean)

语言卡片专属选项：

• hide - 从卡片中隐藏指定语言 (Comma seperated values)
• hide_title - (boolean)
• layout - 在两个可用布局 default & compact 间切换
• card_width - 手动设置卡片的宽度 (number)

​ 正如作者所述，github API每小时只允许5k次请求，因此使用其提供的API可能有访问限制，因此可以自行部署在自己的Vercel服务器上，参考部署

GitHub Readme Activity Graph

[GitHub Readme Activity Graph]

​ GitHub Readme Activity Graph （GitHub 活动统计图）

• markdown语法
• 参数配置说明

​ 显示过去31天的Github活动情况

![username's github activity graph](https://activity-graph.herokuapp.com/graph?username=Ashutosh00710&theme=dracula)

GitHub Profile Trophy

[GitHub Profile Trophy（GitHub资料奖杯）]

​ GitHub Profile Trophy（GitHub资料奖杯）

• markdown语法
• 其他配置

![trophy](https://github-profile-trophy.vercel.app/?username=xxx)

• 通过title指定显示的内容：&title=Stars,Followers
• 通过rank过滤指定内容：&rank=S,AAA
• 设定行和列的大小：&row=2&column=3
• 主题设定：&theme=flat （可用主题参考官方提供）
• 边缘间隔：margin-w=15（宽度间隔）、margin-h=15（高度间隔）
• 透明背景：Transparent background：&no-bg=true

shields.io

[BADGE-图徽（shields.io）]

​ BADGE-图徽（shields.io）

• 静态徽章图标生成
• 动态统计徽章图标生成

# 参考URL（logo可指定图标内容）
![](https://img.shields.io/badge/-Java-yellow?style=flat-square&logo=java)

Metrics信息统计

[metrics]

• 数据生成

​ 访问metrics网站，输入github用户名，生成统计数据，并通过指定语法进行引用

社交统计

[社交统计]

• markdown语法

![](https://stats.justsong.cn/api/github?username=xxx&theme=dark)

语法规则

• 不同网站支持（api/网站代码）：github、zhihu、B站、LeetCode英文站、LeetCode中文站、掘金、CSDN、牛客

GitHub Readme streak Stats

[GitHub Readme streak Stats（GitHub 连续打卡）]

​ GitHub Readme streak Stats（GitHub 连续打卡）

• markdown语法
• 自助配置

![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=username)

• 主题可选：default、dark、highcontrast等参考官方文档说明

​ 可访问 GitHub Readme Streak Stats 配置网页，自由配置样式

GraphQL API

[GraphQL API]

​ GraphQL API为开发者提供了一个Explorer工具，可以授予Github账号相关权限便于请求API，通过侧边栏搜索API文档内容

​ 此处通过graphqlclient结合工作流进行操作，参考文章内容