Wang's blog Wang's blog
首页
  • 前端文章

    • HTML教程
    • CSS
    • JavaScript
  • 前端框架

    • Vue
    • React
    • VuePress
    • Electron
  • 后端技术

    • Npm
    • Node
    • TypeScript
  • 编程规范

    • 规范
  • 我的笔记
  • Git
  • GitHub
  • VSCode
  • Mac工具
  • 数据库
  • Google
  • 服务器
  • Python爬虫
  • 前端教程
更多
收藏
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Wang Mings

跟随大神,成为大神!
首页
  • 前端文章

    • HTML教程
    • CSS
    • JavaScript
  • 前端框架

    • Vue
    • React
    • VuePress
    • Electron
  • 后端技术

    • Npm
    • Node
    • TypeScript
  • 编程规范

    • 规范
  • 我的笔记
  • Git
  • GitHub
  • VSCode
  • Mac工具
  • 数据库
  • Google
  • 服务器
  • Python爬虫
  • 前端教程
更多
收藏
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • CSS

    • 常用css
    • sass用法
    • viewport详解
    • css各种布局
    • a标签小妙用
    • flex布局语法
    • CSS-function汇总
    • CSS变量的使用
    • css使用小技巧
    • css重置样式表
    • CSS之animation动画
    • 隐藏元素的方法
    • 项目上使用微标
      • 关于徽标
      • 如何添加动态徽标
        • 徽标图标格式
        • 带链接的徽标
      • 进阶用法
        • 以style参数为例
    • CSS之transition过渡
    • flex布局案例-基础
    • flex布局案例-骰子
    • css模块化实现教程
    • Flex布局教程语法篇
    • 粘性定位sticky的用途
    • flex布局案例-圣杯布局
    • flex布局案例-网格布局
    • css实现滚动视觉差效果
    • flex布局案例-输入框布局
    • 伪元素表单控件默认样式重置
    • 水平垂直居中的几种方式-案例
    • 从box-sizing属性入手,了解盒子模型
    • 文字在一行或多行时超出显示省略号
    • 如何根据系统主题自动响应CSS深色模式
    • 「css技巧」使用hover和attr()定制悬浮提示-demo
    • 「布局技巧」图片未加载前自动撑开元素高度
  • Npm

  • Vue

  • HTML

  • Node

  • Yaml

  • React

  • 框架

  • 规范

  • Electron

  • JS演示

  • VuePress

  • JavaScript

  • TypeScript

  • 微信小程序

  • TypeScript-axios

  • 前端
  • CSS
wangmings
2022-07-19
目录

项目上使用微标

# 项目上使用微标

# 关于徽标

徽标图片分左右两部分,左边是标题,右边是内容,就像是键值对。

徽标官网是 https://shields.io/ (opens new window)

图标规范

# 如何添加动态徽标

下面介绍的是markdown的写法

# 徽标图标格式

![](https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg)
1

# 带链接的徽标

[![](https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg)]({linkUrl})
1

变量说明

  • 徽标标题:徽标左边的文字
  • 徽标内容:徽标右边的文字
  • 徽标颜色:徽标右边的背景颜色,可以是颜色的16进制值,也可以是颜色英文。支持的颜色英文如下:

举个栗子

例如下面这个是我的博客的徽标:

[![](https://img.shields.io/badge/blog-阿离王-blue.svg)](https://github.com/347830076/)
1

(opens new window)

点击该徽标会打开对应的url地址,即直接跳到我的博客。

# 进阶用法

除了上面所说的3个参数,shields.io/ (opens new window) 还提供了一些 query string 来控制徽标样式。使用方式跟浏览器 URL 的 query string 一致:徽标图标地址?{参数名}={参数值},多个参数用 & 连接:

https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg?{参数名1}={参数值1}&{参数名2}={参数值2}
1

常用的 query string 参数有:

  • style:控制徽标主题样式,style的值可以是: plastic | flat | flat-square | social 。
  • label:用来强制覆盖原有徽标的标题文字。
  • colorA:控制左半部分背景颜色,只能用16进制颜色值作为参数,不能使用颜色英文。
  • colorB:控制右半部分背景颜色。

# 以style参数为例

plastic 立体效果:

![](https://img.shields.io/badge/blog-阿离王-orange.svg?style=plastic)
1

flat 扁平化效果,也是默认效果:

![](https://img.shields.io/badge/blog-阿离王-success.svg?style=flat)
1

flat-square 扁平 + 去圆角效果:

![](https://img.shields.io/badge/blog-阿离王-blue.svg?style=flat-square)
1

social 社交样式效果:

![](https://img.shields.io/badge/blog-阿离王-blue.svg?style=social)
1

还有很多参数,用法类似。更多信息可以到 https://shields.io/ (opens new window)查阅。

转载出处: https://champyin.com/2019/10/05/github%E9%A1%B9%E7%9B%AE%E5%BE%BD%E6%A0%87/ (opens new window)

编辑 (opens new window)
隐藏元素的方法
CSS之transition过渡

← 隐藏元素的方法 CSS之transition过渡→

最近更新
01
theme-vdoing-blog博客静态编译问题
09-16
02
搜索引擎
07-19
03
友情链接
07-19
更多文章>
Theme by Vdoing | Copyright © 2019-2022 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式