Add Github Badge

传礼 2020年3月2日 23 分钟阅读 0 条评论前端开发

github 徽标

github 徽标可以直接通过 shields.io 在线生成。
理论上可以放在页面的任何地方。教程案例是添加在页脚。
工具网站包括：

具体步骤

通过 shields.io 在线生成。
- label: 标签，徽标左侧内容
- message: 信息，徽标右侧内容
- color: 色值，支持支持十六进制、rgb、rgba、hsl、hsla 和 css 命名颜色。十六进制记得删除前面的 #号

输入相关信息后，点击 make badge 即可得到徽标的 URL。可以用 img 标签引用，写法简单。不过正式写法建议用 object 标签引用，写法示例如下。

html

<!-- label=Frame，Message=Hexo，color=blue -->
https://img.shields.io/badge/Frame-Hexo-blue
<!-- 在页面上可以使用img标签来引用 -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue">
<!-- 部分属性例如link需要用object标签来引用 -->
<object data="https://img.shields.io/badge/Frame-Hexo-blue?link=https://hexo.io"></object>

拓展写法示例
1. 普通样式
2. 五种 style 预览
3. 添加图标和自定义 label
4. 添加图标和图标宽度
5. 图标、label、message 三部分颜色自定义
6. 给标签添加链接
7. 用 a 标签嵌套 img 标签

在 [Blogroot]\_config.butterfly.yml 的 footer 配置项中添加徽标，注意事先压缩一下，使他们只留一行。为了不至于太过紧凑，设置一下行内间隔属性 margin-inline。

diff

 footer:
 owner:
 enable: true
 since: 2016
-       custom_text:
+       custom_text: <img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"><img src="https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署，默认线路托管于Vercel"><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署，联通线路托管于Coding"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Github托管"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可">
 copyright: false # Copyright of theme and framework
 ICP: # Chinese ICP License

插件化写法

旧版源码修改方案

修改 [Blogroot]\themes\butterfly\layout\includes\footer.pug, 添加页脚标签循环节：

diff

 if theme.footer.custom_text
 .footer_custom_text!=`${theme.footer.custom_text}`
 //v3.4.0以下版本可能还有ICP的配置项。此处只要保证p和上方的if缩进平级就好。
+   p#ghbdages
+     if theme.ghbdage.enable
+       each item in theme.ghbdage.bdageitem
+         a.github-badge(target='_blank' href=url_for(item.link)  style='margin-inline:5px')
+           img(src=url_for(item.shields) title=item.message)

在 [Blogroot]\_config.butterfly.yml 中添加相关配置项：

yml

ghbdage:
 enable: true
 bdageitem:
 - link: https://hexo.io/  # 标签跳转链接
 shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #shields的API链接，填法参考本篇教程
 message: 博客框架为Hexo_v5.3.0 #鼠标悬停时显示的信息
 - link: https://butterfly.js.org/
 shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
 message: 主题版本Butterfly_v3.4.2
 - link: https://www.jsdelivr.com/
 shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
 message: 本站使用JsDelivr为静态资源提供CDN加速
 - link: https://vercel.com/
 shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
 message: 本站采用双线部署，默认线路托管于Vercel
 - link: https://vercel.com/
 shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
 message: 本站采用双线部署，联通线路托管于Coding
 - link: https://github.com/
 shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
 message: 本站项目由Github托管
 - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
 shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
 message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可

新版 NPM 插件方案

NPM 插件方案和页脚计时器捆绑，但是可以分别选择是否打开对应模块。

安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：

bash
```
npm install hexo-butterfly-footer-beautify --save
```

添加配置信息，以下为写法示例
在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加

yaml

# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
 enable:
 timer: true # 计时器开关
 bdage: true # 徽标开关
 priority: 5 #过滤器优先权
 enable_page: all # 应用页面
 exclude: #屏蔽页面
 # - /posts/
 # - /about/
 layout: # 挂载容器类型
 type: id
 name: footer-wrap
 index: 0
 # 计时器部分配置项
 runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
 runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
 # 徽标部分配置项
 swiperpara: 3 #若非0，则开启轮播功能，每行徽标个数
 bdageitem:
 - link: https://hexo.io/ #徽标指向网站链接
 shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
 message: 博客框架为Hexo_v5.4.0 #徽标提示语
 - link: https://butterfly.js.org/
 shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
 message: 主题版本Butterfly_v3.8.2
 - link: https://www.jsdelivr.com/
 shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
 message: 本站使用JsDelivr为静态资源提供CDN加速
 - link: https://vercel.com/
 shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
 message: 本站采用双线部署，默认线路托管于Vercel
 - link: https://vercel.com/
 shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
 message: 本站采用双线部署，联通线路托管于Coding
 - link: https://github.com/
 shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
 message: 本站项目由Github托管
 - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
 shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
 message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
 swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
 swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
 swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init_js.min.js

参数释义

参数	备选值 / 类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enable.timer	true/false	【必选】计时器控制开关
enable.bdage	true/false	【必选】徽标控制开关
enable_page	path	【可选】填写想要应用的页面，如根目录就填’/‘, 分类页面就填’/categories/‘。若要应用于所有页面，就填 `all`，默认为 `all`
exclude	path	【可选】填写想要屏蔽的页面，可以多个。仅当 enable_page 为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type	id/class	【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.name	text	【必选】挂载容器名称
layout.index	0 和正整数	【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
runtime_js	url	【必选】页脚计时器脚本，可以下载上文填写示例的链接，参照注释和教程：Native JS Timer 自行修改。
runtime_css	url	【可选】自定义样式，预留开发者接口，可自行下载。
swiperpara	number	【可选】若非零，则开启轮播功能，此项表示每行最多容纳徽标个数，用来应对徽标过多显得页脚拥挤的问题
bdageitem.link	url	【可选】页脚徽标指向的网站链接
bdageitem.shields	url	【必选】页脚徽标对应的 API，API 具体写法示例参照教程 Add Github Badge
bdageitem.message	text	【可选】页脚徽标悬停时显示的信息
swiper_css	url	【可选】swiper 的依赖
swiper_js	url	【可选】swiper 的依赖
swiperbdage_init_js	url	【可选】swiper 初始化方法

外挂标签

考虑到对 shields.io 的全部参数支持，外挂标签使用 object 标签来引用。

新建 [Blogroot]\themes\butterfly\scripts\tag\ghbdage.js

function bdage (args) {
 args = args.join(' ').split('||')
 let base= args[0]?args[0].split(','):''
 let right = base[0]?encodeURI(base[0].trim()):''
 let left = base[1]?encodeURI(base[1].trim()):''
 let logo = base[2]?base[2].trim():''
 let message = args[1]?args[1].split(','):''
 let color = message[0]?message[0].trim():'orange'
 let link = message[1]?message[1].trim():''
 let title = message[2]?message[2].trim():''
 let option = args[2]?args[2].trim():''
 return `<object title="${title}" standby="loading..." data="https://img.shields.io/badge/${left}-${right}-orange?logo=${logo}&color=${color}&link=${link}&${option}"></object>`
}
hexo.extend.tag.register('bdage',bdage);

具体用法

本外挂标签的参数分为三组，用 || 分割。
1. 基本参数
2. 信息参数
3. 拓展参数

拓展内容 - 使用纯 css 实现仿徽标样式

这一段参考自 paddylin-Butterfly 脚底自定义标签

在使用徽标时，偶尔会遇到需要在内部写入动态内容的情况，这时候再使用 shields.io 提供的标签就无法满足我们的需求了。所以就要使用 HTML 语言配合 CSS 来仿写标签。

html


 
 
 <!-- fa图标，也支持阿里图标 -->
 <i class="fa fa-copyright"></i>
 Powered
 
 
 Hexo

Add Github Badge

github 徽标

具体步骤

插件化写法

外挂标签

拓展内容 - 使用纯 css 实现仿徽标样式

相关文章

None

None

SpringCloud(9)

SpringCloud(8)