工具資源系列之 github 上各式各樣的小徽章從何而來?
前言
平時大家在在逛 github 時或多或少都看到過專案首頁各式各樣的小徽章,不知道你是否和我一樣好奇這些小徽章都是哪來的呢?
首先我們先來一睹為快目前前端開發的三大主流框架: var ,看一看他們的 github 專案首頁有哪些小徽章吧!
Vue: https://github.com/vuejs/vue
Angular: https://github.com/angular/angular
React: https://github.com/facebook/react
小結:
前端三大框架的徽章均不相同,由此可見,這應該不是 github
雖然不是統一分配的,但也不是毫無規律可尋,想要製作專屬的小徽章,其實真的很簡單!
什麼是徽章
徽章是一種小巧精美的小圖示,一般配有相關文字進行輔助說明,富有表現力.
不僅出現於 github 專案主頁,凡是能夠表現圖片的地方都可以出現徽章,本質上是一種 svg 格式的向量圖示.
下面以自定義 github-snowdreams1006-brightgreen.svg 徽章為例,簡單認識一下徽章.
- 線上連結
線上連結: github-snowdreams1006-brightgreen.svg
https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg
- 瀏覽器效果
開啟線上連結,並檢查當前網頁,豁然開朗,徽章是一種
svg實現的向量圖示.
svgVSpng
如果說
svg是向量圖形而png卻不是,所以不妨將png姑且稱之為標量圖形.
svg 是向量圖形,png 是標量圖形,兩者均能實現類似效果,只不過向量圖形不論怎麼方法都能保持原樣,並不會像 png 那樣會失真而已.
既然兩種均能表現相同的效果,現在我們就來演示一下 png 的實現效果.
svg轉png線上網站: https://cloudconvert.com/svg-to-svg
左側的
svg無論放大多少倍,依然保持原樣,清晰度保持不變.右側的png一旦放大,立馬變得模糊不清.
如何使用徽章
大多數徽章都是 svg 格式,當然也不排除某些徽章是 png 格式,不論怎麼說,一律當成圖示使用就可以了.
如果你和我一樣,希望在 markdown 檔案中使用徽章,那麼建議使用線上連結,或者引入本地 svg 相關檔案.
徽章格式 :
[](超連結地址)即超連結內部巢狀圖片
[](https://github.com/snowdreams1006)
如果你是在 html 檔案使用徽章,同樣先取得線上徽章地址,然後按照 html 語法插入圖片即可.
徽章格式 :
<a href="超連結地址"><img src="圖片源地址" alt="圖片文字說明"></a>即超連結內部巢狀圖片
<a href="https://github.com/snowdreams1006">
<img src="https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg" alt="github">
</a>
不論是什麼語法,最核心最根本的獲得到徽章連結,至於不同語言有著各自的語法,按照語言規則手動拼接就好.
Badge URL
https://img.shields.io/badge/github-snowdreams1006-brightgreen.svgMarkdown
[](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/snowdreams1006RDOC
{<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 兩類.
svg
https://badge.fury.io/js/gitbook-plugin-mygitalk.svg
png
https://badge.fury.io/js/gitbook-plugin-mygitalk.png
如果以徽章的樣式為標準,那麼可以分為預設樣式和自定義樣式兩類.
- 預設樣式
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
如果以徽章的內容資料是否動態為標準,那麼可以分為靜態資料和動態資料兩類.
靜態資料意味著資料本身是不變的,只要在線連結不變,那麼生成的徽章永遠不會改變,而動態資料意味著生成徽章的資料是動態變化的,即使線上連結不變,當資料本身發現變化時,徽章自然隨之更新.
- 靜態資料
https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg
- 動態資料
https://badge.fury.io/js/gitbook-plugin-mygitalk.svg
靜態資料示例中
github-snowdreams1006-brightgreen.svg資料不會更改,自然生成的徽章也不會變.動態資料示例中gitbook-plugin-mygitalk.svg是npm的版本號,當專案升級後,版本號會發生更改,那麼生成的徽章也會隨之更新.
如果以徽章的內容資料來源為標準,那麼可以有無數多的分類.
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
如果以徽章的內容資料用途為標準,那麼也可以有無數多的分類.
- 構建狀態
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
徽章來源
徽章有不同的分類,不管是哪種分類,線上徽章最為簡單便捷,下面就簡單介紹下提供線上生成徽章的網站.
- https://shields.io/
- https://badgen.net/
- https://forthebadge.com/
- https://badge.fury.io/
- https://github.com/boennemann/badges
https://shields.io/
適用於絕大多數情況,預設按照徽章內容分類,
Build,Code Coverage,Analysis等多主題,同時支援自定義徽章和動態徽章.
如果徽章的主題明確,那麼根據網站提供的主題對號入座即可線上生成徽章,下面以 gitbook-plugin-mygitalk 為例,簡要說明如何獲得相應徽章連結.
gitbook-plugin-mygitalk 是
gitbook的一款評論外掛.
開啟網站後按照分類,選擇其中一個主題,點選進去後填寫目標資訊,即可線上生成徽章.
- 瀏覽已支援的主體,選擇
License許可證主題.
- 瀏覽已支援的
License許可證列表,選擇NPM許可證.
- 填寫好正確的
npm包資訊並實時預覽,然後點選按鈕複製徽章連結或者或者特定格式的徽章.
按照主題生成徽章真的很簡單,首先對號入座,然後按需生成相應徽章即可,唯一的要求就是對號入座!
如果預設提供的徽章主題沒有適合自己的徽章,或者想要自定義徽章效果,那麼也可以線上製作私人訂製徽章.
- 開啟網站後往下拉,找到
Your Badge區域,準備製作專屬徽章.
- 填寫(
Label)標籤-(Message)資訊-(Color)顏色等資訊後,點選(Make Badge)生成徽章.
- 點選生成徽章後預設會在當前標籤頁面開啟該連結,手動複製連結並調整成目標格式即可.
https://badgen.net/
徽章內容來源種類較多,預設按照平臺分類,按照特定規則生成徽章,需要手動拼接線上連結,略顯繁瑣.
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
雖然支援顏色,圖示以及查詢引數等高階用法,但是還是習慣性採用預設設定,下面動手開始製作徽章吧!
- 切換到預設動態徽章選項卡,選擇
GitHUb徽章.
- 選擇
stars徽章,將micromatch替換成目標資訊.
/github/stars/micromatch/micromatch 替換成 /stars/snowdreams1006/snowdreams1006.github.io
- 預覽徽章效果並手動修改成目標格式.
除了支援動態徽章,同樣也支援靜態徽章,切換到 STATIC BADGES 選項卡,一起來生成靜態徽章吧!
按照徽章的線上連結規則,應該也支援自定義徽章,再次回顧一下連結規則:
規則 :
https://badgen.net/badge/:subject/:status/:color,如果是自定義動態連結,估計不支援吧!
https://forthebadge.com/
扁平化的徽章,支援的徽章數量有限,不支援自定義徽章.
網站首頁預設提供了一些預覽徽章,左側是複製 image 連結,右側是複製 markdown 連結.
[](https://forthebadge.com)
網站首頁預設展示的徽章畢竟有限,如果找不到理想徽章,豈不是白介紹了這個網站,當然不能夠!
VIEW ALL 檢視目前支援的全部徽章,如果還是找不到徽章,那就真的沒有.
https://badge.fury.io/
版本徽章,支援各類平臺版本,包括
npm,Ruby,Python,Go等平臺.
選擇目標平臺並輸入包管理資訊,即可線上生成各個型別的徽章版本.
[](https://badge.fury.io/js/gitbook-plugin-mygitalk)
排版佈局
預設 markdown 實現的圖片是依次排開的,無法自定義樣式,而 markdown 語法同時也相容 html 語法,因此我們可以用 html 語法實現居中對齊.
<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)- 進度條徽章
[](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 專案徽章的新增和設定
- 玩轉 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/