Github个人首页美化

引言

本文将介绍如何从零开始美化自己的Github主页，让Github Profile展示更多有用的信息。

美化动机

起因是自己给Typora换了一个类似于hexo-next主题：

然后顺藤摸瓜在Github上找到了原作者，一看主页怎么长得和我差好多……反观自己除了仓库光秃秃的，立判高下。

Google 一番，原来 GitHub 在上个月就推出了自定义首页这个功能。并且结合 GitHub Action，可以有非常多的玩法，甚至可以显示 Twitter 、微博以及豆瓣的相关动态。

然后本着折腾的精神下载了人家的README研究了一下，也是用markdown写的，只是很有意思的是本着不求甚解的态度，它的代码比我想象中要简单，同时这些也可以用在自己博客的关于页面上（也是markdown），所以决定再折腾一下。

<img  align="right" src="https://github-readme-stats.vercel.app/api?username=BillChen2K&show_icons=true&count_private=true&hide_title=true">

### Hi there 👋

- 🗞 Code is poetry.
- 🌱 Currently an undergraduate in ECNU
- 📫 You can find me in my Tg Channel [@Hertz2000](https://t.me/Hertz2000).

#### Coding status last week ⌨️

<!--START_SECTION:waka-->
```text
C++          11 hrs 27 mins  ████████████░░░░░░░░░░░░░   48.61 % 
C            2 hrs 45 mins   ███░░░░░░░░░░░░░░░░░░░░░░   11.73 % 
CMake        2 hrs 9 mins    ██▒░░░░░░░░░░░░░░░░░░░░░░   09.15 % 
Python       1 hr 53 mins    ██░░░░░░░░░░░░░░░░░░░░░░░   08.00 % 
JavaScript   1 hr 12 mins    █▒░░░░░░░░░░░░░░░░░░░░░░░   05.15 % 
```
<!--END_SECTION:waka-->


<div>
<a href="https://spotify-now-playing.billchen2k.vercel.app/now-playing?open">
   <img align="right" src="https://spotify-now-playing.billchen2k.vercel.app/now-playing" width="256" height="64" alt="Now Playing">
</a>
</div>

<div>
<p align="right"><code>🎵 Now playing on Spotify</code></p>
</div>

<!--
**BillChen2K/BillChen2K** 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: ...
-->

创建个人主页

新建一个与自己Github用户名相同的仓库，下面的消息提示你这是Github为你预留的特殊仓库，该仓库的README就是我们前面看见的主页的展示。

You found a secret! Yousazoe/Yousazoe 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.

意思就是同名仓库是一个特殊的仓库，你可以通过添加一个 README.md显示在你的Github个人主页。但必须保证仓库是public的并且有README文件。

仓库统计信息

GitHub 统计卡片

将这行代码复制到你的 markdown 文件中，就是如此简单！

更改 ?username= 的值为你的 GitHub 用户名。

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

注: 等级基于用户的统计信息计算得出，详见 src/calculateRank.js

隐藏指定统计

想要隐藏指定统计信息，你可以调用参数 ?hide=，其值用 , 分隔。

选项：&hide=stars,commits,prs,issues,contribs

![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,prs)

将私人项目贡献添加到总提交计数中

你可以使用参数 ?count_private=true 把私人贡献计数添加到总提交计数中。

注：如果你是自己部署本项目，私人贡献将会默认被计数，如果不是自己部署，你需要分享你的私人贡献计数。

选项: &count_private=true

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

显示图标

如果想要显示图标，你可以调用 show_icons=true 参数，像这样：

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

主题

你可以通过现有的主题进行卡片个性化，省去手动自定义的麻烦。

通过调用 ?theme=THEME_NAME 参数，像这样：

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

所有现有主题

dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula

你可以预览所有可用主题或者签出主题配置文件, 而且如果你喜欢, 你也可以贡献新的主题 :D

自定义

你可以通过使用 URL 参数的方式，为你的 Stats Card 或 Repo Card 自定义样式。

常用选项：

title_color - 卡片标题颜色 （十六进制色码）
text_color - 内容文本颜色 （十六进制色码）
icon_color - 图标颜色（如果可用）（十六进制色码）
bg_color - 卡片背景颜色 （十六进制色码） 或者以 angle,start,end 的形式渐变
hide_border - 隐藏卡的边框 (布尔值)
theme - 主题名称，从所有可用主题中选择
cache_seconds - 手动设置缓存头 （最小值: 1800，最大值: 86400）
locale - 在卡片中设置语言 (例如 cn, de, es, 等等)

bg_color 渐变

你可以在 bg_color 选项中提供多个逗号分隔的值来呈现渐变，渐变的格式是 :-

&bg_color=DEG,COLOR1,COLOR2,COLOR3...COLOR10

缓存的注意事项: 如果 fork 数和 star 数少于 1k , Repo 卡片默认缓存是 4 小时（14400 秒），否则是 2 小时（7200）。另请注意缓存被限制为最短 2 小时，最长 24 小时。

统计卡片专属选项:

hide - 隐藏特定统计信息 (以逗号分隔)
hide_title - (boolean)
hide_rank - (boolean)
hide_border - (boolean)
show_icons - (boolean)
include_all_commits - 统计总提交次数而不是仅统计今年的提交次数 (boolean)
count_private - 统计私人提交 (boolean)
line_height - 设置文本之间的行高 (number)

Repo 卡片专属选项:

show_owner - 显示 Repo 的所有者名字 (boolean)

语言卡片专属选项:

hide - 从卡片中隐藏指定语言 (Comma seperated values)
hide_title - (boolean)
hide_border - (boolean)
layout - 在两个可用布局 default & compact 间切换
card_width - 手动设置卡片的宽度 (number)

⚠️ 重要: 如 Percent Encoding 所指定，语言名称应使用 uri 转义。 (例: c++ 应该是 c%2B%2B, jupyter notebook 应该是 jupyter%20notebook, 等.)

GitHub 更多置顶

GitHub 更多置顶允许你在使用 GitHub readme profile 时，在个人资料中置顶多于 6 个 repo 。

是的！你不再受限于置顶最多 6 个存储库了。

使用细则

复制粘贴这段代码到你的 README 文件中，并更改链接。

端点: api/pin?username=anuraghazra&repo=github-readme-stats

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)

