Github 首页美化教程

ivye • • 免费干货 • 666 阅读

一、前言

相信很多童靴在敲代码之余，都致力于美化自身所处的环境。比如对博客网站的魔改，对 IDE 的美化，对电脑壁纸的精挑细选等等。

GitHub（Gayhub）相信大多数童靴（程序基）都不陌生，GitHub 用户主页布局默认是这样的。

然鹅...

我们在 GitHub 上见到过更炫酷的主页。

哇哦，太酷了，我也想拥有！！！

二、如何实现

其实 DIY Github 的首页很简单，我们只需要新建一个仓库名和自己 Github 用户名相同的仓库并且添加一个 README.md 自述文件即可。

理论存在，实践开始。（新建一个同名仓库，并添加一个自述文件后确认）

GitHub 默认为此文件添加了 demo，我们编辑此文件，即可开启自己的 DIY 之路了！

三、酷炫一点

Github 提供了这样一个特殊的 markdown 文件以供我们 DIY 主页，如果您熟悉 HTML，CSS 以及 MarkDown 语法的话，扩展性很高。

可是。。。毕竟个人的创造力有限，如何能在短时间拥有一个酷炫的个人主页呢！

emmm，有了，ctrl+c ctrl+v

1、Metrics（GitHub 信息统计）

Metrics

Metrics

获得类似上图的 GitHub 数据统计，需要用到一个在线工具「Metrics」，打开网站之后，在左侧输入你的 GitHub ID，稍等一会，就会返回右侧所有和你相关的数据。

点击右侧的 Markdown code 选项卡，切换到统计视图对应的 Markdown 链接，复制代码添加到 README.md 文件中。

代码格式可以是 markdown 语法，也可以是 HTML 语法，但 HTML 的扩展性更强一点，建议采用 HTML 语法格式书写。

HTML

1
2
3
 
<div align="center">
    <img src="https://metrics.lecoq.io/sun0225SUN?template=classic&config.timezone=Asia%2FShanghai">
</div>

2、GitHub Stats Card（GitHub 统计卡片）

在您的自述文件中获取动态生成的 GitHub 统计信息！传送门

详情可以看上面的官方文档，在README.md添加如下代码，查看展示demo，下同。

HTML

1
2
3
 
<div align="center">
    <img height="137px" src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195853-a2c31.svg+xml; charset=utf-8" />
</div>

3、Most used languages（使用语言统计）

在您的自述文件中添加使用编程语言对比统计图传送门

HTML

1
2
3
 
<div align="center">
    <img  src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195854-520c5.svg+xml; charset=utf-8" />
</div>

4、Github Profile Trophy（GitHub 资料奖杯）

添加奖杯信息。传送门

HTML

1
2
3
 
<div align="center">
  <img  src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195855-7d2df.svg+xml" />
</div>

5、Shields.io（GitHub 徽章）

为你的开源项目生成高质量小徽章图标，直接复制链接使用。传送门

HTML

1
2
3
4
5
 
<span >
	<img  src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195907-2f400.svg+xml;charset=utf-8" />
	<img  src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195908-30957.svg+xml;charset=utf-8" />
	<img  src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195909-80f08.svg+xml;charset=utf-8" />
</span>

6、Visitor Badge（GitHub 访客徽章）

这个图标和上面的徽章类似，但作用不同，这个徽标会实时改变，记录此页面被访问的次数。传送门

HTML

1
2
3
 
<div align="center">
    <img  src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195909-6aa60.html; charset=utf-8" />
</div>

7、GitHub Readme Activity Graph （GitHub 活动统计图）

动态生成的活动图，用于显示您过去 31 天的 GitHub 活动。传送门

HTML

1
2
3
 
<div align="center">
    <img src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195910-c4cba.svg+xml; charset=utf-8" />
</div>

8、社交统计

在 README 中展示你在一些流行的网站的数据。传送门

HTML

1
2
3
 
<div align="center">
    <img src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195912-1fb40.svg+xml; charset=utf-8">
</div>

9、GitHub streak（GitHub 连续打卡）

在 README 中展示您连续提交代码的次数。传送门

HTML

1
2
3
 
<div align="center">
    <img  src="https://blog.info35.com/wp-content/uploads/sites/2/2022/06/20220615195914-e60f1.svg+xml" />
</div>

10、打字特效

嗯。。。对，就是这种循环打字的效果，是不是很炫酷，传送门

HTML

1
2
3
4
5
 
<h1 align="center">
  <a href="https://sunguoqi.com/">
    <img src="https://readme-typing-svg.herokuapp.com/?lines=console.log(%22Hello%2C%20World!%22);小孙同学祝您今天愉快!&center=true&size=27">
  </a>
</h1>

四、拿来主义

拿来主义

基本上添加了上面十个小部件，你的 GitHub 主页就可以很炫酷了！如下图。

五、优秀案例

所谓拿来主义（鲁迅说的已经很明白了，哈哈哈）

大家懂的都懂，GitHub 是一个大的开源代码托管仓库，自述文件（README.md）肯定也是开源的，当我们看到看到好的创意，炫酷的页面时，我们直接到大佬的仓库里拉取就好了，记得给大佬 star，别再白嫖了。

文章版权归原作者所有或来自互联网，未经允许请勿转载。如有侵权请联系我删除，谢谢！
THE END
分享
二维码
打赏
< <上一篇
下一篇>>