推广 热搜: 行业  机械  设备    经纪  教师  系统  参数    蒸汽 

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

   日期:2024-11-11     移动:http://dgsw198.xhstdz.com/quote/682.html

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]

本文地址:http://dgaty.xhstdz.com/quote/682.html    物流园资讯网 http://dgaty.xhstdz.com/ , 查看更多

特别提示:本信息由相关企业自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


0相关评论
相关行业动态
推荐行业动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号