Demo

使用 show_owner 变量将 Repo 所有者的用户名包含在内。

统计代码时长

这个功能非常有趣，这里我们要利用WakaTime对事情的统计功能，并绑定到Github来实现展示。官网：WakaTime

下面详细讲一下如何部署到Github：

登录WakaTime官网，注册一个WakaTime 账号
这里可以直接绑定Github账号登陆，非常的方便
在自己常用的 IDE 上下载 WakaTime 插件，配置上自己的 API Key
当注册好账号后，你会得到属于自己专属的API Key。然后在需要监控工作的IDE里安装WakaTime的插件，并配上自己的Key。官方上有非常详细的配置步骤

到此为止，其实本地的开发环境就已经被WakaTime所监控啦，数据会被传输到WakaTime然后在dashboard中展示。

除Clion外，WakaTime还支持很多其他的开发环境，如下：

将自己的 API Key 存到自己 Github 仓库的 secrets中
从项目里点击Setting -> Secrets -> New secret 创建一个。其中name需要填写WAKATIME_API_KEY，value就把WakaTime官网生成的API Key粘贴进去就行。

配置 GitHub 仓库的 Actions
我们还需要在项目里配置Actions。点击 Actions -> New workflow

把默认的内容全部删除，把下面的内容粘贴上：

name: Waka Readme
 
on:
  push:
    branches:
      - master
  workflow_dispatch:
  schedule:
    # Runs at 12am UTC
    - cron: '0 0 * * *'
 
