GitHub主页面美化

发布时间 2023-07-17 02:50:22作者: Silence_1018

1、创建仓库

  • 创建一个仓库,仓库名称和GitHub用户名保持一致
  • 仓库类型为公开,即Public
  • 勾选Add a README file,用于显示自定义内容
  • 点击Create respository确定创建

image

2、开始美化

所用仓库:github-readme-stats

阅读该仓库readme.md文件,该文件为使用说明文档,默认显示的是英文版,文档全部在该仓库/docs目录下,点击顶部简体中文直达中文版

改仓库方案主要包含以下模块:

GitHub Stats Card-状态卡片

主要显示当前GitHub用户的获得Start数、累计提交数(commit)、拉取请求数(PR)、审查PR数、指出问题数(issue)、参与贡献数、总体评分等。

添加方法

 [![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

上面的代码其实就是markdown的图片链接语法![图片提示词](图片地址)和普通链接语法[链接标题](链接地址)的嵌套,将图片链接作为普通链接的标题,点击图片就会跳到作者的GitHub,作者这么写是为了引流,
所以我们在自己写的时候可以解开嵌套,写法如下:

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
  • 将上面一行代码复制粘贴至自己第一步创建仓库的readme文件,并将anuraghazra替换为自己的GitHub用户名

  • 你也可以将其中的链接复制出来,在readme文件写一个img标签,将链接作为src属性值

  <img align='center'src="https://github-readme-stats.vercel.app/api?username=silence1018&show=reviews&show_icons=true&theme=tokyonight"/> `

定制化

GitHub Stats Card使用文档还有各种自定义配置属性,包括字体、图标、显示项目、主题等,具体写法请参阅文档

显示效果

image

Top Languages Card-语言卡片

主要显示当前GitHub用户常用语言。注意这里只统计属于自己的非fork非私有仓库的语言使用情况

添加方法

  ![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)
  • 将上面一行代码复制粘贴至自己第一步创建仓库的readme文件,并将anuraghazra替换为自己的GitHub用户名

  • 你也可以将其中的链接复制出来,在readme文件写一个img标签,将链接作为src属性值

<img align='center'src="https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra"/> `

定制化

具体写法请参阅文档

显示效果

image

GitHub Extra Pins-置顶卡片

最多显示6个当前GitHub用户置顶过(Pin)的项目。

添加方法

  ![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)
  • 将上面一行代码复制粘贴至自己第一步创建仓库的readme文件,并将anuraghazra替换为自己的GitHub用户名

  • 你也可以将其中的链接复制出来,在readme文件写一个img标签,将链接作为src属性值

<img align='center'src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats"/> `

显示效果

这里没有定制化效果,所以也没有特殊的显示效果,仅仅就是可以自定义显示位置,因为这个Pins模块GitHub默认就有显示

Wakatime Stats Card-时长统计卡片

这个卡片主要用于配合Wakatime进行编码时长的统计

添加方法

  ![Harlok's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs)
  • 将上面一行代码复制粘贴至自己第一步创建仓库的readme文件,并将ffflabs替换为自己的GitHub用户名

  • 你也可以将其中的链接复制出来,在readme文件写一个img标签,将链接作为src属性值

<img align='center'src="https://github-readme-stats.vercel.app/api/wakatime?username=ffflabs"/> 

显示效果

image

不过,在代码时长统计这块,我们不使用这个仓库,使用另外一个仓库,下面??我会有介绍

3、Wakatime

介绍

WakaTime是一个编码追踪分析网站。通过为集成开发环境和文本编辑器安装WakaTime插件,分析编码的系统、用户、语言、时间等信息,统计出详细的数据,并以可视化形式在WakaTime网站的dashboard面板显示。

注册登录

注册登录,这里建议直接使用GitHub账号登录

image

获取Secret API Key

获取Secret API Key

image

编辑器安装WakaTime插件

这里以VsCode为例,在左侧拓展商店搜索Wakatime并点击安装

image

WakaTime插件设置Api Key

作用:这一步的作用是将VsCode上的WakaTime插件和你的WakaTime账号绑定起来,这样WakaTime就可以获取到你在编辑器的编码信息了

方法: 快捷键⌘command + ⇧shift,出现搜索框,输入关键字waka即可,选择WakaTime: Api Key,再次出现输入框,全选清除输入框内原有内容,粘贴在WakaTime网站复制的Secret API Key,最后
按下回车即可

image

image

4、创建一个GitHub个人访问令牌(Personal access tokens)

按照Settings / DeveloperSettings /Personal access tokens/Tokens的菜单路径找到创建token的地方,点击右上角Generate new token按钮。Note相当于备注,随便填,尽量用英文;下面的
Select scopes表示该token的访问权限,勾选repo(完全的仓库权限)和user(完全的用户信息数据权限),最后点击最下面的Generate token按钮完成创建。

image

创建完成后弹出如下界面,点击复制创建的token,这个token只有这一次可见,切记将其复制到其它地方备用

image

5、为新建的仓库创建两个秘钥(secrets)

WAKATIME_API_KEY

作用: 用于获取WakaTime的统计数据

回到文章开头我们创建的仓库,进入该仓库,按照Settings/Secrets and variables/Actions的菜单路径找到创建secrets的地方,点击右上New repository secret按钮,Name值填WAKATIME_API_KEY,
secretWakaTime网站上的Secret API Key,最后点击确定

image

GH_TOKEN

作用:用于获取用户信息和操作仓库

再次重复上面的步骤创建名为GH_TOKENsecret,Name值填GH_TOKEN,secret填我们在第4步创建的token的值,最后点击确定

image

6、为新建的仓库创建工作流

作用:定时或手动执行一系列操作,并将我们想要的统计结果添加到readme文件

还是文章开头我们创建的仓库,点击Action菜单,再次点击set up a workflow yourself,打开一个工作流配置文件编辑界面。

接下来轮到我们要用到的第二个仓库waka-readme-stats了,我们打开这个仓库,找到配置文件示例,复制其内容到我们的工作流配置文件编辑界面中,然后点击右上角Commit Chanages按钮,然后会在新建的仓库下生成一个workflows文件夹,里面有个main.yml文件就是刚才的工作流配置文件。

image

如上图所示,这里的WAKATIME_API_KEYGH_TOKEN就是我们第5步创建的那两个,有了这个GH_TOKEN,这个工作流配置文件才能自动执行。

另外在waka-readme-stats仓库的action.yml文件中有部分关于上述配置字段的描述,可以看看

配置中的cron定时任务cron表达式,感兴趣的可以参考定时任务cron表达式详解在线Cron表达式生成器

7、在readme文件中为统计数据放置占位符

<!--START_SECTION:waka-->
<!--END_SECTION:waka-->

打开新建仓库的readme文件进入编辑模式,将上述代码复制粘贴到你想要展示WakaTime统计数据的位置,然后点右上角Commit Changes按钮提交修改

8、手动执行一次工作流

因为我们的工作流设置的是每天晚上0点自动执行,所以为了看到效果,我们需要先手动执行一次工作流。

再次回到新建仓库的Actions面板,点击右侧Waka Readme,中间右上角会出现我们刚才创建的yml配置文件名,即这个工作流就是我们刚才创建的那个,然后点击右侧Run workflow按钮,展开后,再次点击Run workflow,手动执行工作流

image

几秒后就可以看到工作流正在执行,可以点击进去查看执行进度

image

image

最后执行完成后,我们回到我们的GitHub个人主页的概况页面,也就是Your profil里面的Overview查看效果

image


除了上述美化外,readme还有很多美化方案,下面放一些链接供大家参考

waka-readme-stats

github-readme-stats

Awesome GitHub Profile README

Github 首页美化教程(一):打造个性化的GitHub首页