github 上各式各樣的小徽章從何而來?

前言

平時大家在在逛 github 時或多或少都看到過項目首頁各式各樣的小徽章,不知道你是否和我一樣好奇這些小徽章都是哪來的呢?

首先我們先來一睹爲快目前前端開發的三大主流框架: var ,看一看他們的 github 項目首頁有哪些小徽章吧!

小結:

前端三大框架的徽章均不相同,由此可見,這應該不是 github 統一分發而是自定義行爲!

雖然不是統一分配的,但也不是毫無規律可尋,想要製作專屬的小徽章,其實真的很簡單!

什麼是徽章

徽章是一種小巧精美的小圖標,一般配有相關文字進行輔助說明,富有表現力.

不僅出現於 github 項目主頁,凡是能夠表現圖片的地方都可以出現徽章,本質上是一種 svg 格式的矢量圖標.

下面以自定義 github-snowdreams1006-brightgreen.svg 徽章爲例,簡單認識一下徽章.

• 在線鏈接

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

• 瀏覽器效果

打開在線鏈接,並檢查當前網頁,豁然開朗,徽章是一種 svg 實現的矢量圖標.

• svg VS png

如果說 svg 是矢量圖形而 png 卻不是,所以不妨將 png 姑且稱之爲標量圖形.

svg 是矢量圖形, png 是標量圖形,兩者均能實現類似效果,只不過矢量圖形不論怎麼方法都能保持原樣,並不會像 png 那樣會失真而已.

如何使用徽章

大多數徽章都是 svg 格式,當然也不排除某些徽章是 png 格式,不論怎麼說,一律當成圖標使用就可以了.

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

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

不論是什麼語法,最核心最根本的獲得到徽章鏈接,至於不同語言有着各自的語法,按照語言規則手動拼接就好.

• BadgeURL

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

• Markdown

[![github](https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg)](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

徽章分類

如果以徽章的格式爲標準,那麼可以分爲 svg 和 png 兩類.

如果以徽章的樣式爲標準,那麼可以分爲默認樣式和自定義樣式兩類.

如果以徽章的內容數據是否動態爲標準,那麼可以分爲靜態數據和動態數據兩類.

靜態數據意味着數據本身是不變的,只要在線鏈接不變,那麼生成的徽章永遠不會改變,而動態數據意味着生成徽章的數據是動態變化的,即使在線鏈接不變,當數據本身發現變化時,徽章自然隨之更新.

靜態數據示例中 github-snowdreams1006-brightgreen.svg 數據不會更改,自然生成的徽章也不會變.動態數據示例中 gitbook-plugin-mygitalk.svg 是 npm 的版本號,當項目升級後,版本號會發生更改,那麼生成的徽章也會隨之更新.

如果以徽章的內容數據來源爲標準,那麼可以有無數多的分類.

如果以徽章的內容數據用途爲標準,那麼也可以有無數多的分類.

徽章來源

徽章有不同的分類,不管是哪種分類,在線徽章最爲簡單便捷,下面就簡單介紹下提供在線生成徽章的網站.

• https://shields.io/

• https://badgen.net/

• https://forthebadge.com/

• https://badge.fury.io/

• https://github.com/boennemann/badges

拋磚引玉

• 社交化徽章

![GitHub followers](https://img.shields.io/github/followers/snowdreams1006.svg?style=social)	
![GitHub forks](https://img.shields.io/github/forks/snowdreams1006/snowdreams1006.github.io.svg?style=social)	
![GitHub stars](https://img.shields.io/github/stars/snowdreams1006/snowdreams1006.github.io.svg?style=social)	
![GitHub watchers](https://img.shields.io/github/watchers/snowdreams1006/snowdreams1006.github.io.svg?style=social)

• 自定義徽章

[![github](https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg)](https://github.com/snowdreams1006)	
[![wechat](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)](http://weixin.qq.com/r/cy5CWvvE5Kabrb8593th)	
[![慕課網](https://img.shields.io/badge/%E6%85%95%E8%AF%BE%E7%BD%91-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://www.imooc.com/u/5224488/articles)	
[![簡書](https://img.shields.io/badge/%E7%AE%80%E4%B9%A6-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://www.jianshu.com/u/577b0d76ab87)	
[![csdn](https://img.shields.io/badge/csdn-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://blog.csdn.net/weixin_38171180)	
[![博客園](https://img.shields.io/badge/%E5%8D%9A%E5%AE%A2%E5%9B%AD-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://www.cnblogs.com/snowdreams1006/)	
[![掘金](https://img.shields.io/badge/%E6%8E%98%E9%87%91-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://juejin.im/user/582d5cb667f356006331e586)	
[![思否](https://img.shields.io/badge/%E6%80%9D%E5%90%A6-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://segmentfault.com/u/snowdreams1006)	
[![開源中國](https://img.shields.io/badge/%E5%BC%80%E6%BA%90%E4%B8%AD%E5%9B%BD-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://my.oschina.net/snowdreams1006)	
[![騰訊雲社區](https://img.shields.io/badge/%E8%85%BE%E8%AE%AF%E4%BA%91%E7%A4%BE%E5%8C%BA-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://cloud.tencent.com/developer/user/2952369/activities)

• 進度條徽章

[![progress](https://user-gold-cdn.xitu.io/2019/6/22/16b7d258ff8a48fe?w=118&h=20&f=svg&s=1107)](https://github.com/fehmicansaglam/progressed.io)	
[![progress](https://user-gold-cdn.xitu.io/2019/6/22/16b7d258f75c9f1f?w=118&h=20&f=svg&s=1107)](https://github.com/fehmicansaglam/progressed.io)	
[![completed](https://user-gold-cdn.xitu.io/2019/6/22/16b7d2598815373d?w=124&h=20&f=svg&s=1109)](https://github.com/fehmicansaglam/progressed.io)	
[![done](https://user-gold-cdn.xitu.io/2019/6/22/16b7d25997ab3b36?w=94&h=20&f=svg&s=1098)](https://github.com/fehmicansaglam/progressed.io)

參考文檔

• GitHub 項目徽章的添加和設置

• 玩轉 Github 徽章

• 爲你的Github README生成漂亮的徽章和進度條

• 給python項目在github貼上build和pypi小徽章

• https://github.com/igrigorik/ga-beacon

• https://github.com/boennemann/badges

• https://ellerbrock.github.io/open-source-badges/

• http://githubbadges.com/