2

折腾一下 GitHub Profile

 1 year ago
source link: https://einverne.github.io/post/2022/09/github-profile.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

折腾一下 GitHub Profile

Posted on 09/10/2022 , Last modified on 09/21/2022 by Ein Verne | View revision history

虽然很早就知道 GitHub 发布了 Profile 功能,可以使用 README 来丰富 Profile 页面。但是一直以来没啥动力,大多数时候都不会去到主页去访问。但现在有些时候逛 GitHub 的时候会点到 其他人 的主页去看,发现有一些主页虽然只有寥寥几句,但却可以清楚的知道「他/她」最近在贡献什么内容,擅长什么技能。虽然我在 GitHub 上还是观摹大佬居多,但也想着通过这个契机在整理 GitHub Profile 的时候加深一下对自己的认知。

至于如何建立同名的 repository,如果提交代码就先略过了,官方的帮助和其他文章的内容都非常详细。

刚开始去 Google 「GitHub Profile」 就发现了如下的页面生成器 GitHub Profile Generator ,可以用这个生成器生成一个初始版本,然后在其基础上修改。

在调研的过程中基本发现了两大类主流的用法,一类是通过 GitHub 的 API ,或者其他服务的 API,生成一个 Badge 展示,另外一类就是通过 [[GitHub Actions]] 通过定时任务动态的使用代码聚合一些内容,然后再动态地展示到页面中。

因为 README 中可以直接写 HTML,所以如下的 HTML 也可以直接使用,注意替换其中的链接。

<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/twitter.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/linkedin.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/instagram.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/youtube.svg" alt="" height="30" width="40" /></a>
</p>

或者使用外部的 Readme-stats 来生成一个数据卡:

<p>
  <a href="https://github.com/einverne/">
    <img  margin-top="-30px" width="55%" align="right" alt="einverne's github stats" src="https://github-readme-stats.vercel.app/api?username=einverne&show_icons=true&include_all_commits=true&count_private=true&layout=compact&hide_border=true" />
  </a>
</p>

如果要在页面中放入图标可以到如下的网站寻找。

  • Simple Icons 是一个开源的 SVG 图标库,包含了上百个品牌的图标。
  • Skill Icons 是一组可以用来展示技能的图标。
  • Flaticon 提供了很多彩色的图标,也提供很多收费的图标,可以根据需要选择。
  • Icons8 同样是一个图标库,但是也包含一些收费的图标
  • Wikimedia Commons 是另一个不错的选择,可以找到很多官方的图标,并且可以自由使用。

github-readme-stats

github-readme-stats 是一个用来生成 GitHub 统计数据的工具,可以在页面上展示获得的⭐,提交的次数,总共的 PR 等等。

z37h.png

生成从构建,代码覆盖率,开源协议,到社交网络等等,非常多的徽章。

统计页面访问量

如果想要统计访问 GitHub Profile 的数量,可以使用 GitHub Profile Views Counter 这个项目。

GitHub Profile Trophy

z8yr.png

github-readme-streak-stats

Streak stats

https://skyline.github.com/

GitHub Actions

基于 GitHub Actions 动态生成内容展示在 Profile 页面。

因为有 GitHub Actions,所以简单的用脚本可以展示

  • 最近在阅读的图书
  • 最近分享的文章
  • 当前正在听的音乐

显示最近博客内容

可以使用 blog-post-workflow 来显示最近更新的博客内容。通过定时读取 Feed ,来在页面动态展示内容。

GitHub 最近动态

GitHub Activity Readme 可以在页面上显示最近在 GitHub 上的动态。

如果你使用 [[WakaTime]] 来统计编码时间,那么可以使用 waka-readme-stats 来展示。

最终的效果见 https://github.com/einverne/

reference


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK