阅读 285

自定义Github首页

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

WangScaler: 一个用心创作的作者。

声明:才疏学浅,如有错误,恳请指正。

你的首页是不是和我的一样,普通的不能再普通了,请忽略我的Github没有好的项目,也没有星星。

image-20211011104915945.png

你是不是也认为别人的Github那么炫酷是因为别人充钱开启了VIP模式?亦或是他们都是技术大佬,获得了官方特殊的关照?其实并不是这样,那别人是怎么做到那么炫酷的呢?来和我一起探索Github的彩蛋。

创建项目

通过新建项目,创建一个和你同名的项目。这时候你会得到一个特殊的提示,如下图:

image-20211011105424696.png

我们必须按照这个提示的要求,将项目公开,然后自动生成README才可以自定义首页,相反,如果我们不想使用自定义首页的方法就是将这个同名的项目设置为私有Private即可。

自定义首页

编辑自动生成的README文档,官方已经给你提供了一段模板,不过是注释的,也不够炫酷,今天给大家推荐几个开源的模板。

Github基本信息

可以根据这个项目github-readme-stats进行配置。可以配置你的Github的统计信息以及使用语言。

通过改变URL的参数来调整图片,例如修改参数theme=radical来更换主题,文档写的很清楚,自己去选择适合自己的参数吧。我最终的配置如下:

<p align = "center">
  <img src = "https://github-readme-stats.vercel.app/api?username=wangscaler&count_private=true&show_icons=true&theme=tokyonight&line_height=27">
  <img src = "https://github-readme-stats.vercel.app/api/top-langs/?username=wangscaler&theme=tokyonight">
</p>
复制代码

github在个人资料可以置顶6个repo,使用这个就没有约束了,可以将任意多个项目配置在首页。

<p align = "center">
<a href="https://github.com/wangscaler/myblog">
  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=wangscaler&repo=myblog&theme=tokyonight" />
</a>
<a href="https://github.com/wangscaler/python-wenzimaoxian ">
  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=wangscaler&repo=python-wenzimaoxian &theme=tokyonight" />
</a>
<a href="https://github.com/wangscaler/emqx-exproto-python-sdk">
  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=wangscaler&repo=emqx-exproto-python-sdk&theme=tokyonight" />
</a>
<a href="https://github.com/wangscaler/emqx-extension-examples">
  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=wangscaler&repo=emqx-extension-examples&theme=tokyonight" />
</a>
</p>
复制代码

Github活跃图

可以根据这个项目github-readme-activity-graph进行配置。里面也提供了很多主题,我最后的配置如下:

<p align = "center">
 <img src="https://activity-graph.herokuapp.com/graph?username=wangscaler&theme=react-dark">
</p>
复制代码

Github streak

可以根据这个项目github-readme-streak-stats进行配置

<p align = "center">
  <img align = "left" src = "https://github-readme-streak-stats.herokuapp.com/?user=wangscaler&theme=tokyonight" width="45%">
</p>
复制代码

我这里为了好看,和下面的奖杯放在了一块。

Github奖杯

可以根据这个项目github-profile-trophy进行配置。可以更改奖杯的排名,也可以进行选择性展示,最值得探索的是官方提供了一个小彩蛋,有一些秘密奖杯,当达到触发条件才会获取,你快去找找吧。

我的配置:

<p align = "center">
  <img align = "right" src = "https://github-profile-trophy.vercel.app/?username=wangscaler&theme=tokyonight" width="50%" >
</p>
复制代码

其他模板

这个项目Awesome-Profile-README-templates提供了很多模板,供我们使用。你们可以找到好看的自己喜欢的,添加到自己的博客中去。例如我这里的配置是

<img align="right" alt="GIF" src="https://raw.githubusercontent.com/devSouvik/devSouvik/master/gif3.gif" width="500"/>
​
- 🔭 &nbsp; 大家好,我是Wangscaler。
- 🤔 &nbsp; 非常欢迎你来访问我的Github。
- 🎓 &nbsp; 尽管这里可能并没有你需要的项目。
- 💼 &nbsp; 但是你的到来会使这里变得蓬荜生辉。
- 🌱 &nbsp; 既然已经来了,请不要吝啬你手里的Star。
- ✍️ &nbsp; Fork到自己的仓库,否则你可能会失去它。
- ☕ &nbsp; 既然来了,就是你我有缘,联系我交朋友。 
​
<table>
  <tbody>
    <tr valign="top">
      <td width="25%" align="center">
       <a href="https://blog.scalerwang.com">博客</a>
       <br><br><br>
       记录知识
      </td>
      <td width="25%" align="center">
       <a href="https://juejin.cn/user/493043443054494">掘金</a>
       <br><br><br>
       技术文章
     </td>
     <td width="25%" align="center">
       <a href="https://game.scalerwang.com">游戏</a>
      <br><br><br>
       开源游戏
     </td>
      <td width="25%" align="center">
       <a href="https://blog.csdn.net/qq_41327483">CSDN</a>
       <br><br><br>
       爬坑日记
     </td>
    </tr>
  </tbody>
</table>复制代码

浏览量统计

可以根据这个github-profile-views-counter进行配置,这个每刷新一次就会加一,没什么软用,权当好玩加进去吧。

配置如下

<p align = "center" >
  <img src = "https://komarev.com/ghpvc/?username=wangscaler" >
</p>复制代码

其他工具

在网上看大家普遍使用的WakaTime ,用Github授权之后根据官方文档配置就可以实现上述的效果图,我没有尝试,这里推荐给大家,感兴趣的可以去试试。

随机图片

像上面其他模板个人介绍右边的图片,我使用的是模板提供的图片,大家可以使用api.lyiqk.cn/这个网站获取动态随机的图片,让你的首页不再单调。

最后

因为这个项目只能是公开的Github才能显示出效果,所以大家也可以直接访问我的Github查看我的源码。最后效果图如下。

image-20211011154158746.png

image-20211011154216562.png 心动不如行动,如果你还没有自定义首页的话,快去试试吧!

来都来了,点个赞再走呗!

关注WangScaler,祝你升职、加薪、不提桶!

文章分类
前端
文章标签