目录

GitHub使用技巧

GitHub仓库怎么添加协议

如果一开始在GitHub上创建仓库时没有添加协议,可以用以下方式来重新添加相关的协议:

  1. 打开GitHub上的某个仓库,点击Create new file
  2. 在新建文件的页面上,输入文件名LICENSE,这时候你会发现在标题的右边多出来一个按钮Choose a license template,点击该按钮;
  1. 在新页面上选择一个你想要的协议,接着在最右边输入YearFull name,你会发现中间板块的年份和名称会发生变化,这是协议的预览界面,确认无误后点击最右边的Review and submit
  2. 最后填写commit信息,点击Commit changes即可。

使用GitHub上的开源项目来引入各种图表和图标

GitHub上有一些有意思的开源项目,通过借助GitHub的api来获取数据并生成对应的图表或者小图标,这里推荐几个有意思的项目。

githubchart-api

这个是项目地址:https://github.com/2016rshah/githubchart-api

该项目可以生成一个最近一年内的GitHub贡献图表,也就是GitHub首页上那个贡献日历表。用法很简单:

1
<img src="https://ghchart.rshah.org/lewky" />

https://ghchart.rshah.org是该项目的api地址,在后面加上GitHub的userId就能得到这个user当前一年的贡献图表。

此外该api还支持修改配色,在userId前加上十六进制颜色代码即可,如下:

1
<img src="https://ghchart.rshah.org/FFA500/lewky" />

效果如下:

https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/posts/github/githubchart.jpg
githubchart.jpg

shields

  • 这个是项目地址:https://github.com/badges/shields
  • 这个是项目官网的使用说明:https://shields.io/

该项目可以生成各种小图标,不仅仅是GitHub相关的图标,还有其他平台的图标。官网里有很详细的分类,还有很友好的一键生成,包括Html、Markdown等格式。用法其实都是类似的,只需要修改url里的用户名或者仓库名字就行:

1
2
3
4
5
/* GitHub的follow人数 */
<img alt="GitHub followers" src="https://img.shields.io/github/followers/lewky?style=social">

/* 项目的star人数 */
<img src="https://img.shields.io/github/stars/lewky/lewky.github.io">

这些图标可以通过?style=参数来修改风格,flat是默认风格,不指定style参数会使用默认风格,一共支持如下几种风格:

  • plastic
  • flat
  • flat-square
  • for-the-badge
  • social

此外,还支持通过colorlabellogologoColor这4个参数来更详细的定制,如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<img alt="GitHub followers" src="https://img.shields.io/github/followers/lewky?style=plastic">

<img alt="GitHub followers" src="https://img.shields.io/github/followers/lewky">

<img alt="GitHub followers" src="https://img.shields.io/github/followers/lewky?style=flat-square">

<img alt="GitHub followers" src="https://img.shields.io/github/followers/lewky?style=for-the-badge">

<img alt="GitHub followers" src="https://img.shields.io/github/followers/lewky?style=social">

<img alt="GitHub followers" src="https://img.shields.io/github/followers/lewky?color=FFA500&label=Test&logo=skype&logoColor=FFA500&style=social">

具体效果如下:

https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/posts/github/imgShields.jpg
imgShields.jpg

github-readme-stats

这个是项目地址:https://github.com/anuraghazra/github-readme-stats

这个项目支持展示4种类型的数据图表和多种风格的主题,有兴趣的可以去项目原地址看,里面提供了非常详细的Demo。关于图表卡片里的排行分数的官方说明如下:

Available ranks are S+ (top 1%), S (top 25%), A++ (top 45%), A+ (top 60%), and B+ (everyone). The values are calculated by using the cumulative distribution function using commits, contributions, issues, stars, pull requests, followers, and owned repositories.

Stats Card

这个卡片用来展示GitHub用户的统计信息,官方称为Stats Card

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

效果如下:

https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/posts/github/Stats-Card.jpg
Stats-Card

可以通过hide=参数来选择隐藏统计项目,可选项有:stars,commits,prs,issues,contribs,如下:

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

在统计提交总数时,可以通过count_private=true参数来将私有仓库也纳入统计范围:

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

show_icons=true参数用来控制是否显示图标,theme参数控制图标的风格主题,目前支持的内建主题有:dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula。用法如下:

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

