Add Github Badge | Akilarの糖果屋
生活
生活
Add Github Badge
发表于 2020-10-31|更新于 2021-09-02|🍡Akilar の糖葫芦
字数总计:4.5k|阅读时长:20 分钟 | 阅读量:2457| 评论数:7
It has been 208 days since the last update, the content of the article may be outdated.
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> - 拓展写法示例
- 在
[Blogroot]\_config.butterfly.yml
的footer
配置项中添加徽标,注意事先压缩一下,使他们只留一行。为了不至于太过紧凑,设置一下行内间隔属性margin-inline
。 difffooter:
owner:
enable: true
since: 2016
- custom_text:
+ custom_text: <p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a><a style="margin-inline:5px" target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署,默认线路托管于Vercel"></a><a style="margin-inline:5px" target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署,联通线路托管于Coding"></a><a style="margin-inline:5px" target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Github托管"></a><a style="margin-inline:5px" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p>
copyright: false # Copyright of theme and framework
ICP: # Chinese ICP License
插件化写法
旧版源码修改方案
- 修改
[Blogroot]\themes\butterfly\layout\includes\footer.pug
, 添加页脚标签循环节: diffif 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
中添加相关配置项: ymlghbdage:
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]
下打开终端,运行以下指令: bashnpm 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
jsfunction 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); - 具体用法 本外挂标签的参数分为三组,用
||
分割。- 基本参数
- 信息参数
- 拓展参数
拓展内容 - 使用纯 css 实现仿徽标样式
这一段参考自 paddylin-Butterfly 脚底自定义标签
在使用徽标时,偶尔会遇到需要在内部写入动态内容的情况,这时候再使用 shields.io 提供的标签就无法满足我们的需求了。所以就要使用 HTML
语言配合 CSS
来仿写标签。
html
<div class="github-badge"> |
粉丝福利 - base64 图标徽标制作
鉴于有不少读者在看完这篇以后都很想把自己页脚的 ICP 备案、萌 ICP 备案、又拍云 CDN 转为徽标形式,但是没法在图标库里找到对应的图标。其实是可以用 base64 图片作为图标的。以下提供几个常见的徽标源码。当然也欢迎在评论区留言想要我帮忙制作的图标。
- 找到合适的图标图片,建议先行用 PS 抠图成透明背景,然后存储为 png 格式,此时,要记得尽量将图片的尺寸调整的小一点,这样转的 base64 图片链接才不至于过长。
- 找个在线转 base64 图片的网站,把制作好的图片转为 base64 链接。
- 把 base64 链接作为 logo 填进徽标链接。 plaintext
https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=data:image/png;base64,url
Add Github Badge
https://akilar.top/posts/e87ad7f8/
作者
Akilar
发布于
2020-10-31
更新于
2021-09-02
许可协议
Invitation
Akilar
674527148
created:03/09/2020
Welcome to Candyhome
sitelink
Use this card to join the candyhome and participate in a pleasant discussion together .
Welcome to Akilar’s candyhome,wish you a nice day .
评论
昵称
邮箱
网址
7 条评论
Travele_ 2022-02-24
1
Windows 10
Microsoft Edge 98.0.1108.56
Akilar 店长 2022-02-28
回复 @Travele_ :
图片 base64 编码太长了吧。图片要压缩的很小才行。
Windows 10
Microsoft Edge 98.0.1108.62
Travele_ 2022-02-24
大佬,我这样引入微标,又拍云联盟的网址后半部分识别不了,求救一下。谢谢
Windows 10
Microsoft Edge 98.0.1108.56
晨 2022-01-25
3
你好,能问一下如何删掉主题自带的框架和主题页脚徽标
Windows 10
Microsoft Edge 97.0.1072.69
晨 2022-01-25
回复 @晨 :
能借鉴一下你的备案号图标源码
Windows 10
Microsoft Edge 97.0.1072.69
Akilar 店长 2022-01-26
回复 @晨 :主题配置文件里
# Footer Settings |
Windows 10
Microsoft Edge 97.0.1072.69
Akilar 店长 2022-01-26
回复 @晨 :
徽标源码不是就写在文章末尾吗。
Windows 10
Microsoft Edge 97.0.1072.69
展开
Heo 2021-09-01
base64 可以用 https://tool.jisuapi.com/base642pic.html
这个在线工具
macOS Catalina
Chrome 91.0.4472.164
狛枫 2021-08-21
谢谢店长!我也加入萌国了!
Windows 10
Microsoft Edge 92.0.902.78
odfense 2021-07-22
3
店长,我添加完徽标出了点问题,清除一下浏览器缓存,footer 会向下边移动,麻烦店长帮我看一下。谢谢。
https://myfanfan.xyz
Windows 10
Chrome 91.0.4472.164
Akilar 店长 2021-07-23
回复 @odfense :
我这边访问一切正常啊。是你已经修好了吗
Windows 10
Microsoft Edge 91.0.864.71
odfense 2021-07-23
回复 @Akilar :
没有,把页面拉到最底部徽标那,然后清除一下浏览器缓存,在刷新一下页面,就会看到徽标向下移动了
Windows 10
Chrome 91.0.4472.164
odfense 2021-07-23
回复 @Akilar :
店长,我加你好友给你发个截屏,你帮我看看吧,谢谢
Windows 10
Chrome 91.0.4472.164
展开
嘉 2020-12-16
已学会,来踩踩😃
Windows 10
Chrome 87.0.4280.66
Powered by Twikoo v1.5.0
Attributes
LV.46
Akilar
流水幽吟绕耳边,
煦风馨语抚心弦,
挥臂欲揽冰钩月,
银星斟酌醉人涎。
目录13
相关推荐
SAO-UI-PLAN-LINK-START2022-03-28
Butterfly 的 Pjax 适配方案 2020-11-18
Hexo 博客静态资源加速 2020-12-08
Archive Beautify2020-12-11
Bilibili Dynamic Banner2021-01-20
Butterfly 布局调整 ——— 相关推荐版块侧栏卡片化 2021-12-15
©2016 - 2022Akilar
2 YEAR 348 DAYS 10 : 31 : 54
love letter - らっぷびと
00:00 / 00:00
ねぇ、いつかこの手紙が (呐,我相信这封信总有一天能传达给你)
届くと信じて今書いてます (所以现在开始动笔写下)
出会った場所 別れた景色 (邂逅的地方,分手的景色)
思い出しては未だ泣いてます (现在回想起也会闪出泪花)
あれから色々の思い出を (那之后的各种想法)
見せたかったな同じ目線で (用想让你看到的同样的视线)
隣で寝てる寝顔にほころび (你睡在身旁,露出笑颜的睡脸)
貴方を感じて溢れる (想要感受你的心情渐渐溢满)
許せない自分にイライラ 会いたいよ (对不可原谅的自己愤懑不已)
こんなはずはないと (好想见你啊,我们不应该是这样)
もう感情を持たぬ様 (就像早已毫无感情一样)
周りには誰も寄せ付けず (我不会让周围任何人靠近自己)
リセット、コンティニュー、デリート (重启、继续、删除)
今 2 人の絆を手に取る (现在终于理解两人的羁绊)
握り返す手 暖かい (握住对方的手,十分温暖)
歩く道を照らす陽だまり (如同走在阳光照耀的步行道底下)
水面に揺れた思い 満ちてから気づいた (荡漾在水面的思念从满潮开始就有所意识)
涙も誇れるようにずっと傍にいるから (眼泪也如夸耀一般 一直陪在我身边)
頼ってばっかの僕は (只知道依赖别人的我)
貴方を守ってただろうか (是否也可以守护你)
握ってた可能性を離さないと誓って、 (我发誓绝不放弃任何紧握的可能)
そっといつか話すよ (某一天我会对你轻轻耳语)
涙待たず 街は変わる (眼泪未落街道已并非昔日)
明日また少し歩いてみよう (明天再试着悠闲的走走吧)
何が分かるか分からないよ (我不明白自己到底明白了什么)
見渡す命は芽吹いてる (只看到无数的生命借着春风拂过)
あの時交わした約束を (只守护那时互相交换的约定)
守る為、毎年春を往こう (守在每年的春天)
その度に僕は泣くのだろう (想到这每次我都会哭泣吧)
その分笑って春を待とう (而我却依旧笑着等待春天)
引いては返す、潮の満ち引きが (又来又去,满潮的引力)
僕の答えを導き出す (定会给我指引答案)
さぁ、今夜も一緒に寝よう (来吧,今晚一起进入梦乡)
丸になりたいのさ (我想和你成为一个完美无缺的圆)
離れてしまうかのように 狭まる町並み (如同要分开一般在狭窄的街道紧靠在一起)
あの日の坂の下 二人だけは変わらない (在那日的坡道下,只有你我两个人是不会变的)
僕は昔から (所以我从以前开始)
とてもこの場所が大好きで (就很喜欢这个地方)
少しづつ変わる事に嘆いていたんだ (连细微的变化都感叹不已)
嬉しい事も、悲しい事も、 (开心的事,悲伤的事)
季節の様に移り変わるのに (明明就会如同季节变迁一样改变)
貴方への想いだけは変わらないと伝えたかった (但我想告诉你,我对你的感情是永恒的)
水面に揺れた思い 満ちてから気づいた (荡漾在水面的思念从满潮开始就有所意识)
涙も誇れるようにずっと傍にいるから (眼泪也如夸耀一般 一直陪在我身边)
離れてしまうかのように 狭まる町並み (如同要分开一般在狭窄的街道紧靠在一起)
あの日の坂の下 二人だけは変わらない (在那日的坡道下,只有你我两个人是不会变的)
哇,你终于回来了~
拖拽到此处
图片将完成下载