前言

平時大家在在逛 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 相關文件.

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

• Badge URL

• Markdown

• HTML

徽章分類

如果以徽章的格式為標準,那么可以分為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

排版布局

默認 markdown 實現的圖片是依次排開的,無法自定義樣式,而 markdown 語法同時也兼容 html 語法,因此我們可以用 html 語法實現居中對齊.

參考文檔

• 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/

總結

以上是生活随笔為你收集整理的github打开前端样式丢失_工具资源系列之 github 上各式各样的小徽章从何而来？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。