Repo Card

GitHub首页只支持展示最多6个项目仓库卡片,但是通过该项目提供的Repo Card,可以轻松突破这个展示上限。用法如下:

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

效果如下:

https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/posts/github/Repo-Card.jpg
Repo-Card

可以通过show_owner参数来决定是否在仓库名字前加上用户名。

Top Languages Card

这个卡片可以展示使用最多的语言,用法如下:

1
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=lewky)](https://github.com/lewky)

效果如下:

https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/posts/github/Top-Languages-Card.jpg
Top-Languages-Card

  • exclude_repo=repo1,repo2参数可以排除指定的仓库
  • hide=language1,language2参数可以隐藏指定的语言
  • langs_count=参数指定统计多少门语言
  • layout=compact参数可以改变卡片布局为紧密布局

Wakatime Week Stats

这个卡片用来展示每周花在不同语言上的时间记录,用法如下:

1
[![willianrod's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=lewky)](https://github.com/lewky)

这个卡片和GitHub没啥关系,需要另外去注册wakatime的账号,注册后会发给用户一个key,具体用法请自行百度。

定制化

对于Stats CardRepo Card,还可以在URL里使用以下参数来自定义图表样式。

  • title_color - Card’s title color (hex color)
  • text_color - Body text color (hex color)
  • icon_color - Icons color if available (hex color)
  • bg_color - Card’s background color (hex color) or a gradient in the form of angle,start,end
  • hide_border - Hides the card’s border (boolean)
  • theme - name of the theme, choose from all available themes
  • cache_seconds - set the cache header manually (min: 1800, max: 86400)
  • locale - set the language in the card (e.g. cn, de, es, etc.)

对于bg_color参数,甚至还支持颜色渐变:

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

github-profile-trophy

这个是项目地址:https://github.com/ryo-ma/github-profile-trophy

这个项目可以展示GitHub用户统计信息,并表现为一系列奖杯。用法如下:

1
[![trophy](https://github-profile-trophy.vercel.app/?username=lewky)](https://github.com/lewky)

效果如下:

https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/posts/github/github-profile-trophy.jpg
github-profile-trophy

  • theme=参数可以改变主题风格:flat、onedark、gruvbox、dracula、monokai、chalk、nord、alduin、darkhub
  • title=参数可以只显示对应名称的奖杯,比如Stars Followers Commit Repositories Issues PullRequest等,可以用英文逗号来多重指定值,如title=Stars,Followers
  • rank=参数可以只显示对应排名的奖杯,比如SECRET SSS SS S AAA AA A B C等,可以用英文逗号来多重指定值,如rank=S,AAA
  • column=参数可以指定一行展示多少个奖杯,默认值是6(即一行全部展示所有奖杯)
  • row=参数可以指定最多可以用多少行展示奖杯,默认值是3(超出最大行数的奖杯会被隐藏)
  • margin-w=参数可以改变外间距的宽度,默认值是0
  • margin-h=参数可以改变外间距的高度,默认值是0

有兴趣的可以去项目原地址看看更具体的说明。

使用CDN加速GitHub的站点文件

jsdelivr为GitHub上的仓库文件做了CDN缓存,这是官方文档地址。可以通过下面的cdn地址格式来获取GitHub上的仓库文件:

1
2
3
4
5
6
// load any GitHub release, commit, or branch
https://cdn.jsdelivr.net/gh/user/repo@version/file
https://cdn.jsdelivr.net/gh/user/repo@branch/file

// add / at the end to get a directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/

cdn缓存的更新需要等一段时间,但是可以通过下面的url来清除缓存,达到更新cdn的目的。将cdn地址中的

1
https://cdn.jsdelivr.net/

替换成如下的

1
https://purge.jsdelivr.net/

添加GitHub Profile首页展示

在GitHub上创建一个和自己id同名的项目,新建一个README.md文档,该文档将作为你的GitHub首页来展示。可以利用上文提及的各种图表、图标等开源项目来渲染GitHub首页。

这里给个参考的例子:https://github.com/lewky/lewky

参考链接

注意
本文最后更新于 May 9, 2021,文中内容可能已过时,请谨慎使用。