Github「Your profile」个性化定制
花些时间,打造一个精致的有特点的 Github 个人主页。一方面可以增加自己经营 Github 账号的积极性,另一方面可以让访客眼前一亮。我只记录了我用到的组件和设置,还有很多酷炫的组件和设置,具体可以参考优秀案例,按照自己的喜好挑选。
创建仓库
账号同名仓库就是用来打造个人主页的特殊仓库,在其中的 README.md
文件里配置信息和小组件。具体步骤:
- Create a new repository;
- Repository name 设置为 Owner 同名;
- ✅ Public;
- ✅ Add a README file;
- Create repository。
基础内容
README.md
支持 Markdown
语法和 HTML
组件。个人建议内容主体使用 Markdown
语法构建,具体的布局排版使用 HTML
组件设置。常用的 HTML
组件有:
<!-- 布局设置 -->
<div align="center|left|right"></div>
<!-- 图片组件 -->
<img width=".." align="center|left|right" src="..." /></img>
<!-- 链接 -->
<a href=".."></a>
<!-- 文本 -->
<p></p>
特殊组件
动态打字特效
项目地址:Readme Typing SVG
可视化快速配置:Demo
Github 信息展示
项目地址:GitHub Readme Stats
最基础设置,把 ?username=username
替换成账户名:
<!-- Markdown -->
![Who's GitHub stats](https://github-readme-stats.vercel.app/api?username=username)
<!-- HTML -->
<img width="50%" align="right" src="https://github-readme-stats.vercel.app/api?username=username" />
根据个人喜好,可以在 ?username=username
后使用&
间隔自定义设置,例如 &hide=
(隐藏特定统计信息,以逗号间隔),&theme=
(制定主题),等等。
该项目还提供了两种组件:Github代码语言统计和个性化置顶仓库展示,值得探索。
个性化徽章
项目地址: Shields.io
Shields被广泛地用于各种项目的 README.md
中。其中多种不同功能的徽章设置,我们主要使用的是自定义技能徽章。
<!-- Markdown -->
![](https://i-blog.csdnimg.cn/blog_migrate/d9ccf87267393a1cc2cb676ddb2b2570.png)
<!-- HTML -->
<img alt="Python" src="https://i-blog.csdnimg.cn/blog_migrate/5701a68685ee0fb7c4a9feaeb678acdf.png" />
<img alt="C" src="https://i-blog.csdnimg.cn/blog_migrate/197e91705675fbdcef0b236c7247876d.png" />
<img alt="Rust" src="https://i-blog.csdnimg.cn/blog_migrate/6681679a67c866dac3d3b1f2bf78b291.png" />
<img alt="Shell" src="https://i-blog.csdnimg.cn/blog_migrate/16b6bc14c8a44aca5e604b4482105f7b.png" />
<img alt="MySQL" src="https://i-blog.csdnimg.cn/blog_migrate/79380c387c45e7bd501653bba6d05532.png" />
<img alt="Vue" src="https://i-blog.csdnimg.cn/blog_migrate/cf02e2570f896548fe891948ea2ef5a4.png" />
<img alt="Go" src="https://i-blog.csdnimg.cn/blog_migrate/3662ac94a88c921e25b8cec2317b8a69.png" />
<img alt="MongoDB" src="https://i-blog.csdnimg.cn/blog_migrate/98bc2f8887e09ea056ed2220356bc179.png" />
<img alt="Nodejs" src="https://i-blog.csdnimg.cn/blog_migrate/9e4dad1ef2a965f21cd63c328e9076f0.png" />
<img alt="HTML5" src="https://i-blog.csdnimg.cn/blog_migrate/d9ccf87267393a1cc2cb676ddb2b2570.png" />
具体解析:
https://img.shields.io/badge/{徽章内容}-{徽章标题}-{徽章颜色}?{style}={参数值}&{logo}={参数值}&{logoColor}={参数值}
徽章内容自己填写(下图绿区显示),徽章标题自己填写(下图黑区显示),徽章颜色可以用取色器获取喜欢颜色的十六进制代码,style
有以下几种选择:
更多的设置可以参考官方文档。
访客数统计
page_id=username
替换成账户名。
<!-- Markdown -->
![](https://visitor-badge.glitch.me/badge?page_id=username)
<!-- HTML -->
<div align="left">
<img src="https://visitor-badge.glitch.me/badge?page_id=username" />
</div>
常用素材
Emoji
- Emoji Cheat Sheet(webfx) : ☀️☔️☁️❄️⛄️⚡️
- Emoji Cheat Sheet(ld246) :💯🥇🎱🍎🥑🐦
- Emoji Unicode Tables :😀😇😈😎😐😠 (
U+1F601
➡️😁
)