Github个人主页个性化定制1.0

Github「Your profile」个性化定制

花些时间，打造一个精致的有特点的 Github 个人主页。一方面可以增加自己经营 Github 账号的积极性，另一方面可以让访客眼前一亮。我只记录了我用到的组件和设置，还有很多酷炫的组件和设置，具体可以参考优秀案例，按照自己的喜好挑选。

个人成果展示

创建仓库

账号同名仓库就是用来打造个人主页的特殊仓库，在其中的 README.md 文件里配置信息和小组件。具体步骤：

1. Create a new repository；
2. Repository name 设置为 Owner 同名；
3. ✅ Public；
4. ✅ Add a README file；
5. 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 替换成账户名：

![Who's GitHub stats](https://github-readme-stats.vercel.app/api?username=username)

<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 中。其中多种不同功能的徽章设置，我们主要使用的是自定义技能徽章。

![](https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white)

<img alt="Python" src="https://img.shields.io/badge/-Python-FADC6A?style=flat-square&logo=python" />
<img alt="C" src="https://img.shields.io/badge/-C/C++-DAE8FC?style=flat-square&logo=c" />
<img alt="Rust" src="https://img.shields.io/badge/-Rust-E55828?style=flat-square&logo=rust" />
<img alt="Shell" src="https://img.shields.io/badge/-Shell-000000?style=style=flat-square&logo=gnu-bash&logoColor=white" />
<img alt="MySQL" src="https://img.shields.io/badge/-MySQL-0021F5?style=flat-square&logo=mysql&logoColor=white" />
<img alt="Vue" src="https://img.shields.io/badge/-VUE-EC4A3F?style=flat-square&logo=vue.js&logoColor=white" />
<img alt="Go" src="https://img.shields.io/badge/-Go-F7B93E?style=flat-square&logo=go&logoColor=white" />
<img alt="MongoDB" src="https://img.shields.io/badge/-MongoDB-13aa52?style=flat-square&logo=mongodb&logoColor=white" />
<img alt="Nodejs" src="https://img.shields.io/badge/-Nodejs-43853d?style=flat-square&logo=Node.js&logoColor=white" />
<img alt="HTML5" src="https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" />

具体解析：

https://img.shields.io/badge/{徽章内容}-{徽章标题}-{徽章颜色}?{style}={参数值}&{logo}={参数值}&{logoColor}={参数值}

徽章内容自己填写(下图绿区显示)，徽章标题自己填写(下图黑区显示)，徽章颜色可以用取色器获取喜欢颜色的十六进制代码，style 有以下几种选择：

更多的设置可以参考官方文档。

访客数统计

page_id=username 替换成账户名。

![](https://visitor-badge.glitch.me/badge?page_id=username)

<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 ➡️ 😁 )

Icons

• Simple Icons
• iconfont

Others

• DOTOWN像素风

优秀案例

1. sun0225SUN
2. ThinkingThigh
3. lixiang007666
4. shinokada

参考文章

Github 首页美化教程

使用shields.io添加GitHub项目徽标