开启辅助访问
 找回密码
 立即注册

GitHub个人主页美化

mouhaichuan 回答数12 浏览数707
摘要

GitHub个人主页,官方称呼是profile,是一台以markdown脚本语言编写的个人GitHub展示主页面。本文主要介绍了如何创建个人github个人主页以及美化个人主页,通过使用一些功能组件,提升主页功能性和视觉效果。有关markdown脚本编辑方式,提供了两种方案:markdown语法输入和可视化编辑器,帮助不熟悉markdown语法同学快速生成个人主页。在本文结束的位置,展示了本人和一批优秀个人主页供大家设计参考。所有功能组件地址都以超链接的方式添加在小标题中。
关键词profile, github readme stats, shield, PROFILINATOR

创建GitHub个人主页

第一步:登录GitHub
第二步:创建一台新的仓库

第三步:填写仓库信息

  • 仓库名称与github名称相同
  • 勾选Add a README file


当创建的仓库名称与github账户名称相同的时候,下面会弹出绿色的对话框,内容如下:
You found a secret!
WF8890/WF8890 is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile.
Make sure it’s public and initialize it with a README to get started.大致的意思是恭喜你发现了一台"隐藏任务",这个仓库可以作为个人简介展示在github个人首页,你所要做的就是确认这个仓库是开放的(public)并且有一台README.md

同名仓库创建成功以后,点击github右上角的头像,然后选择"Your profile"即可看到刚刚初始化的README
美化主页

MarkDown

README文件采用的是MarkDown语言进行编辑,这里编辑README不需要将文件clone到本地,支持在线修改与实时显示,在个人主页点击README.md右上角的编辑图标进入编辑模式。

在编辑过程中想要实时预览,点击左上角的preview按钮即可

如果不熟悉markdown语法,可以直接跳转到本文Profile编辑器部分,该部分介绍了一台可视化的编辑工具,省去了markdown脚本编写,只需要勾选相应的选项即可自动生成profile。
统计访问次数

统计访问次数的小插件记录了个人主页被访问的次数,需要将christmas替换为个人github账户名称,代码如下:
![Visitor Count](https://profile-counter.glitch.me/Christmas/count.svg)效果如图所示

GitHub Readme Stats

此项目提供了两种功能:常用语言占比统计和github仓库指标统计

  • 常用语言占比统计
展示了常用语言极其占据的百分比


    • 代码

将下述代码中的Christmas替换为个人github账户名称即可(有两处)
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=Christmas)](https://github.com/Christmas/github-readme-stats)


    • 展示




  • 常用语言占比统计(紧凑)
这个模式下,所有语言百分比展示在一台进度条中,节约了纵向空间


    • 代码

将下述代码中的Christmas替换为个人github账户名称即可(有两处)
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=Christmas&layout=compact)](https://github.com/Christmas/github-readme-stats)


    • 展示




  • 仓库状态统计
显示github仓库的指标数据,例如:个人项目获得的 Stars 数量、今年提交代码的次数、创建的 issue 的数量、以及一台计算出来的总评分 A+。
该功能组件提供了数个主题可供选择,同时还支持渐变色,具体的参数请参考主页文档。


    • 代码

![Christmas's GitHub stats](https://github-readme-stats.vercel.app/api?username=Christmas&show_icons=true&theme=tokyonight)


    • 展示



shield

这个项目主要提供了在其他项目里面常见的"小牌子"(徽章)的编辑和展示功能,效果如下:

shield的使用比较简单(其实就是一台svg图片),该项目支持在线自定义"小牌子"(徽章),结构有点类似与键值对,多出了一台颜色的属性。

对这三个字段编辑完成以后,点击make badge按钮,即可生成小牌子的链接,在浏览器的地址栏复制,然后以图片的格式粘贴进自个的README.md文件中即可,格式如下:
![decription](https://img.shields.io/badge/tools-pycharm-green)

如果想要像案例中一样展示牌子logo,需要在链接中补充logo字段:
https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white这里有150余种logo的对应关系:logo列表
Profile编辑器

这个项目是一台可视化profile生成工具,使用者无需学习markdown语法,仅需要在对应窗口中输入或者选择相应的内容,工具会自动生成markdown脚本。脚本编辑完成以后,直接复制粘贴到自个的github即可。

项目左侧是编辑窗口,在输入框中填入对应的信息,右侧展示框实时显示生成的效果,在编辑完成以后,点击右上角的按钮即可生成markdown脚本文件。
我比较推荐它的logo展示功能,将自个技术栈以logo的方式展现出来,更加生动形象。

Profile模板


  • 我的主页
  • 优秀模板仓库

<hr/>写的不好的地方请大家积极批评指证,和大家一起变得更强!up!up!
觉得不错的话,麻烦帮我 @王斐 点个赞哟!
您的关注是我每周更新一篇NLP相关文章的动力哦,谢谢!
使用道具 举报
| 来自上海
wup62 | 来自北京
[赞同]
回复
使用道具 举报
引遇为喜 | 来自福建
毛遂自荐一下,我的github主页https://www.github.com/sun0225SUN
回复
使用道具 举报
teawang | 来自北京
哇,很炫酷[赞]
回复
使用道具 举报
kekeimm | 来自云南
酷! 安排起来
回复
使用道具 举报
felixs | 来自北京
没毛病
回复
使用道具 举报
yaxingit889 | 未知
简洁- https://github.com/younger-1/
回复
使用道具 举报
luolinjian | 来自辽宁
可以可以
回复
使用道具 举报
okacha | 来自北京
我去~~这么花里胡哨
回复
使用道具 举报
mtukevin | 未知
[爱][爱]
回复
使用道具 举报
12下一页
快速回复
您需要登录后才可以回帖 登录 | 立即注册

当贝投影