只需半个小时,保证你的 GitHub 个人主页变的高大上

2,443 阅读9分钟

🍄 大家好,我是风筝

🌍 个人博客:【古时的风筝】。

本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正,不胜感激。

每一个赞都是我前进的动力。

公众号:「古时的风筝」

下面这种 GitHub 个人主页的效果是不是看上去挺高级的,那我们自己的 GitHub 账号应该怎样才能拥有这样类似的效果呢。

今天就来说一说,半个小时内保准你能自己做出来一个。

创建仓库

然后这个仓库的名字要和你的账户名一致,因为我之前已经创建好了,所以提示已存在,正常情况下应该是绿色的提示。

你看,在下方有个小猫提示说这个仓库是一个特别的仓库,你可以添加一个 README.md作为你的个人主页。

那就按照它说的来,打开这个新建的仓库,然后添加一个新文件,并命名为 README.md

接下来就是编辑这个 README.md文件了。当然你可以直接在线编辑,也可以本地编辑好了再推送上去。

如果你看到一个很好看的个人主页,最快速的方式就是找到这个仓库,然后把源码下载下来,找到其中的 README.md文件,然后把格式留下来,把内容改成你自己的,然后提交就行了。

如果你想自己设计一下呢,其实也很简单,下面就来说一说如何定制你自己的个人主页。

个人主页的构成

README.md 文件嘛,一看后缀名就知道这是 Markdown 格式,也就是说其中的内容支持 Markdown 语法。

但是了解 Markdown 的同学肯定要说了,不对吧, Markdown 怎么能做出那么花里胡哨的效果呢,肯定是支持 HTML + CSS 了吧。

还真的没有,在GitHub的 md 文件中,肯定是不能自定义样式的,虽然支持 HTML 标签,但是如果不支持自定义样式,其实用处也不是很大,所以基本上只使用 paimgdetails 这几个标签就够了。

至于你看到的那些图标、图表都是用各种各样的方式生成的图片,还有一部分小图标是 emoji。

html 标签使用

p 标签

使用p标签的作用有两个,一是形成段落间距,二是设置元素的水平位置,居左、居中、居右。因为 Markdown 语法是没有这个功能的。

例如下面这样,通过将align属性设置为 center设置文字居中,left就是居左,right就是居右。

<p align="center">
 古时的风筝
</p>

下面是显示效果,当然了,下面那个黑色框也是 p标签设置的居中,至于怎么做的,一会儿就会讲到。

img 标签

如下图这里面的所有颜色鲜艳的部分都是图片,无一例外,即时有的图标上面显示了文字,那种的也是图片,是 SVG 矢量图。

所以说,如果想要主页看起来好看,那必定会用到各种图片,但是不用担心,基本上都不用自己做,有各种各样的方案可以直接通过第三方提供的服务直接引用。如何引用呢,一会儿也会讲到。

因为 Markdown 本身就支持图片,所以可以直接用 Markdown 语法。

