工具資源系列之 github 上各式各樣的小徽章從何而來?

時間  2019-12-05
標籤 工具 資源 系列 github 各式各樣 徽章 從何 欄目 Git 简体版
原文   原文鏈接

前言

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

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

Build Status
Coverage Status
Downloads
Version
License
Chat

CircleCI
BrowserStack Status
Chat
npm version

GitHub license
npm version
CircleCI Status
PRs Welcome

小結:vue

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

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

什麼是徽章

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

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

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

  • 在線連接
在線連接: github-snowdreams1006-brightgreen.svg 
https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg
  • 瀏覽器效果
打開在線連接,並檢查當前網頁,豁然開朗,徽章是一種 svg 實現的矢量圖標.
badge-inspect-github-snowdreams1006-brightgreen.png
  • svg VS png
若是說 svg 是矢量圖形而 png 卻不是,因此不妨將 png 姑且稱之爲標量圖形.

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

既然兩種均能表現相同的效果,如今咱們就來演示一下 png 的實現效果.npm

badge-github-snowdreams1006-brightgreen.png

svg 轉 png 在線網站: https://cloudconvert.com/svg-to-svg

badge-github-snowdreams1006-svg-png.png

左側的 svg 不管放大多少倍,依然保持原樣,清晰度保持不變.右側的 png 一旦放大,立馬變得模糊不清.

如何使用徽章

大多數徽章都是 svg 格式,固然也不排除某些徽章是 png 格式,不論怎麼說,一概當成圖標使用就能夠了.c#

若是你和我同樣,但願在 markdown 文件中使用徽章,那麼建議使用在線連接,或者引入本地 svg 相關文件.

