github打开前端样式丢失_工具资源系列之 github 上各式各样的小徽章从何而来?...

1a4593b414f1b176bcc7eff5f2cc8b02.png

前言

平时大家在在逛 github 时或多或少都看到过项目首页各式各样的小徽章,不知道你是否和我一样好奇这些小徽章都是哪来的呢?

首先我们先来一睹为快目前前端开发的三大主流框架: var ,看一看他们的 github 项目首页有哪些小徽章吧!

859b60f20a8c4aca33ef7018e77fbc27.png

小结:

前端三大框架的徽章均不相同,由此可见,这应该不是 github 统一分发而是自定义行为!

虽然不是统一分配的,但也不是毫无规律可寻,想要制作专属的小徽章,其实真的很简单!

什么是徽章

徽章是一种小巧精美的小图标,一般配有相关文字进行辅助说明,富有表现力.

不仅出现于 github 项目主页,凡是能够表现图片的地方都可以出现徽章,本质上是一种 svg 格式的矢量图标.

下面以自定义 github-snowdreams1006-brightgreen.svg 徽章为例,简单认识一下徽章.

  • 在线链接
https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg
  • 浏览器效果

打开在线链接,并检查当前网页,豁然开朗,徽章是一种 svg 实现的矢量图标.

01005dc2738e7d066055b1cc1939a3ce.png
  • svg VS png

如果说 svg 是矢量图形而 png 却不是,所以不妨将 png 姑且称之为标量图形.

svg 是矢量图形,png 是标量图形,两者均能实现类似效果,只不过矢量图形不论怎么方法都能保持原样,并不会像 png 那样会失真而已.

如何使用徽章

大多数徽章都是 svg 格式,当然也不排除某些徽章是 png 格式,不论怎么说,一律当成图标使用就可以了.

如果你和我一样,希望在 markdown 文件中使用徽章,那么建议使用在线链接,或者引入本地 svg 相关文件.

c440a9e3bf87b765a98343813b2e8950.png

不论是什么语法,最核心最根本的获得到徽章链接,至于不同语言有着各自的语法,按照语言规则手动拼接就好.

  • Badge URL
d72c151c965ea818990bb2e23267571d.png
  • Markdown
190418142ffbd57d1ae5d11e0ef045d2.png
  • HTML
6aa4d7866dd04fe0d551cc01b8c32467.png

徽章分类

如果以徽章的格式为标准,那么可以分为svg 和 png 两类.

37b0d51a95a8431da7f5ec8e05961408.png

如果以徽章的样式为标准,那么可以分为默认样式和自定义样式两类.

5b1ae82c9db98ce4bcdd146936bf966d.png

如果以徽章的内容数据是否动态为标准,那么可以分为静态数据和动态数据两类.

静态数据意味着数据本身是不变的,只要在线链接不变,那么生成的徽章永远不会改变,而动态数据意味着生成徽章的数据是动态变化的,即使在线链接不变,当数据本身发现变化时,徽章自然随之更新.

df4dd10d4572fc007c8b0f4f1dea33d7.png

静态数据示例中 github-snowdreams1006-brightgreen.svg 数据不会更改,自然生成的徽章也不会变.动态数据示例中 gitbook-plugin-mygitalk.svg是 npm 的版本号,当项目升级后,版本号会发生更改,那么生成的徽章也会随之更新.

如果以徽章的内容数据来源为标准,那么可以有无数多的分类.

7bf8de715eb701a2ba3b8f90521f45dd.png

如果以徽章的内容数据用途为标准,那么也可以有无数多的分类.

53d9dae85cf2ddf0cd14abdefcdd911b.png

徽章来源

徽章有不同的分类,不管是哪种分类,在线徽章最为简单便捷,下面就简单介绍下提供在线生成徽章的网站.

  • https://shields.io/
  • https://badgen.net/
  • https://forthebadge.com/
  • https://badge.fury.io/
  • https://github.com/boennemann/badges

排版布局

默认 markdown 实现的图片是依次排开的,无法自定义样式,而 markdown 语法同时也兼容 html 语法,因此我们可以用 html 语法实现居中对齐.

