Github 相关知识
用户信息
Github 提供了 API 可查看用户的大部分可公开的信息
在下面输入框中输入用户名，点击查看
用户头像
拿到用户的头像有两种方式，第一种最直接，通过用户名；第二种是通过用户 ID。
Github 账号的用户 ID 可通过上面的链接在用户信息里拿到。 或者通过网站 https://caius.github.io/github_id 直接查询
或者通过用户 ID
用户 ID
尺寸
Github + 1s
访问域名 github1s.com 可以 Web 版的 VSCode 方式打开 Github 项目及主页相关信息，项目中的文件目录可折叠展开方便查看。 这个是一个开源项目，并非官方提供。
👉 去体验
RepoTracker
获得更多维度仓库信息的展示，所有的信息汇集到一个页面，以图表的形式呈现。
只需要在仓库地址域名后面加上 -stats，实际访问将会跳转到 repo-tracker.com 域名下。
代码行数高亮
Github 仓库中可以通过 url 中的哈希值定位到代码的行数，进行高亮显示比如：
https://github.com/shikijs/shiki-magic-move/blob/5ec48554d87b4f4e2dd2e15f27ef9e51ef00074b/src/renderer.ts#L233-L249
对应到代码的 233-249 行。
Awesome Repo
这是为每个技术类别专门收集最有用的资料而建立的仓库。它们的共同点就是名字里都带有 awesome 字样。
- Awesome JavaScript - https://github.com/sorrycc/awesome-javascript
- Awesome CSS - https://github.com/awesome-css-group/awesome-css
- Awesome Vue.js - https://github.com/vuejs/awesome-vue
- Awesome React - https://github.com/enaqx/awesome-react
- Awesome node.js - https://github.com/sindresorhus/awesome-nodejs
- Awesome NestJS - https://github.com/nestjs/awesome-nestjs
- Awesome Nuxt - https://github.com/nuxt/awesome
- Awesome Tailwind CSS - https://github.com/aniftyco/awesome-tailwindcss
- Awesome Readme - https://github.com/matiassingers/awesome-readme
评论系统
利用 GitHub issues 或 GitHub Discussions 可实现静态网站、博客或文档的评论系统。
| 名称 | 官网 | 开源地址 | 备注 |
|---|---|---|---|
| giscus | https://giscus.app | https://github.com/giscus/giscus | 可借助组件库在 React、Vue 和 Svelte 中使用，支持多种语言 |
| gitalk | https://gitalk.github.io | https://github.com/gitalk/gitalk | 基于 Github Issue 和 Preact 开发的评论插件 |
| utterances | https://utteranc.es | https://github.com/utterance/utterances | 借助 Github issues 实现的轻量的评论组件，giscus 灵感就是来源于它 |
数据统计
提交频次统计
可复制以下 Markdown 或 HTML 代码在网页中进行应用，注意修改后面的用户名
- Markdown
- HTML
<img src="https://ghchart.rshah.org/fantingsheng" alt="fantingsheng's Github Chart" />
根据提供的年份和 Github 用户名生成 3D 城市地图版的提交贡献图
https://github.com/honzaap/GithubCity
多维度数据统计
截止目前 vercel.app 国内访问 DNS 被污染
- Markdown
- HTML
<img
src="https://github-readme-stats.vercel.app/api?username=fantingsheng&show_icons=true"
alt="fantingsheng's Github Chart"
/>