Github Shields网站的使用

最新推荐文章于 2023-03-10 16:04:51 发布

安Ghost_S

最新推荐文章于 2023-03-10 16:04:51 发布

阅读量518

点赞数 2

分类专栏： Github 文章标签： css 前端 github html 贴图

原文链接：https://froan.cn/2022/05/08/github_shields/

版权

Github 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Github Shields网站的使用

在这里插入图片描述作者: 安安Froan
链接: https://froan.cn/2022/05/08/github_shields/
来源: 安Ghost_S

一、网站简介

这个网站可以实现许多徽章的生成，利于网站搭建过程中徽章的个性化
请添加图片描述

二、具体操作

1.网站准备

2.徽章生成

shields徽章加入项目状态或者版本等信息，可以访问官网 Shields制作徽章
请添加图片描述

基本生成方式

根据要求填写内容就可以生成一个简单的徽章啦~

请添加图片描述

HTML使用方式

<pic src="https://img.shields.io/badge/%E5%B0%8F%E5%AE%89-%E7%82%B9%E5%87%BB%E5%85%B3%E6%B3%A8%E6%88%91%E5%97%B7-yellowgreen"></pic>

Markdown使用方式

![效果图](https://img.shields.io/badge/小安-点击关注我嗷-yellowgreen)

下面就是生成效果啦

在这里插入图片描述

设置参数

图标和图标颜色

#添加参数logo=github #添加图标颜色logoColor=brightgreen

请添加图片描述

https://img.shields.io/badge/%E5%B0%8F%E5%AE%89-%E7%82%B9%E5%87%BB%E5%85%B3%E6%B3%A8%E6%88%91%E5%97%B7-yellowgreen?logo=github

在这里插入图片描述

https://img.shields.io/badge/%E5%B0%8F%E5%AE%89-%E7%82%B9%E5%87%BB%E5%85%B3%E6%B3%A8%E6%88%91%E5%97%B7-yellowgreen?logo=github&logoColor=brightgreen

其他图标可以借助这个网站Simple Icons

徽章样式

请添加图片描述

#样式修改
style=for-the-badge
style=social

请添加图片描述

https://img.shields.io/badge/%E5%B0%8F%E5%AE%89-%E7%82%B9%E5%87%BB%E5%85%B3%E6%B3%A8%E6%88%91%E5%97%B7-yellowgreen?logo=github&logoColor=brightgreen&style=for-the-badge

在这里插入图片描述

https://img.shields.io/badge/%E5%B0%8F%E5%AE%89-%E7%82%B9%E5%87%BB%E5%85%B3%E6%B3%A8%E6%88%91%E5%97%B7-yellowgreen?logo=github&logoColor=brightgreen&style=social

小结

进化一下你就可以这样玩了

[![图标](https://img.shields.io/badge/%E5%B0%8F%E5%AE%89-%E7%82%B9%E5%87%BB%E5%85%B3%E6%B3%A8%E6%88%91%E5%97%B7-yellowgreen?logo=github)](https://froan.cn)

这样就可以实现链接跳转了

实际上这些参数可以直接通过修改http链接完成

更多操作到 https://shields.io/ 查阅。