README

Badges 徽章

Shields.io: Quality metadata badges for open source projects  徽章

官网:https://shields.io

GitHub项目README,其中不乏用到一些非常好看的标签。比如下面这样:

Your BADGE 生成

1.在shields.io 生成自己的标签,注意:生成栏在网站的最下面,下面的图片就是我生成  需要在Your Badge下面填的内容。之后它会生成唯一链接。https://img.shields.io/badge/download-1K-brightgreen.svg

2.因为README默认支持MarkDown语法。所以我们很容易插入图片和用图片做为链接跳转到别处。下面分别演示。继续以  为例。

a.只是显示图片

MarkDown语法显示图片: ![图片描述](图片链接)
![](https://img.shields.io/badge/download-1K-brightgreen.svg)

b.让图片做为链接

MarkDown语法创建链接: [链接名](网址)
[百度](https://www.baidu.com)

百度

在此基础上,我们把`链接名`换成`图片`不就好了:
[![图片描述](图片链接)]()
[![](https://img.shields.io/badge/download-1K-brightgreen.svg)](https://www.baidu.com)

(点击进入百度)


Downloads 下载量标签

以npm的下载量为例:

首先,我们要保证我们的库已经publish到npm上,然后,进入该网站配置你的npm仓库代码。

点击【666/month】的链接会看见如下界面:

Link,意思是点击该标签会跳转的地址,一般我们就直接跳转到npm的地址即可;
Image,就是动态显示成你标签的关键。观察示例链接不难发现前面都是该域名的地址,从npm开始则是我们标签配置的地方。
npm,指我们需要获取npm的数据,
dm,就是月下载量,后面的[localeval].svg就是需要改成你的npm仓库名位置了。 所以比如将这个链接改为https://img.shields.io/npm/dm/v-tap.svg 就是我v-tap在npm上的数据下载量了。如下图: 同理,比如你要获取npm版本;示例链接如下是https://img.shields.io/npm/v/npm.svg
改成:https://img.shields.io/npm/v/v-tap.svg 就是我v-tap的了:


Build 标签

那关于集成测试的如何显示呢?以react的为例,他们使用的是circleCI来集成构建。

首先,需要在你的项目下编写circleCI的配置文件

machine:

node:

version: 6

test:

override:

- npm test

这是一个非常简单的circle.yml配置文件,当我们提交代码的时候circle会自动帮我们构建并且执行npm test进行测试。如果测试都通过了则build passing

然后,只需要我们在:https://img.shields.io 找到 CircleCI的标签,跟下载量一样,修改下它的链接即可:

https://img.shields.io/circleci/project/github/[username]/[repo].svg

如我github的username是MeCKodo,一个配置了circle的repo为webpack-browser-log则标签的链接为https://img.shields.io/circleci/project/github/MeCKodo/webpack-browser-log.svg。显示如下

其他也都是大同小异!快去装饰你的repo吧!


GitHub Pages

绑定域名

DevOps - 版本控制 - GitHub的更多相关文章

  1. 版本控制-GitHub

    前面几篇文章,我们介绍了Git的基本用法及Git服务器的搭建,本篇文章来学习一下如何使用GitHub.GitHub是开源的代码库以及版本控制库,是目前使用网络上使用最为广泛的服务,GitHub可以托管 ...

  2. 版本控制--github相关

    安装 Git 后,你应该做一些只需做一次的事情:系统设置——这样的设置在每台电脑上只需做一次: $ git config --global user.name "Your Name" ...

  3. DevOps - 版本控制 - Git

    配置 .gitignore 配置 .gitignore 配置文件用于配置不需要加入版本管理的文件,配置好该文件可以为我们的版本管理带来很大的便利. 有些时候,你必须把某些文件放到Git工作目录中,但又 ...

  4. DevOps - 版本控制 - Gogs

    Gogs Gogs官网:https://gogs.io Gogs文档:https://gogs.io/docs Gogs配置文件手册:https://gogs.io/docs/advanced/con ...

  5. DevOps - 版本控制 - Bitbucket

    Bitbucket 使用139邮箱无法收到注册邮件 https://bitbucket.org

  6. 基于Github Actions + Docker + Git 的devops方案实践教程

    目录 为什么需要Devops 如何实践Devops 版本控制工具(Git) 学习使用 配置环境 源代码仓库 一台配置好环境的云服务器 SSH远程登录 在服务器上安装docker docker技术准备工 ...

  7. GitHub版本控制

    版本控制-GitHub 前面几篇文章,我们介绍了Git的基本用法及Git服务器的搭建,本篇文章来学习一下如何使用GitHub.GitHub是开源的代码库以及版本控制库,是目前使用网络上使用最为广泛的服 ...

  8. asp.net core webapi/website+Azure DevOps+GitHub+Docker

    asp.net core webapi/website+Azure DevOps+GitHub+Docker 新春开篇作,主要写一下关于asp.net core web/api 2.2 项目借助dev ...

  9. Github和Azure DevOps的代码同步

    [前言]Github和Azure DevOps都提供了Git代码库功能,那么有没有办法将两边的代码库进行同步呢,答案是肯定的.这里的操作我都是用Azure DevOps的Pipelines功能来完成的 ...

随机推荐

  1. Scrapy框架之基于RedisSpider实现的分布式爬虫

    需求:爬取的是基于文字的网易新闻数据(国内.国际.军事.航空). 基于Scrapy框架代码实现数据爬取后,再将当前项目修改为基于RedisSpider的分布式爬虫形式. 一.基于Scrapy框架数据爬 ...

  2. LARAVEL学习--安装

    之前一直使用Codeignitor框架进行PHP的开发,Codeignitor是一个非常优秀的框架,上手简单,文档极其友好,流行程度甚高(这带来了很好的社区支持+云环境支持),很轻量,可扩展性佳,性能 ...

  3. Linux服务器性能评估与优化(二)

    网络内容总结(感谢原创) 1.Linux内核参数优化 内核参数是用户和系统内核之间交互的一个接口,通过这个接口,用户可以在系统运行的同时动态更新内核配置,而这些内核参数是通过Linux Proc文件系 ...

  4. Cloud

    Cloud = Data + Routing + Computing + Storage

  5. Java IntelliJ IDEA 不能显示项目里的文件结构的解决方案

    按下列步骤操作:1. 关闭IDEA2.然后删除项目文件夹下的.idea文件夹3.重新用IDEA工具打开项目

  6. Java常用Json库性能对比

    Java对于处理JSON数据的序列化与反序列化目前常用的类库有Gson.FastJSON.Jackson.jettison以及json-lib.在这里我们将对这些类库在json序列化与反序列化方面的性 ...

  7. spring框架入门day02

    0. 绪论 在第二天的学习中的学习JdbcTemplate之前,想要下载最新版本的mysql server8.0.11 结果在将所有的东西配置好后,发现报错, · Establishing SSL c ...

  8. 成功解决:FutureWarning: Conversion of the second argument of issubdtype from `float` to `np.floating` is

    问题原因: 包内出错,是h5py包 解决思路: 执行如下操作: pip -- install h5py==2.8.0rc1 注意:如果执行pip install h5py==2.8.0rc1 成功话, ...

  9. SASS初体验

    SASS初体验 标签(空格分隔): sass scss css 1. 编译环境 需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行 gem install ...

  10. 再学UML-UML用例建模解析(二)

    (1) 关联关系 关联关系是指执行者与用例之间的关系,又称为通信关系,如果某个执行者可以对某个用例进行操作,它们之间就具有关联关系,如下图所示,“经理”有一个功能为“查看库存报表”,因此可以在执行者“ ...