df42abc97ddd03837a361c462c09cffb.png
f69ff839666d17558b9c91e721169afb.png

参考文档

  • GitHub 项目徽章的添加和设置
  • 玩转 Github 徽章
  • 为你的Github README生成漂亮的徽章和进度条
  • 给python项目在github贴上build和pypi小徽章
  • https://github.com/igrigorik/ga-beacon
  • https://github.com/boennemann/badges
  • https://ellerbrock.github.io/open-source-badges/
  • http://githubbadges.com/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/505416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统进程管理

1 进程概述 进程: 一个具有一定的功能的程序在一个数据集合上的一次动态执行过程. 1.1 进程组成 一个进程应该包括: 程序的代码程序处理的数据程序计数器中的值, 指使下一条将运行的指令一组通用的寄存器的当前值, 堆, 栈一组系统资源(如打开的文件) 总之, 进程包含了正在运…

vs code ipynb文件_UE4引擎 源码的获取、安装,以及VS配置

1.首先我们需要注册一个Epic账户,网址如下http://api.unrealengine.com/CHN/GettingStarted/Installation/index.html#bookmark12.创建GitHub账户https://github.com/3.登录UE4社区点击个人进入到个人之后点击连接的账户,之后在下面填写我们GITHUB的昵称…

js bind 传参、_js中的面向对象(一)

面向对象要解决的问题提到面向对象,大家的第一反应就是封装、继承和多态。对其做如下解释:封装:影藏细节(A对A——将多行代码取个名字或A对B——API调用合作)继承:继承的意思就是同上跟上述一样&#xff0c…

计算机网络中的物理层

1 基础概念 物理层解决如何在链接各种计算机的传输媒体上传输数据比特流, 而不是指具体的传输媒体. 物理层的主要任务, 确定与传输媒体接口有关的一些特性. -> 定义标准 1.1 物理层规定的特性: 机械特性: 定义物理连接的特性, 规定物理连接时所采用的规格, 接口形状, 引…

二元置信椭圆r语言_医学统计与R语言:多分类logistic回归HosmerLemeshow拟合优度检验...

微信公众号:医学统计与R语言如果你觉得对你有帮助,欢迎转发输入1:multinominal logistic regression "nnet")结果1: test (multinomial model)输入2:ordinal logistic regression "MASS")结果2&am…

python3.7.2安装与配置_python3.7.0 安装与配置

python 3.7.0 X64下载地址: https://www.python.org/ftp/python/3.7.0/python-3.7.0-amd64.exe 更多版本下载请移步到:https://www.python.org/downloads/release/python-370/ python可以在同一台机器上进行多版本的安装使用。 安装好python3.7.0后确认系…

python3设置编码_python3 中文乱码与默认编码格式设定方法

python默认编码格式是utf-8。在python2.7中,可以通过sys.setdefaultencoding(gbk)设定默认编码格式,而在python3.3中sys.setdefaultencoding()这个函数已经没有了。在python3.3中该如何设置内置的默认编码格式啊!急求!&#xff01…

操作系统处理器调度

