GitHub自定义美化个人主页
# 背景
偶然间在浏览谷歌浏览器的插件CSDN,里边有个网站商城,其中有个网站叫做leetcode题解 (opens new window),这个一个大佬 (opens new window)写的非常不错的算法学习的网站,有兴趣可以看看。最近刚好在研究算法,被大佬写的学习方法和题解深深折服,在进入大佬的GitHub主页的时候,发现他的GitHub主页是自定义的,和默认的不一样。于是对此就充满了好奇。
初步看,实现这样的功能,好像是有一个和用户名一样的仓库,里边有一个README.md文件来实现的。于是乎就进行了一番搜索,最终实现了自己的GitHub自定义主页。
# 如何实现GitHub自定义主页
其实相当简单,只需要创建一个同名仓库。在仓库下的README.md
文件中进行自定义内容。
我这里已经创建了同名的仓库所以上面会出现警告,记得下面红框的要勾选,初始化一个README文件,这个文件就可以自定义主页。
# 自定义模板
内容方面,GitHub 给出了默认的欢迎内容,同时提供了一些建议和提示,这一部分默认被注释掉了。
<!--
**shiwei-Ren/shiwei-Ren** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.
Here are some ideas to get you started:
- 🔭 I’m currently working on ...
- 🌱 I’m currently learning ...
- 👯 I’m looking to collaborate on ...
- 🤔 I’m looking for help with ...
- 💬 Ask me about ...
- 📫 How to reach me: ...
- 😄 Pronouns: ...
- ⚡ Fun fact: ...
-->
2
3
4
5
6
7
8
9
10
11
12
13
14
# 我的模板
https://github.com/duktig666/duktig666 (opens new window)
# 推荐模板仓库
- https://github.com/kautukkundan/Awesome-Profile-README-templates (opens new window)
- https://github.com/rahuldkjain/github-profile-readme-generator (opens new window)
# 如何自定义模板
# 自定义图标
经常在浏览GitHub时,发现别人项目中的README.md
文件总能显示一些特殊的图标和统计数据,这些在自定义主页时也可以使用。
README.md
中特殊图标的使用,来源于Simple Icons (opens new window),使用的是 Shields IO (opens new window) 语法。可以看到有很多的用法,具体如下:
Build (opens new window): 可视化自定义样式
Code Coverage (opens new window): 代码覆盖率样式
Analysis (opens new window): 数据解析样式
Chat (opens new window): 状态展示样式
Dependencies (opens new window): 依赖关系样式
Size (opens new window): 数值大小样式
Downloads (opens new window): 下载按钮样式
Funding (opens new window): 项目金额来源样式
Issue Tracking (opens new window): 问题状态和追踪样式
License (opens new window): 许可证样式
Social (opens new window): 社区信息样式
Version (opens new window): 版本号信息样式
Platform & Version Support (opens new window): 平台支持和版本支持样式
Monitoring (opens new window): 监控状态和方式样式
Activity (opens new window): 项目活动样式
Other (opens new window): 其他自定义样式
# 统计工具
关于GitHub相关数据统计显示可以参考这篇文章GitHub Readme Stats (opens new window)(写的很详细)。
根据这篇文章可以实现如下图类似的特效:
# 代码统计
代码统计需要运行 GitHub Action,GitHub 的相关教程可以先参考阮一峰老师的 GitHub Actions 入门教程 (opens new window)。
后续更新........
# 统计访问个人主页数量
![描述](https://komarev.com/ghpvc/?username=your-github-username&color=green)
# 自定义表情
可参考:Github表情语法专栏 (opens new window)
# 扩展用法
参考:https://github.com/abhisheknaiidu/awesome-github-profile-readme (opens new window)
# 参考
- GitHub主页美化 (opens new window)
- https://sanii.cn/article/302 (opens new window)
- https://ld246.com/article/1602996971277 (opens new window)
- GitHub 自定义首页,结合 GitHub Action 更香 (opens new window)
- https://juejin.cn/post/6844904035103801352 (opens new window)
- https://juejin.cn/post/6844904114711691272 (opens new window)