玩转 GitHub profile - 打造自己的特色 GitHub 主页(交友利器🐶)

简介: Github 作为全球最大程序员交友网站,大家在上面交友时一个具有个人特色的自我介绍自然是少不了的。🐶今天介绍下 GitHub 的一项特色功能 - GitHub profile,以及一些列开源工具、项目来帮助打造自己特色的 GitHub profile。GitHub profile 也是最近两年 GitHub 才新加的功能,开发者可以通过编写 README 打造属于自己的个人 GitHub 首页。

网络异常,图片无法展示
|

Github 作为全球最大程序员交友网站,大家在上面交友时一个具有个人特色的自我介绍自然是少不了的。🐶

今天介绍下 GitHub 的一项特色功能 - GitHub profile,以及一些列开源工具、项目来帮助打造自己特色的 GitHub profile

GitHub profile 也是最近两年 GitHub 才新加的功能,开发者可以通过编写 README 打造属于自己的个人 GitHub 首页。

先贴一张我自己的 GitHub 首页

创建

要创建属于自己的 GitHub profile,只需要创建自己账户同名的 GitHub 仓库即可:

网络异常,图片无法展示
|

profile 属于彩蛋类功能,创建时在下方将会出现提示。如果勾选自动创建 README,将会创建一个特殊的 README 模版,长这样:

### Hi there 👋
<!--
**GULU-H/GULU-H** 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: ...
-->
复制代码

直接编辑 README 文件,然后到你的 GitHub 首页即可在上方看到效果。可直接使用官方提供的模版修改作为自己的 profile

注意 README 可以使用相对路径引用该仓库下的文件,简单说就是在该仓库中的预览会直接展示在首页中,不会因为位置不同导致路径问题。

模版

如果觉得自己捏 profile 太麻烦,也可以参考很多出彩的 profile 进行改造。下面推荐几个模版网站:

awesome-github-profile

先上地址:zzetao.github.io/awesome-git…

网络异常,图片无法展示
|

该项目提供了丰富的模版,可以从中选择喜爱的模版进行二次开发。

Awesome-Profile-README-templates

上地址:github.com/kautukkunda…

该仓库没有概览图,可以进入项目目录点击各 markdown 文件进行查看。

类似的项目还有:github.com/durgeshsama…

gh-profile-readme-generator

老规矩,上地址:rahuldkjain.github.io/gh-profile-…

使用该网站可通过表单式问卷为你生成 profile,如果懒得二次定制可以使用该网站进行生成。

模块

除了使用上述模版二次定制外,profile 还可以使用一些有趣的模块,比如常见的各大开源项目中使用的 badge,或是一些特色的 profile 模块。

badge 模块:

网络异常,图片无法展示
|

网络异常,图片无法展示
|


waka 时间展示:

github.com/marketplace…


展示 GitHub stars 等信息:

网络异常,图片无法展示
|

网络异常,图片无法展示
|


还有将你的 GitHub contributions 绘制成贪吃蛇游戏,十分有趣:

github.com/Platane/snk

此处为一张 svg 动图,样式被掘金图床压缩没了,效果可参考我的 GitHub 首页。

网络异常,图片无法展示
|

技巧

暗色模式兼容

注意很多模块由于是图片,而 GitHub 现在支持暗色模式,很容易导致暗色模式下图片颜色不合适,此时可以通过一些特殊的技巧来处理。

![GitHub Snake Light](https://raw.githubusercontent.com/zxbing0066/zxbing0066/output/github-contribution-grid-snake.svg#gh-light-mode-only) ![GitHub Snake Dark](https://raw.githubusercontent.com/zxbing0066/zxbing0066/output/github-contribution-grid-snake-dark.svg#gh-dark-mode-only)
复制代码

可以在图片或者外层链接的 hash 上添加 gh-light-mode-onlygh-dark-mode-only 来让其在不同主题下自动切换。

其实这个像魔法一样的操作是借助 GitHub 中的样式表来实现的:

@media (prefers-color-scheme: light) :root[data-color-mode=auto] .entry-content [href$="#gh-dark-mode-only"],
    :root[data-color-mode=auto] .comment-body [href$="#gh-dark-mode-only"],
    :root[data-color-mode=auto] .readme [href$="#gh-dark-mode-only"] {
    display: none;
}
复制代码

GitHub 通过亮暗色媒体查询和 href 的后缀匹配来达成这样的效果。

使用 GitHub 样式

除了上述暗色主题兼容外,还可借助其他 GitHub 中的内置样式来达成一些好看的效果:

网络异常,图片无法展示
|

比如此处的灰色块便是借助 GitHubcode 样式来实现,图片也是来源于 GitHub 各处的图标图片。

总结

借助 GitHub profile 可以让开发者方便的打造自己的 GitHub 首页,在全球最大交友网站中有特色的介绍自己 🐶。

最后祝大家都能打造出属于自己的 GitHub 首页。

相关文章
|
API
GitHub主页美化教程——不一样的主页,更精彩🎈
GitHub主页美化教程——不一样的主页,更精彩🎈
350 0
GitHub主页美化教程——不一样的主页,更精彩🎈
|
开发工具 git
自定义你的github主页
自定义你的github主页
155 1
 自定义你的github主页
|
移动开发 前端开发 程序员
定制你的GitHub主页
定制你的GitHub主页
定制你的GitHub主页
如何给自己的Github主页来个豪华套餐?
如何给自己的Github主页来个豪华套餐?
70 0
|
BI API 开发工具
给她一个有爱的Github主页
前言:哈喽,我是树酱。先聊聊本文的起源,某天在水群的时候看到某大佬的Github账户主页,颜值简直爆棚。反观看树酱的Github主页,简直就是“陋室”,难以入眼!或者很多开发的小伙伴跟我一样,平时在github上参与开源少了,可能操作最多的无非就是fork与star,就不会考虑花时间去打理。其实github主页也是我们另一种名片的呈现方式,更好的展示可以给她留下一个好的印象
221 0
给她一个有爱的Github主页
|
存储 搜索推荐 前端开发
来Github炫一下~在Github主页显示你的个人简历~
从另一个博主的文章(文章链接在这)那里看到了Github上线了一个新的功能: 可以在Github主页制作一个个性化的介绍页面 也就是每个项目主页通常有的README.md文件,熟悉Github的小伙伴都知道,在README.md文件主要是对项目的简介和使用说明的介绍,那这个对自己的个性化介绍页面怎么做呢
|
搜索推荐 网络安全 C++
打造GitHub个性化主页
打造GitHub个性化主页
185 0
打造GitHub个性化主页
|
前端开发 搜索推荐 JavaScript
搭建我的github pages 主页网站
如何搭建我的github pages主页网站
搭建我的github pages 主页网站