跳到主要内容

Github 玩法

用户信息

Github 提供了 API 可查看用户的大部分可公开的信息

在下面输入框中输入用户名,点击查看

https://api.github.com/users/fantingsheng点击查看

用户头像

拿到用户的头像有两种方式,第一种最直接,通过用户名;第二种是通过用户 ID。

Github 账号的用户 ID 可通过上面的链接在用户信息里拿到。 或者通过网站 https://caius.github.io/github_id 直接查询

Github Avatar
https://github.com/facebook.png
或者通过用户 ID

用户 ID

尺寸

Github Avatar
https://avatars.githubusercontent.com/u/6924543?v=4&size=128

Github + 1s

访问域名 github1s.com 可以 Web 版的 VSCode 方式打开 Github 项目及主页相关信息,项目中的文件目录可折叠展开方便查看。 这个是一个开源项目,并非官方提供。

👉 去体验

RepoTracker

获得更多维度仓库信息的展示,所有的信息汇集到一个页面,以图表的形式呈现。

只需要在仓库地址域名后面加上 -stats,实际访问将会跳转到 repo-tracker.com 域名下。

https://github-stats.com/fantingsheng/nextjs-dashboard点击查看

代码行数高亮

Github 仓库中可以通过 url 中的哈希值定位到代码的行数,进行高亮显示比如:
https://github.com/shikijs/shiki-magic-move/blob/5ec48554d87b4f4e2dd2e15f27ef9e51ef00074b/src/renderer.ts#L233-L249
对应到代码的 233-249 行。

Awesome Repo

这是为每个技术类别专门收集最有用的资料而建立的仓库。它们的共同点就是名字里都带有 awesome 字样。

评论系统

利用 GitHub issuesGitHub Discussions 可实现静态网站、博客或文档的评论系统。

名称官网开源地址备注
giscushttps://giscus.apphttps://github.com/giscus/giscus可借助组件库在 React、Vue 和 Svelte 中使用,支持多种语言
gitalkhttps://gitalk.github.iohttps://github.com/gitalk/gitalk基于 Github Issue 和 Preact 开发的评论插件
utteranceshttps://utteranc.eshttps://github.com/utterance/utterances借助 Github issues 实现的轻量的评论组件,giscus 灵感就是来源于它

数据统计

提交频次统计

可复制以下 Markdown 或 HTML 代码在网页中进行应用,注意修改后面的用户名

![](https://ghchart.rshah.org/fantingsheng)

根据提供的年份和 Github 用户名生成 3D 城市地图版的提交贡献图

https://github.com/honzaap/GithubCity

多维度数据统计

截止目前 vercel.app 国内访问 DNS 被污染

![](https://github-readme-stats.vercel.app/api?username=fantingsheng&show_icons=true)