前言

平時(shí)大家在在逛 github 時(shí)或多或少都看到過(guò)項(xiàng)目首頁(yè)各式各樣的小徽章,不知道你是否和我一樣好奇這些小徽章都是哪來(lái)的呢?

首先我們先來(lái)一睹為快目前前端開(kāi)發(fā)的三大主流框架: var ,看一看他們的 github 項(xiàng)目首頁(yè)有哪些小徽章吧!

• Vue : https://github.com/vuejs/vue

• Angular : https://github.com/angular/angular

• React : https://github.com/facebook/react

小結(jié):

前端三大框架的徽章均不相同,由此可見(jiàn),這應(yīng)該不是 github 統(tǒng)一分發(fā)而是自定義行為!

雖然不是統(tǒng)一分配的,但也不是毫無(wú)規(guī)律可尋,想要制作專屬的小徽章,其實(shí)真的很簡(jiǎn)單!

什么是徽章

徽章是一種小巧精美的小圖標(biāo),一般配有相關(guān)文字進(jìn)行輔助說(shuō)明,富有表現(xiàn)力.

不僅出現(xiàn)于 github 項(xiàng)目主頁(yè),凡是能夠表現(xiàn)圖片的地方都可以出現(xiàn)徽章,本質(zhì)上是一種 svg 格式的矢量圖標(biāo).

下面以自定義 github-snowdreams1006-brightgreen.svg 徽章為例,簡(jiǎn)單認(rèn)識(shí)一下徽章.

• 在線鏈接

在線鏈接: github-snowdreams1006-brightgreen.svg

https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg

• 瀏覽器效果

打開(kāi)在線鏈接,并檢查當(dāng)前網(wǎng)頁(yè),豁然開(kāi)朗,徽章是一種 svg 實(shí)現(xiàn)的矢量圖標(biāo).

• svg VS png

如果說(shuō) svg 是矢量圖形而 png 卻不是,所以不妨將 png 姑且稱之為標(biāo)量圖形.

svg 是矢量圖形,png 是標(biāo)量圖形,兩者均能實(shí)現(xiàn)類似效果,只不過(guò)矢量圖形不論怎么方法都能保持原樣,并不會(huì)像 png 那樣會(huì)失真而已.

既然兩種均能表現(xiàn)相同的效果,現(xiàn)在我們就來(lái)演示一下 png 的實(shí)現(xiàn)效果.

svg 轉(zhuǎn) png 在線網(wǎng)站: https://cloudconvert.com/svg-to-svg

左側(cè)的 svg 無(wú)論放大多少倍,依然保持原樣,清晰度保持不變.右側(cè)的 png 一旦放大,立馬變得模糊不清.

如何使用徽章

大多數(shù)徽章都是 svg 格式,當(dāng)然也不排除某些徽章是 png 格式,不論怎么說(shuō),一律當(dāng)成圖標(biāo)使用就可以了.

如果你和我一樣,希望在 markdown 文件中使用徽章,那么建議使用在線鏈接,或者引入本地 svg 相關(guān)文件.

徽章格式 : [](超鏈接地址) 即超鏈接內(nèi)部嵌套圖片

