写点什么

如何美化 GitHub 个人主页?

用户头像
彭宏豪95
关注
发布于: 2021 年 04 月 02 日
如何美化 GitHub 个人主页?

Hello 大家好,我是安哥。


之前在 GitHub 上找东西的时候,无意间看到一位网友的 GitHub 主页弄得很好看:



对比 GitHub 主页原来默认的样式,好了不止一点两点。附上 GitHub 主页默认的样式(不要误会,我并没有批评下图的作者的意思,这张图是我随便找的):



我后来在网上搜了一下,发现实现这个效果也不难,依葫芦画瓢做了一下,效果如下。对比原版还是有点丑,但我已经挺满意了。



下面简单讲一下实现方法:


在 GitHub 中创建一个与 GitHub ID 同名的仓库,例如我的 GitHub ID 为 phh95,因此创建的仓库名也为 phh95。


由于我已创建了这个仓库,所以 GitHub 会在下方提示我已经创建过同名的仓库了。



创建时记得勾选从下方的「Add a README file」,在仓库中添加一个 README 的 Markdown 文件,等会我们就是要在这个文件中创建我们最终想要的个人主页样式。



创建仓库之后,点击右上角的个人头像,选择「Your profile」回到你的 GitHub 主页,你应该就可以看到 Hi there 👋 的文本内容。



点击右侧的编辑按钮,进入 REMDME 文件的编辑状态。



进入编辑状态,这个文档是使用 Markdown 语法来编辑的,如果你之前用过 Markdown 的话,编辑起来应该非常简单,如果你没接触过,想学的话十分钟也可以入门。


只需要记住一点,上一行结束时,要在最末尾加多至少两个空格,才能实现换行,否则本来想分行的两行内容会连在一起。



编辑的过程中,点击上方的「Preview changes」选项卡,查看 Markdown 渲染后的效果。



这里着重说一下个人主页中一个看起来比较高级的「小牌子」的实现方法:



上面这个小牌子其实是一个 svg 图片,生成这个 svg 图片需要用到一个在线工具「Shields.io」。



这是个外国的网站,我使用浏览器自带的翻译功能将其翻译成中文。


前面我们说的小牌子,对应的英文为 BADGE,浏览器翻译为了「徽章」。


以前面的小牌子「写作工具|VS Code」为例,生成这个小牌子的方法如下:



在网页 Shields.io 从左到右的三条短横线上填写:写作工具、VS Code、以及从颜色库中挑选一个颜色(这个颜色决定了第二个文本 VS Code 的背景色),最后点击右侧的「制作徽章」。



页面会返回生成的 svg 图片,效果如下图所示,觉得满意的话,复制页面地址栏的网址。



回到刚刚在编辑的 MD 文件中,先输入如下的字符,接着将刚才复制到剪贴板的链接 🔗 粘贴到英文括号 () 中,即以图片的形式将生成的 svg 图片添加到我们的 MD 文档中。


![]()



将 README 文档切换到渲染视图,就可以看到我们想要的小牌子了。


​这里只讲最简单的小牌子的制作方法,下图中的第四个 Git 小牌子制作起来会复杂一些些,其实就是在 svg 图片链接中加多了一个参数,感兴趣的朋友可以去下载别人的 GitHub 同名仓库进行拆解,这里不多讲。​



Shields.io 官网:https://shields.io/


如果你觉得我还是没讲清小牌子的用法,可以参考来自少数派上的一位作者 @SpencerWoo 写的文章《用 Substats 和 Shields.io 为你的个人主页定制动态数据小牌子》:



以上,希望有帮助。


本文首发于我的公众号「效率工具指南」,欢迎关注。



发布于: 2021 年 04 月 02 日阅读数: 27
用户头像

彭宏豪95

关注

新媒体从业者 2017.10.20 加入

喜欢挖掘推荐各种好玩的应用 公众号:效率工具指南

评论

发布
暂无评论
如何美化 GitHub 个人主页?