网站徽章shields制作教程

平时在逛 Gitee、Github 等各大代码仓库时，往往能看到以下这种徽章式的网页链接，美观好看又方便，那么这个徽章是如何制作出来的呢？本文就带大家制作属于自己的徽章式链接。

制作工具：shields，一种以SVG或光栅格式所提供简洁、一致、清晰的徽章服务，可以轻松地包含在GitHub自述文件或任何其他网页中；该服务支持数十种持续集成服务、软件包注册表、发行版、应用商店、社交网络、代码覆盖率服务和代码分析服务。每个月它提供超过7.7亿张图像，并被一些世界上最受欢迎的开源项目如VS Code、Vue.js和Bootstrap的使用。

官网：https://shields.io/
Github：https://github.com/badges/shields/

制作网页：https://shields.io/#your-badge

我们填写徽章的标签、消息以及想要的颜色，然后点击Make Badge就会生成我们的徽章，由左和右两半部分组成，左半部分就是我们填写的标签内容，右半部分就是我们填写的消息内容，右半部分的颜色就是我们填写的颜色。

最后生成的徽章有对应的url，格式为https://img.shields.io/badge/<标签>-<消息>-<颜色>，我们也可以直接修改url参数来得到想要的标签。

此外，我们还可以通过在url后面使用?携带一些参数来自己定制，参数间用&隔开：

logo：指定左半部分的logo，例如 https://img.shields.io/badge/zsr-gitee-red?logo=Gitee

更多logo参数可以查看：https://simpleicons.org/
logoWidth：指定左半部分logo的宽度，例如 https://img.shields.io/badge/zsr-gitee-red?logo=Gitee&logoWidth=40
label：用于覆盖左半部分的内容，例如 https://img.shields.io/badge/zsr-gitee-red?logo=Gitee&label=hello
labelColor：用于设置左半部分的颜色，支持十六进制，rgb，rgba，hsl，hsla和css命名颜色。例如 https://img.shields.io/badge/zsr-gitee-red?labelColor=abcdef
color：用户设置右半部分的颜色，支持十六进制，rgb，rgba，hsl，hsla和css命名颜色。例如 https://img.shields.io/badge/zsr-gitee-red?color=fedcba
link=http://left&link=http://right：指定单击徽章左侧/右侧跳转的链接，例如 https://img.shields.io/badge/baidu-tencent-blue?link=http://www.baidu.com&link=http://www.tencent.com

此时我们点击左半部分就会跳转到百度首页，点击右半部分就会跳转到腾讯首页

那么我们如何将该徽章引入呢？我们可以通过 markdown 或者 html 的形式来引入：

// markdown
![redis](https://img.shields.io/badge/Redis-5.0+-yellow)// html
<img src="https://raster.shields.io/badge/Maven-3.1+-red">

效果如下：

网站徽章shields制作教程相关推荐

Github 徽章shields使用教程
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 大家平时在逛GitHub,Gitee,各大论坛博客的时候,都有很好看很漂亮的徽章,这里就简单写个使用教程,方便大家 ...
kingcms php,KingCMS php版网站标签模版制作教程(二)
php版的标签 king:模块名称.模型名称这样构成,以自定义模块的文章模型为例: {king:portal.article number='*' type='*' listid='*' listi ...
宠物之家网站大学生网页制作教程学生HTML静态宠物网页设计作业成品 DIV布局简单动物网页制作代码
Github_shields徽章在线制作
Shields.io: Quality metadata badges for open source projects 这个是我生成的结果, 去这里在线制作就行啦很简单,如果想要看高级一点的玩法儿请 ...
上树建站教程：新手单页网站制作教程上集
功能强大. 链接.文件下载等功能,一份源程序可以制造出无数个网站,只需一些超级简单的页面程序可以随意的编辑.修改,包括:图片.文案.背景.图片滚动单页型网站:就是一个独立页面的网站,是一个纯HT ...
pageadmin CMS网站制作教程：栏目单页内容如何修改
pageadmin CMS网站制作教程: 栏目单页内容如何修改一般情况下,如公司介绍,联系方式等介绍内页面都属于单页,单页内容可以直接在栏目设置界面进行修改,如下 1.对栏目单页内容进行设置,登录后 ...
PageAdmin CMS网站制作教程：如何创建及管理栏目？
PageAdmin CMS网站制作教程: 1.登录管理后台后,在顶部导航中找到网站,并点击: 2.在左侧栏目中找到栏目管理,并点击: 3.进入到栏目管理页面,在顶部找到菜单,点击添加. 4.进入到栏目 ...
2个Python学习网站制作教程
最近次条总结了一些2个Python学习网站制作教程的一些核心技术,这里整理了下一些目录,分别是两个网站,大部分技术都在前端,熟悉前端的话直接可以查看网页源码对应去了解学习,这些教程重在理解思路,思路通 ...
网站页面制作教程[纯萌新]
网站页面制作教程[纯萌新] 看起来很高大上,其实会者不难. 大约一周之前,笔者的高中同学在朋友圈招募队员参加商赛,因为同学是外校的,我不经意地评论了一句"想参加,可惜不是本校的", ...

网站徽章shields制作教程

网站徽章shields制作教程相关推荐

最新文章

热门文章