徽章格式 : [![圖片文字說明](圖片源地址)](超連接地址) 即超連接內部嵌套圖片 
[![github](https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg)](https://github.com/snowdreams1006)

github

若是你是在 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>

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

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

  • Badge URL
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 兩類.

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

gitbook-plugin-mygitalk.svg

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

gitbook-plugin-mygitalk.png

若是以徽章的樣式爲標準,那麼能夠分爲默認樣式和自定義樣式兩類.

  • 默認樣式
https://img.shields.io/github/stars/snowdreams1006/snowdreams1006.github.io.svg?style=social

GitHub stars

  • 自定義樣式
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

github-snowdreams1006-brightgreen.svg

  • 動態數據
https://badge.fury.io/js/gitbook-plugin-mygitalk.svg

gitbook-plugin-mygitalk.svg

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

若是以徽章的內容數據來源爲標準,那麼能夠有無數多的分類.

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

gitbook-plugin-mygitalk

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

gitbook-plugin-mygitalk

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

centos

若是以徽章的內容數據用途爲標準,那麼也能夠有無數多的分類.

  • 構建狀態
https://img.shields.io/travis/GitbookIO/gitbook.svg

Travis (.org)

  • 代碼覆蓋率
https://img.shields.io/codecov/c/github/vuejs/vue.svg

Codecov

  • 代碼分析
https://img.shields.io/github/languages/top/snowdreams1006/snowdreams1006.github.io.svg

GitHub top language

徽章來源

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

https://shields.io/

適用於絕大多數狀況,默認按照徽章內容分類, Build, Code Coverage, Analysis 等多主題,同時支持自定義徽章和動態徽章.

若是徽章的主題明確,那麼根據網站提供的主題對號入座便可在線生成徽章,下面以 gitbook-plugin-mygitalk 爲例,簡要說明如何得到相應徽章連接.

gitbook-plugin-mygitalk 是 gitbook 的一款評論插件.

badge-shields.io-theme.png

打開網站後按照分類,選擇其中一個主題,點擊進去後填寫目標信息,便可在線生成徽章.

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

badge-shields.io-theme-license.png

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

badge-shields.io-theme-license-npm.png

  • 填寫好正確的 npm 包信息並實時預覽,而後點擊按鈕複製徽章連接或者或者特定格式的徽章.
![NPM](https://img.shields.io/npm/l/gitbook-plugin-mygitalk.svg)

NPM

按照主題生成徽章真的很簡單,首先對號入座,而後按需生成相應徽章便可,惟一的要求就是 對號入座!

若是默認提供的徽章主題沒有適合本身的徽章,或者想要自定義徽章效果,那麼也能夠在線製做私人訂製徽章.

  • 打開網站後往下拉,找到 Your Badge 區域,準備製做專屬徽章.

badge-shields.io-custom.png

  • 填寫(Label)標籤-(Message)信息-(Color)顏色等信息後,點擊(Make Badge)生成徽章.

badge-shields.io-custom-make.png

  • 點擊生成徽章後默認會在當前標籤頁面打開該連接,手動複製連接並調整成目標格式便可.

badge-shields.io-custom-make-preview.png

![微信公衆號-雪之夢技術驛站-brightgreen.svg](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)

微信公衆號-雪之夢技術驛站-brightgreen.svg

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

badge-badgen.net.png

雖然支持顏色,圖標以及查詢參數等高級用法,可是仍是習慣性採用默認設置,下面動手開始製做徽章吧!

  • 切換到默認動態徽章選項卡,選擇 GitHUb 徽章.

badge-badgen.net-live-github.png

  • 選擇 stars 徽章,將 micromatch 替換成目標信息.

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

  • 預覽徽章效果並手動修改爲目標格式.

badge-badgen.net-live-github-snowdreams1006.png

![snowdreams1006.github.io](https://badgen.net/github/stars/snowdreams1006/snowdreams1006.github.io)

snowdreams1006.github.io

除了支持動態徽章,一樣也支持靜態徽章,切換到 STATIC BADGES 選項卡,一塊兒來生成靜態徽章吧!

badge-badgen.net-static.png

![★★★★☆](https://badgen.net/badge/stars/%E2%98%85%E2%98%85%E2%98%85%E2%98%85%E2%98%86)

★★★★☆

按照徽章的在線連接規則,應該也支持自定義徽章,再次回顧一下連接規則:

規則 : https://badgen.net/badge/:subject/:status/:color ,若是是自定義動態連接,估計不支持吧! 
![微信公衆號-雪之夢技術驛站](https://badgen.net/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)

微信公衆號-雪之夢技術驛站

https://forthebadge.com/

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

badge-orthebadge.com.png

網站首頁默認提供了一些預覽徽章,左側是複製 image 連接,右側是複製 markdown 連接.

[![forthebadge](https://forthebadge.com/images/badges/fuck-it-ship-it.svg)](https://forthebadge.com)

forthebadge

網站首頁默認展現的徽章畢竟有限,若是找不到理想徽章,豈不是白介紹了這個網站,固然不可以!

VIEW ALL 查看目前支持的所有徽章,若是仍是找不到徽章,那就真的沒有.

badge-orthebadge.com-all.png

https://badge.fury.io/

版本徽章,支持各種平臺版本,包括 npm , Ruby, Python, Go 等平臺.

badge-badge.fury.io.png

選擇目標平臺並輸入包管理信息,便可在線生成各個類型的徽章版本.

badge-badge.fury.io-npm.png

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

npm version

排版佈局

默認 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>

居中對齊

拋磚引玉

  • 社交化徽章

GitHub followers
GitHub forks
GitHub stars
GitHub watchers

![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
wechat
慕課網
簡書
csdn
博客園
掘金
思否
開源中國
騰訊雲社區

[![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
progress
completed
done

[![progress](http://progressed.io/bar/25?title=progress)](https://github.com/fehmicansaglam/progressed.io)
[![progress](http://progressed.io/bar/50?title=progress)](https://github.com/fehmicansaglam/progressed.io)
[![completed](http://progressed.io/bar/75?title=completed)](https://github.com/fehmicansaglam/progressed.io)
[![done](http://progressed.io/bar/100?title=done)](https://github.com/fehmicansaglam/progressed.io)

參考文檔

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程