热门推荐
如何拥有一款有特色的 Github Profile?
2024-11-11 09:09

Github Profile 用于展示个人的一些成果,把 Markdown 转换为 HTML 渲染在个人主页上,并且高度支持自定义。

如何拥有一款有特色的 Github Profile?

话不多说,先展示两个酷炫的主页。

如果你也想拥有这样酷炫主页,继续往下看

可以参照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]

    以上就是本篇文章【如何拥有一款有特色的 Github Profile?】的全部内容了,欢迎阅览 ! 文章地址:http://dgaty.xhstdz.com/quote/682.html 
     行业      资讯      企业新闻      行情      企业黄页      同类资讯      网站地图      返回首页 物流园资讯移动站 http://dgsw198.xhstdz.com/ , 查看更多   
发表评论
0评