1 背景 1.1 上下文切换: 切换CPU的当前任务, 从一个进程/线程到另一个保存当前进程/线程在PCB/TCB中的执行上下文(CPU状态)读取下一个进程/线程的上下文 1.2 CPU调度: 从就绪队列中挑选一个进程/线程作为CPU将要运行的下一个进程/线程调度程序: 挑选进程/线程的内核函数(通过…

c# 操作redisclient 设置过期时间_C# Redis分布式锁单节点

(给DotNet加星标,提升.Net技能)转自:热敷哥cnblogs.com/refuge/p/13774008.html为什么要用分布式锁?先上一张截图,这是在浏览别人的博客时看到的.在了解为什么要用分布式锁之前,我们应该知道到底什么是分布式锁.锁按照不同的维度,有多种分类.比如1、悲观…

计算机网络数据链路层检错编码 --- 循环冗余码CRC

实例说明 假如要发送的数据是1101 0110 11, 采用CRC校验, 生成多项式是10011, 那么最终发送的数据应该是? 发送端发送过程: 1. 最终发送的数据 要发送的数据 帧检验序列FCS(冗余码) 2. 利用生成多项式计算冗余码 计算冗余码的方法: 1. 加0, 要根据生成多项式中的阶为, 则…

python和arduino串口通信_利用串行通信实现python与arduino的同步

我有一个需要:使用arduino将伺服电机移动到某个位置并在该位置停止 让一个由python控制的相机在那个位置获取图像 当图像被采集到时,伺服机构应该移动到一个对称的位置 这个序列重复N次 所以我尝试使用串行通信同步arduino和python代码。在arduino端&…

计算机网络中数据链路层编码纠错编码 --- 海明码

1 概述 首先, 海明码是计算机网络中数据链路层的针对帧的位错提出的一种纠错编码方式. 海明码可以发现双比特错, 但纠正单比特错. 工作原理(简单解释): 牵一发动全身 2 工作流程 2.1 确定校验码位数r 海明不等式: 其中为冗余信息位数, 为信息位数 如果给定要发送的数据, …

python在教育领域的应用_浅谈Python的主要应用领域

Python的用途较为广泛,小编也会经常接触到各种与Python有关的项目,也算是一名忠实的开发者。能够遇到关于Python用途的问题,也很乐意回答。Python这个概念非常大,它的定位是“计算机程序设计语言”,从它的特点来看&…

计算机操作系统同步互斥

1 背景 在计算机系统里面, 多道程序设计是现代操作系统的重要特征, 且并行起到了很大的作用, 所以操作系统抽象出来了线程/进程的概念用来支持多道程序设计, 同时, 各个进程之间需要进行交互, CPU也需要进行调度来支持多进程. 多进程会涉及到共享资源访问的问题, 如果操作系统…

leetcode 26 --- removeDuplicates

1 题目 给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度。 不要使用额外的数组空间,你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。 2 思路 此题要利…

conda安装tensorflow-gpu简洁版_win10 tensorflow2.2 安装注意事项

学习新技术有两座大山,一座是安装配置环境,另一座是调试bug。对于想学习人工智能开发的人来说,安装配置tensorflow是必不可少的一步,这个过程对于初次接触的人来说,到处都是火坑。下面大家跟我一起,看看都会…

python九九乘法表右对齐_python语法练习题之九九乘法表

九九乘法表 for...in方法实现 #方法一 for i in range(1, 10):for j in range(1, i1):print({}*{}{:<4}.format(j, i, i*j), end )print()#输出 1*11 1*22 2*24 1*33 2*36 3*39 1*44 2*48 3*412 4*416 1*55 2*510 3*515 4*520 5*525 1*66 2*612 3*618 4*624 5*630 6*636 1*7…

操作系统信号量和管程

1 背景 同步互斥回顾: 并发问题: 竞争条件(竞态条件) 多程序并发存在大量问题 同步 多线程共享公共数据的协调执行包括互斥与条件同步互斥: 在同一时间只有一个线程可以执行临界区 确保线程同步 需要高层次的编程抽象(如: 锁)从底层硬件支持编译 2 信号量 信号量是抽象数…

python里元组和列表的共同点和不同点_Python元组与列表的相同点与区别

列表和元组都属于有序序列&#xff0c;支持使用双向索引访问其中的元素、使用内置函数len()统计元素个数、使用运算符in测试是否包含某个元素、使用count()方法统计指定元素的出现次数和index()方法获取指定元素的索引。虽然有着一定的相似之处&#xff0c;但列表和元组在本质上…

操作系统中死锁避免算法 --- 银行家算法

1. 背景 在银行系统中, 客户完成项目需要申请贷款的数量是有限的, 每个客户在第一次申请贷款时要声明完成该项目所需的最大资金量, 在满足所有贷款要求并完成项目时, 客户应及时归还. 银行家在客户申请的贷款数量不超过自己拥有的最大值时, 都应尽量满足客户的需要. 在这样的描…