GitHub主页面美化

1、创建仓库

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

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使用文档还有各种自定义配置属性，包括字体、图标、显示项目、主题等，具体写法请参阅文档

显示效果

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"/> `

定制化

具体写法请参阅文档

显示效果

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"/> 

显示效果

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

3、Wakatime

介绍

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

注册登录

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

获取Secret API Key

获取Secret API Key

编辑器安装WakaTime插件

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

WakaTime插件设置Api Key

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

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

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

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

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

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

WAKATIME_API_KEY

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

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

GH_TOKEN

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

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

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

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

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

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

如上图所示，这里的WAKATIME_API_KEY和GH_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,手动执行工作流

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

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

---

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

waka-readme-stats

github-readme-stats

Awesome GitHub Profile README

Github 首页美化教程（一）：打造个性化的GitHub首页