Github Profile 用于展示个人的一些成果,把 Markdown 转换为 HTML 渲染在个人主页上,并且高度支持自定义。
话不多说,先展示两个酷炫的主页。
如果你也想拥有这样酷炫主页,继续往下看
可以参照Profile 官方文档[1],建一个和用户名同名的仓库,在仓库中编辑 文件就可以了。
接下来
markdown 支持两种添加图片的方式
可以合理使用 gif 让主页更酷炫
1. GitHub 数据统计[2]
根据你的用户名,获取并直观展示 Github 贡献数据。根据提交数、贡献数、issue 数量、star 数量、PR 数量等计算出一个等级值。
2. GitHub 统计奖杯[3]
统计你的 Github 数据,评估各分项等级并以奖杯的形式展示,最高级 SSS,并有一个的彩蛋。
3. Badge(徽章)[4]
推荐大家直接利用 shield.io[5] 做徽章自定义,能力非常强大,大部分开源项目 README 里的 badge 都是通过此网站生成的。
也可以直接白嫖markdown-badges [6],有许多现成的 badge。
4. Views Counter(访问数量)[7]
使用免费的微服务,来统计你的 GitHub Profile 被查看了多少次。
5. Dev Metrics(开发指标)[8]
在你的 Github Profile 上以酷炫可视化的方式展示一些开发指标。支持 。
后面会使用「在 Profile 中展示自己的关注者」这一示例,来解析动态更新的原理及源码实现。
要使得 能动态更新,其核心原理是「数据获取」和「展示」两部分。
目前有两种方案:
关于 Github Action 入门,推荐阅读 GitHub Actions 入门教程- 阮一峰的网络日志[9]
这里分享一个利用 Github Acton 实现 Profile 动态更新的实践:
「在 Profile 中展示自己的关注者」
这两行将会作为 followers 块的插入点
首先获取 followers 块之前及之后的部分 和 ,因为他们不会更新,所以先将他们暂存起来,方便后续拼接还原。
接着使用环境变量中的 利用 获取到关注者数据。(「环境变量会在后面的步骤中使用 Github Action 注入」)
使用获取到的数据构造展示关注者的视图代码,最终拼接上 和 ,得到新的 README,写入文件。
3.在仓库下创建一个 Github Action 的 workflow,注入环境变量,定时执行上面的代码
首先你需要生成一个 Github Token[10],用于 Github API。
在 Profile 仓库的中添加你生成的 Github Token。
接着在仓库下创建 Github Action 文件
大功告成!
附上动态更新关注者-仓库源码[11]
「与头像联动」
「与作者互动,可以提 MR 帮他落好棋」
「递归」
「社区也有站点收集了一些有创意的主页」
当然,如果你觉得上面的步骤太繁琐,这里也提供一个社区制作的Profile 在线制作网站[14],只需要输入一些基础信息就能一键得到 README 代码,拷贝保存就完事。
如果你在发布 Profile 前想本地预览 README 最终展示效果,推荐使用 grip[15] 工具。
参考资料
[1]
官方文档: https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme
[2]
GitHub 数据统计: https://github.com/anuraghazra/github-readme-stats
[3]
GitHub 统计奖杯: https://github.com/ryo-ma/github-profile-trophy
[4]
Badge(徽章): https://shields.io/
[5]
shield.io: https://shields.io/
[6]
markdown-badges : https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FIleriayo%2Fmarkdown-badges
[7]
Views Counter(访问数量): https://github.com/antonkomarev/github-profile-views-counter
[8]
Dev Metrics(开发指标): https://github.com/anmol098/waka-readme-stats
[9]
GitHub Actions 入门教程- 阮一峰的网络日志: https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html
[10]
生成一个 Github Token: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
[11]
动态更新关注者-仓库源码: https://github.com/Leecason/Leecason
[12]
awesome-github-profile-readme: https://github.com/abhisheknaiidu/awesome-github-profile-readme
[13]
awesome-github-profiles: https://github.com/EddieHubCommunity/awesome-github-profiles
[14]
Profile 在线制作网站: https://github.com/rahuldkjain/github-profile-readme-generator
[15]
本文地址:http://dgaty.xhstdz.com/quote/682.html 物流园资讯网 http://dgaty.xhstdz.com/ , 查看更多