preface

The GitHub logo, the GitHub Badge, you can call it a Badge. These are the little ICONS you often see in a project README that indicate information such as build status or version. Like this:

1. Logo

  1. The logo image is divided into two parts, the left side is the title, the right side is the content, like a key value pair.
  2. The GitHub logo website is shields. IO /
  3. Icon in the specification

How to add dynamic logo

A dynamic logo is a logo that automatically updates the status of the project if the status of the project changes, ensuring that the information users see is the true status of the project.

Commonly used dynamic logos are:

  • Continuous integration status
  • Project Version Information
  • Code test coverage
  • Project downloads
  • Contributor statistics and so on

Take the continuous integration state of Travis CI as an example. For those of you who haven’t worked with Travis CI, see my last article on continuous integration and automated deployment using Travis CI+GitHub

  1. Log in to Travis CI and go to the project that you configured to build, with the Build Passing or Build Failing logo to the right of the project name.

  2. Click on it, and in the pop-up box, you’ll see the badge addresses that Travis CI has given you in various formats.

  3. You can choose the format you want. The imageUrl format looks something like this:

    https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=master
Copy the code

    The markDown format looks something like this:

    [![Build Status](https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=master)](https://www.travis-ci.org/{your-name} /{your-repo-name})Copy the code

  4. For simplicity, I choose the markdown format. After copying the content, open the README document for the project and paste it at the top.

  5. After the first four steps, the small badge is done. Push the README document to remote, refresh the GitHub page, and after a while, you will see the continuous integration status icon on the README. The reason it takes a while to load is because it dynamically gets the state from the Travis CI platform.

How to customize the logo

Shields. IO provides the ability to customize logos.

Logo icon format

https://img.shields.io/badge/ {logo title} - {} logo content -} {logo color. SVGCopy the code

Logo with link

[! [] (https://img.shields.io/badge/ {logo title} - {} logo content -} {logo color. SVG)] ({linkUrl})Copy the code

Variable declaration

  • Logo title: The text to the left of the logo
  • Logo content: the text to the right of the logo
  • Logo color: The background color to the right of the logo, which can be the hexadecimal value of the color or the color English. The supported colors are as follows:

Variables are connected by -. Replace these three variables with whatever you want to generate a custom logo.

Take a chestnut

For example, here is my blog logo:

[![](https://img.shields.io/badge/[email protected])](https://champyin.com)
Copy the code

Effect:

The advanced

In addition to the three parameters mentioned above, shields. IO also provides some Query strings to control the logo style. Use the same method as the QUERY string of the URL: logo icon address? {parameter name}={parameter value}, multiple parameters are joined with & :

https://img.shields.io/badge/ {logo title} - {} logo content -} {logo color. SVG? Parameter name {1} = 1} {parameter values & {2} parameter name = {2} parameter valuesCopy the code

Common query String arguments are:

  • Style: controls the theme style of the logo. The value of style can be:plastic | flat | flat-square | social 。
  • Label: The title text used to force overwriting of the original logo.
  • ColorA: controls the background color of the left half. Only hexadecimal color value can be used as the parameter.
  • ColorB: Controls the right background color.

Take the style parameter as an example

Plastic stereoscopic effect:

! [](https://img.shields.io/badge/[email protected]? style=plastic)Copy the code

Flat, also the default:

! [](https://img.shields.io/badge/[email protected]? style=flat)Copy the code

Flat -square flat + fillet effect:

! [](https://img.shields.io/badge/[email protected]? style=flat-square)Copy the code

Social style effect:

! [](https://img.shields.io/badge/[email protected]? style=social)Copy the code

There are a lot of parameters, similar usage. More information can be found at shields. IO.

conclusion

The logo is simple without loss of content, simple to use without loss of flexibility. If your project hasn’t used a logo yet, try adding one to your project and you’ll love it.

—

Welcome to reprint, reprint please indicate the source: champyin.com/2019/10/05/…