jobs:
  update-readme:
    name: Update this repo's README 
    runs-on: ubuntu-latest
    steps:
      - uses: Yourname/waka-readme@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}

这里需要改的是uses中的地方换成你自己的名字。

注意：这里需要一个waka-readme的项目，请将https://github.com/athul/waka-readme中的项目fork到自己仓库里就行

点击 Waka Readme ，再点击run

当你看到正常跑起来之后，就离胜利不远啦！

在README文件中添加以下这段文字：

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

添加修改后，再次提交commit。然后，返回到主页，会看到以下这样，说明WakaTime其实已经关联上你的Github啦！需要等待一段时间（一天），就会同步到Github啦！

拿来主义

以下是我的配置；

### Hi there 👋


<img src="https://raw.githubusercontent.com/sagar-viradiya/sagar-viradiya/master/resources/banner.png" alt="Hello world">
<p align="center"> 
  Visitor count<br/>
  <img src="https://profile-counter.glitch.me/youszoe/count.svg" />
</p>

<br/>


- 🍻  Study at Beijing Normal University Zhuhai, _Computer Science_
- ⚡  C / C++ / C#
- ✍️  Blogger
- ♟  Chess / Chess960 


#### Coding status last week ⌨️

<!--START_SECTION:waka-->
```text
C++        1 hr 48 mins    ██████████░░░░░░░░░░░░░░░   39.98 % 
Markdown   1 hr 21 mins    ███████▒░░░░░░░░░░░░░░░░░   29.93 % 
YAML       42 mins         ████░░░░░░░░░░░░░░░░░░░░░   15.81 % 
C          10 mins         █░░░░░░░░░░░░░░░░░░░░░░░░   03.90 % 
Other      9 mins          █░░░░░░░░░░░░░░░░░░░░░░░░   03.66 % 
```
<!--END_SECTION:waka-->

<br/>
<center><img src="http://ghchart.rshah.org/409ba5/yousazoe" alt="" /></center>


<h6>* These nice badges are generated by <a href="https://shields.io/">Shields.io</a> and <a href="https://github.com/spencerwooo/Substats">Substats</a>.</h6>

除了代码统计其余换成自己的名称均可直接拿去使用。

补档

个人卡片

github-widgetbox

[✨] Beautiful, dynamic widgets for GitHub Readme pages. (Statistics, Skills, etc.)

![](https://github-widgetbox.vercel.app/api/profile?username=Yousazoe&data=followers,repositories,stars,commits)

成就图标

GitHub Profile Trophy

🏆 Add dynamically generated GitHub Stat Trophies on your readme

![](https://github-profile-trophy.vercel.app/?username=Yousazoe&column=7)

贪吃蛇小游戏

generate-snake-game-from-github-contribution-grid

Generates a snake game from a github user contributions graph

实时月球

Moon.svg

Add real-time moon on your page!

<!-- real time -->
<a href="https://moon-svg.minung.dev">
  <img src="https://moon-svg.minung.dev/moon.svg?theme=basic" alt="moon.svg" />
</a>

<!-- specific date -->
<a href="https://moon-svg.minung.dev">
  <img src="https://moon-svg.minung.dev/moon.svg?date=2022-03-24&theme=basic" alt="moon.svg" />
</a>

Fl0w3r

Github个人首页美化

引言

美化动机

创建个人主页

仓库统计信息

GitHub 统计卡片

隐藏指定统计

将私人项目贡献添加到总提交计数中

显示图标

主题

所有现有主题

自定义

bg_color 渐变

统计卡片专属选项:

Repo 卡片专属选项:

语言卡片专属选项:

GitHub 更多置顶

使用细则

Demo

热门语言卡片

使用细则

隐藏指定语言

紧凑的语言卡片布局

Demo

全部 Demos

快速提示 (对齐 Repo 卡片)

统计代码时长

拿来主义

补档

个人卡片

成就图标

贪吃蛇小游戏

实时月球

参考