Github主页美化-基础构建

2022-08-30 12:49:32 浏览数 (1)

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语法
代码语言：javascript复制
# html语法
<div align="center">
    <img height="137px" src="url链接"/>
</div>
代码语言：javascript复制
# markdown语法
![图片说明](图片链接URL)

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

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

GitHub Readme Stats统计

  • 统计卡片
  • Repo卡片
  • 热门语言卡片
  • 卡片自定义
代码语言：javascript复制
![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
代码语言：javascript复制
![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=xxx&repo=xxx)
  • 参数：api/top-langs?username=xxx
代码语言：javascript复制
![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活动情况

代码语言：javascript复制
![username's github activity graph](https://activity-graph.herokuapp.com/graph?username=Ashutosh00710&theme=dracula)

Arguments

Description

Type of Value

bg_color

card’s background color

hex code (without #)

color

graph card’s text color

hex code (without #)

line

graph’s line color

hex code (without #)

point

color of points on line graph

hex code (without #)

area_color

color of the area under the graph

hex code (without #)

area

shows area under the graph

boolean (default: false)

hide_border

makes the border of the graph transparent

boolean (default: false)

hide_title

sets the title to an empty string

boolean (default: false)

custom_title

set the title to any string

string

theme

name of available themesDefault (cotton candy)、react-dark、github、xcode、rogue

string

GitHub Profile Trophy

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

​ GitHub Profile Trophy（GitHub资料奖杯）

  • markdown语法
  • 其他配置
代码语言：javascript复制
![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）

  • 静态徽章图标生成
  • 动态统计徽章图标生成
代码语言：javascript复制
# 参考URL（logo可指定图标内容）
![](https://img.shields.io/badge/-Java-yellow?style=flat-square&logo=java)
Metrics信息统计

[metrics]

  • 数据生成

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

社交统计

[社交统计]

  • markdown语法
代码语言：javascript复制
![](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语法
  • 自助配置
代码语言：javascript复制
![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结合工作流进行操作，参考文章内容

github git 开源 api markdown

0 人点赞