例如上面那个就是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/):
嗯嗯,真不错。
另外一个风格:
代码:
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
9 comments
年初折腾过这种徽章,放到了博客底部,确实看起来简洁清爽了不少,不过导致博客css大乱,后来也没再尝试。。。
这个方式入侵性还是比价小的,页面里所有的徽章都可以当做图片直接插入。不需要修改css以及wp的样式啊,主题啊神马的。
想起好像杜老师的底部就有
嗯嗯,是的,刚去看了一眼。哈哈哈
这个不错!
这个我在用,还挺好看的。
嗯嗯,这个主要是自定义起来还挺方便的。插入也简单
6啊 第一张图 吓一跳 赶紧鼠标往下滑
哈哈哈~~这么胆小吗?