github风格的小徽章Badgen

例如上面那个就是TensorFlow的,下面这一大排,哼。看着就很好玩,也想要啊。这个东西总不能自己画吧,那不得累死,于是搜索了一下发现这种服务还是挺多的,支持自定义样式,例如:https://badgen.net 这个网站的就很方便:

https://badgen.net/badge/:subject/:status/:color?icon=github
                   ──┬──  ───┬───  ──┬───  ──┬── ────┬──────
                     │       │       │       │       └─ Options (label, list, icon, color)
                     │       │       │       │
                     │      TEXT    TEXT    RGB / COLOR_NAME ( optional )
                     │
                  "badge" - default (static) badge generator

所有需要定义的内容直接写到路径里面就ok啦,是不是非常方便?

嗯,就喜欢这种。

内置颜色:

内置图标:

参数说明:

colorOverride default badge color.e.g.
iconUse builtin icon (or url for external icon) in front of subject text.e.g.
listSet list=| will replace , with | in status text.e.g.
labelOverride default subject text (URL-Encoding needed for spaces or special characters).e.g.
labelColorOverride default label color.e.g.
scaleCustom badge scale.e.g.
cacheLive badge are cached in cdn for 24hrs (86400), you may limit it to a minimum of 5min (300).e.g.

更高级的用法就看原网站的介绍吧。嘿嘿,这些基本够姐姐用啦。

于是就可以自己创建一个试试啊,例如下面的代码:

https://badgen.net/badge/姐姐的博客/oba.by/pink?icon=chrome

实际效果:

是不是很棒?哈哈哈。可以创建一堆了(见个人介绍页面:https://h4ck.org.cn/whoami/):

嗯嗯,真不错。

另外一个风格:

badge

代码:

https://img.shields.io/badge/%E7%AE%A1%E7%90%86%E5%91%98-%E5%B0%8F%E5%A6%96%E7%B2%BE-pink?logo=wordpress

地址:

https://shields.io/docs/logos

☆版权☆

* 网站名称:obaby@mars
* 网址:https://h4ck.org.cn/
* 个性:https://oba.by/
* 本文标题: 《github风格的小徽章Badgen》
* 本文链接:https://h4ck.org.cn/2023/05/12127
* 短链接:https://oba.by/?p=12127
* 转载文章请标明文章来源,原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。


猜你喜欢:

9 comments

  1.  Level 4
    Google Chrome 113 Google Chrome 113 Mac OS X 10.15 Mac OS X 10.15 cn河北省石家庄市 联通

    年初折腾过这种徽章,放到了博客底部,确实看起来简洁清爽了不少,不过导致博客css大乱,后来也没再尝试。。。

    1. 公主 Queen 
      Google Chrome 102 Google Chrome 102 Mac OS X 10.15 Mac OS X 10.15 cn山东省济南市 移动

      这个方式入侵性还是比价小的,页面里所有的徽章都可以当做图片直接插入。不需要修改css以及wp的样式啊,主题啊神马的。

    1. 公主 Queen 
      Google Chrome 102 Google Chrome 102 Mac OS X 10.15 Mac OS X 10.15 cn山东省济南市 移动

      嗯嗯,这个主要是自定义起来还挺方便的。插入也简单

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注