![](https://img.shields.io/badge/Python-FFD749?style=for-the-badge&logo=python&logoColor=white)

显示效果是下面这样的,一张图片。 但是使用 Markdown 语法有个问题,就是不能居中,即使你在外层套上一层 p 标签。

<p align="center">

![](https://img.shields.io/badge/Python-FFD749?style=for-the-badge&logo=python&logoColor=white)

</p>

上述代码,即使加了居中设置,仍然不起作用。

所以,如果你有居中需求,那就直接用 img标签就好了,像下面这样,就可以实现居中的效果了。

<p align="center">

<img src="https://img.shields.io/badge/Python-FFD749?style=for-the-badge&logo=python&logoColor=white" />

</p>

a 标签

a标签就是为了做链接跳转嘛,假设你个人介绍中有自己做的产品介绍,直接可以用 a标签跳转过去。

Markdown 同样支持链接,比如下面这样。但是问题和图片一样,使用markdown标签不能居中,如果你有居中的要求,还是乖乖用 HTML 的原始 标签吧。

[我的个人博客](https://moonkite.cn)

而且 a标签经常和图片一起使用,可能是一个产品介绍图,可能是一个图标,点击图片或图标就进行调整,这也是常用的功能。

details 折叠标签

假设页面太高了,有些部分就可以设置为折叠的效果,点击再展开。

Kapture 2024-03-21 at 17.54.49.gif

使用 HTML 的 details 标签即可实现这样的效果。

<details>
<summary>:eyes: Top Languages</summary>
  
显示内容

</details>

几种常用的元素

下面我就以我自己的这个首页为例,介绍几种常用的元素。当然可用的资源非常多,我只介绍几个最最常见的,不光在这里能用上,在很多其他场景中也能用到。

图标和徽章

shields.io

像上图这种图标几乎任何一个 GitHub 仓库中都能看到,而这些之中,大部分这种样式的都是用 shields.io 做的。

看到上图的那个 Python 图标了吗,只需要一个连接就可以了,你可以打开下面这个链接,就是一张矢量图。

https://img.shields.io/badge/Python-FFD749?style=for-the-badge&logo=python&logoColor=white

下面是对其中各个部分的解释说明,前面的部分是固定的,必须要用 https://img.shields.io/badge/,其实就是调用了 shields 的一个接口,然后根据你设置的参数来动态生成一张图片,最终显示在页面上。

你可以到它的网站上去自己配置一下,看看效果,熟练的话,就直接在 url 里面配就行了。配置地址: shields.io/badges/stat…

Skills icon

这套图标的效果也很不错,一看名字就知道了,这个是专门为技能栏设计的,你掌握了哪些技术可以列在个人主页上。当然了,也能用在别的地方。

[![My Skills](https://skillicons.dev/icons?i=java,kotlin,nodejs,figma&theme=light)](https://skillicons.dev)

如上所示,通过一个连接就生成了看上去是4个图标的效果。

地址:github.com/tandpfun/sk…

m3 Markdown Badges

实现的效果如下这样,但是图标种类有限。

地址:github.com/ziadOUA/m3-…

emoji

emoji ,只要你找到任意一个 emoji 的网站都是一样的,因为 emoji 其实就是字符,同样的长相,那他的文字代码就是相同的。

例如图中的这个草莓,就是一个 emoji 文字。

地址: github.com/markdown-te…

引用效果

就是下面这种的效果,有点类似于名人名言。其实就是 markdown 中的引用效果。

和上面的shields的实现方案是一样的,也是通过别人的服务来生成一张矢量图,参数由你定制。比如通过下面这样,指定一张图片的 src,然后写上参数,就实现了上图的这个效果。

<img src="https://quotes-github-readme.vercel.app/api?type=horizontal&theme=dark&quote=程序员,喜欢写代码,喜欢做产品,喜欢分享技术知识,努力成为全栈,独立开发者。&author=古时的风筝"  />

还有其他的一些样式可以使用,具体参考 github.com/PiyushSutha…

统计卡片和热门语言

可以列出统计卡片和热门语言的各种效果 ,比如下图这种,显得很高大上。但是因为我这账号确实没什么影响力,列出来也不怎么加分。哈哈。

使用地址:github.com/anuraghazra…

好看的个人主页集锦

这个网站 zzetao.github.io/awesome-git… 收集了一些比较不错的个人主页,你可以在里面找找你喜欢的,可以直接拷贝一份改改。

总结

以上我认为做一个个人主页就差不多了,当然了,还有非常非常多的花里胡哨的效果可以直接拿来即用。如果你有兴趣的话,可以到这个仓库看一下,里面有 N 多种效果。

地址: github.com/rzashakeri/…

还可以看看风筝往期文章

《轻解计算机网络》

「差生文具多系列」最好看的编程字体

我患上了空指针后遗症

一千个微服务之死

搭建静态网站竟然有这么多方案,而且还如此简单

被人说 Lambda 代码像屎山,那是没用下面这三个方法