[](https://github.com/snowdreams1006)

如果你是在 html 文件使用徽章,同樣先取得在線徽章地址,然后按照 html 語(yǔ)法插入圖片即可.

徽章格式 : <a href="超鏈接地址"><img src="圖片源地址" alt="圖片文字說(shuō)明"></a> 即超鏈接內(nèi)部嵌套圖片

<a href="https://github.com/snowdreams1006"><img src="https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg" alt="github"> </a>

不論是什么語(yǔ)法,最核心最根本的獲得到徽章鏈接,至于不同語(yǔ)言有著各自的語(yǔ)法,按照語(yǔ)言規(guī)則手動(dòng)拼接就好.

• Badge URL

https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg

• Markdown

[](https://github.com/snowdreams1006)

• HTML

<a href="https://github.com/snowdreams1006"><img src="https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg" alt="github"></a>

• Textile

!https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg!:https://github.com/snowdreams1006

• RDOC

{<img src="https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg" alt="github" />}[https://github.com/snowdreams1006]

• AsciiDoc

image:https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg["github", link="https://github.com/snowdreams1006"]

• RST

.. image:: https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg:target: https://github.com/snowdreams1006

徽章分類

如果以徽章的格式為標(biāo)準(zhǔn),那么可以分為svg 和 png 兩類.

• svg

https://badge.fury.io/js/gitbook-plugin-mygitalk.svg

• png

https://badge.fury.io/js/gitbook-plugin-mygitalk.png

如果以徽章的樣式為標(biāo)準(zhǔn),那么可以分為默認(rèn)樣式和自定義樣式兩類.

• 默認(rèn)樣式

https://img.shields.io/github/stars/snowdreams1006/snowdreams1006.github.io.svg?style=social

• 自定義樣式

https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg

如果以徽章的內(nèi)容數(shù)據(jù)是否動(dòng)態(tài)為標(biāo)準(zhǔn),那么可以分為靜態(tài)數(shù)據(jù)和動(dòng)態(tài)數(shù)據(jù)兩類.

靜態(tài)數(shù)據(jù)意味著數(shù)據(jù)本身是不變的,只要在線鏈接不變,那么生成的徽章永遠(yuǎn)不會(huì)改變,而動(dòng)態(tài)數(shù)據(jù)意味著生成徽章的數(shù)據(jù)是動(dòng)態(tài)變化的,即使在線鏈接不變,當(dāng)數(shù)據(jù)本身發(fā)現(xiàn)變化時(shí),徽章自然隨之更新.

• 靜態(tài)數(shù)據(jù)

https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg

• 動(dòng)態(tài)數(shù)據(jù)

https://badge.fury.io/js/gitbook-plugin-mygitalk.svg

靜態(tài)數(shù)據(jù)示例中 github-snowdreams1006-brightgreen.svg 數(shù)據(jù)不會(huì)更改,自然生成的徽章也不會(huì)變.動(dòng)態(tài)數(shù)據(jù)示例中 gitbook-plugin-mygitalk.svg 是 npm 的版本號(hào),當(dāng)項(xiàng)目升級(jí)后,版本號(hào)會(huì)發(fā)生更改,那么生成的徽章也會(huì)隨之更新.

如果以徽章的內(nèi)容數(shù)據(jù)來(lái)源為標(biāo)準(zhǔn),那么可以有無(wú)數(shù)多的分類.

• GitHub

https://badgen.net/github/stars/snowdreams1006/gitbook-plugin-mygitalk

• Npm

https://badgen.net/npm/dt/gitbook-plugin-mygitalk

• Docker

https://badgen.net/docker/stars/library/centos

如果以徽章的內(nèi)容數(shù)據(jù)用途為標(biāo)準(zhǔn),那么也可以有無(wú)數(shù)多的分類.

• 構(gòu)建狀態(tài)

https://img.shields.io/travis/GitbookIO/gitbook.svg

• 代碼覆蓋率

https://img.shields.io/codecov/c/github/vuejs/vue.svg

• 代碼分析

https://img.shields.io/github/languages/top/snowdreams1006/snowdreams1006.github.io.svg

徽章來(lái)源

徽章有不同的分類,不管是哪種分類,在線徽章最為簡(jiǎn)單便捷,下面就簡(jiǎn)單介紹下提供在線生成徽章的網(wǎng)站.

• https://shields.io/
• https://badgen.net/
• https://forthebadge.com/
• https://badge.fury.io/
• https://github.com/boennemann/badges

https://shields.io/

適用于絕大多數(shù)情況,默認(rèn)按照徽章內(nèi)容分類,Build,Code Coverage,Analysis 等多主題,同時(shí)支持自定義徽章和動(dòng)態(tài)徽章.

如果徽章的主題明確,那么根據(jù)網(wǎng)站提供的主題對(duì)號(hào)入座即可在線生成徽章,下面以 gitbook-plugin-mygitalk 為例,簡(jiǎn)要說(shuō)明如何獲得相應(yīng)徽章鏈接.

gitbook-plugin-mygitalk 是 gitbook 的一款評(píng)論插件.

打開(kāi)網(wǎng)站后按照分類,選擇其中一個(gè)主題,點(diǎn)擊進(jìn)去后填寫目標(biāo)信息,即可在線生成徽章.

• 瀏覽已支持的主體,選擇 License 許可證主題.

• 瀏覽已支持的 License 許可證列表,選擇 NPM 許可證.

• 填寫好正確的 npm 包信息并實(shí)時(shí)預(yù)覽,然后點(diǎn)擊按鈕復(fù)制徽章鏈接或者或者特定格式的徽章.


按照主題生成徽章真的很簡(jiǎn)單,首先對(duì)號(hào)入座,然后按需生成相應(yīng)徽章即可,唯一的要求就是對(duì)號(hào)入座!

如果默認(rèn)提供的徽章主題沒(méi)有適合自己的徽章,或者想要自定義徽章效果,那么也可以在線制作私人訂制徽章.

• 打開(kāi)網(wǎng)站后往下拉,找到 Your Badge 區(qū)域,準(zhǔn)備制作專屬徽章.

• 填寫(Label)標(biāo)簽-(Message)信息-(Color)顏色等信息后,點(diǎn)擊(Make Badge)生成徽章.

• 點(diǎn)擊生成徽章后默認(rèn)會(huì)在當(dāng)前標(biāo)簽頁(yè)面打開(kāi)該鏈接,手動(dòng)復(fù)制鏈接并調(diào)整成目標(biāo)格式即可.


https://badgen.net/

徽章內(nèi)容來(lái)源種類較多,默認(rèn)按照平臺(tái)分類,按照特定規(guī)則生成徽章,需要手動(dòng)拼接在線鏈接,略顯繁瑣.

https://badgen.net/badge/:subject/:status/:color?icon=github──┬── ───┬─── ──┬─── ──┬── ────┬──────│ │ │ │ └─ Extra Options (label, list, icon, color)│ │ │ ││ TEXT TEXT RGB / COLOR_NAME ( optional )│"badge" - default (static) badge generator

雖然支持顏色,圖標(biāo)以及查詢參數(shù)等高級(jí)用法,但是還是習(xí)慣性采用默認(rèn)設(shè)置,下面動(dòng)手開(kāi)始制作徽章吧!

• 切換到默認(rèn)動(dòng)態(tài)徽章選項(xiàng)卡,選擇 GitHUb 徽章.

• 選擇 stars 徽章,將 micromatch 替換成目標(biāo)信息.

/github/stars/micromatch/micromatch 替換成 /stars/snowdreams1006/snowdreams1006.github.io

• 預(yù)覽徽章效果并手動(dòng)修改成目標(biāo)格式.


除了支持動(dòng)態(tài)徽章,同樣也支持靜態(tài)徽章,切換到 STATIC BADGES 選項(xiàng)卡,一起來(lái)生成靜態(tài)徽章吧!


按照徽章的在線鏈接規(guī)則,應(yīng)該也支持自定義徽章,再次回顧一下鏈接規(guī)則:

規(guī)則 : https://badgen.net/badge/:subject/:status/:color ,如果是自定義動(dòng)態(tài)鏈接,估計(jì)不支持吧!


https://forthebadge.com/

扁平化的徽章,支持的徽章數(shù)量有限,不支持自定義徽章.

網(wǎng)站首頁(yè)默認(rèn)提供了一些預(yù)覽徽章,左側(cè)是復(fù)制 image 鏈接,右側(cè)是復(fù)制 markdown 鏈接.

[](https://forthebadge.com)

網(wǎng)站首頁(yè)默認(rèn)展示的徽章畢竟有限,如果找不到理想徽章,豈不是白介紹了這個(gè)網(wǎng)站,當(dāng)然不能夠!

VIEW ALL 查看目前支持的全部徽章,如果還是找不到徽章,那就真的沒(méi)有.

https://badge.fury.io/

版本徽章,支持各類平臺(tái)版本,包括 npm ,Ruby,Python,Go 等平臺(tái).

選擇目標(biāo)平臺(tái)并輸入包管理信息,即可在線生成各個(gè)類型的徽章版本.

[](https://badge.fury.io/js/gitbook-plugin-mygitalk)

排版布局

默認(rèn) markdown 實(shí)現(xiàn)的圖片是依次排開(kāi)的,無(wú)法自定義樣式,而 markdown 語(yǔ)法同時(shí)也兼容 html 語(yǔ)法,因此我們可以用 html 語(yǔ)法實(shí)現(xiàn)居中對(duì)齊.

<p align="center"><a href="https://circleci.com/gh/vuejs/vue/tree/dev"><img src="https://img.shields.io/circleci/project/github/vuejs/vue/dev.svg" alt="Build Status"></a><a href="https://codecov.io/github/vuejs/vue?branch=dev"><img src="https://img.shields.io/codecov/c/github/vuejs/vue/dev.svg" alt="Coverage Status"></a><a href="https://www.npmjs.com/package/vue"><img src="https://img.shields.io/npm/dm/vue.svg" alt="Downloads"></a><a href="https://www.npmjs.com/package/vue"><img src="https://img.shields.io/npm/l/vue.svg" alt="License"></a><a href="https://chat.vuejs.org/"><img src="https://img.shields.io/badge/chat-on%20discord-7289da.svg" alt="License"></a> </p>

拋磚引玉

• 社交化徽章

   

• 自定義徽章

[](https://github.com/snowdreams1006) [](http://weixin.qq.com/r/cy5CWvvE5Kabrb8593th) [](https://www.imooc.com/u/5224488/articles) [](https://www.jianshu.com/u/577b0d76ab87) [](https://blog.csdn.net/weixin_38171180) [](https://www.cnblogs.com/snowdreams1006/) [](https://juejin.im/user/582d5cb667f356006331e586) [](https://segmentfault.com/u/snowdreams1006) [](https://my.oschina.net/snowdreams1006) [](https://cloud.tencent.com/developer/user/2952369/activities)

• 進(jìn)度條徽章

[](https://github.com/fehmicansaglam/progressed.io) [](https://github.com/fehmicansaglam/progressed.io) [](https://github.com/fehmicansaglam/progressed.io) [](https://github.com/fehmicansaglam/progressed.io)

參考文檔

• GitHub 項(xiàng)目徽章的添加和設(shè)置
• 玩轉(zhuǎn) Github 徽章
• 為你的Github README生成漂亮的徽章和進(jìn)度條
• 給python項(xiàng)目在github貼上build和pypi小徽章
• https://github.com/igrigorik/ga-beacon
• https://github.com/boennemann/badges
• https://ellerbrock.github.io/open-source-badges/
• http://githubbadges.com/

轉(zhuǎn)載于:https://www.cnblogs.com/snowdreams1006/p/11068107.html

總結(jié)

以上是生活随笔為你收集整理的工具资源系列之 github 上各式各样的小徽章从何而来?的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。