This is the third day of my participation in the August Text Challenge.More challenges in August

preface

This article will take you about 5 minutes to make your Github look different and more attractive, combined with more fun Github series.

Open up any two Github repositories and will you find a lot of official plugin repositories with little badges like the one shown below? Go to your own warehouse, is the readme. md file empty, only a few dry lines of text, today, students will take you to continue to beautify our Github warehouse.

More in the Github Series:

  • Github Pages deployment tutorial

  • Play Github — Add a unique business card to your Github

Generate the badge

In fact, in front of a lot of things we just need to stand on the shoulders of giants, generating badges is actually very simple, predecessors have helped us do a lot of easy to use small public action, today to introduce a few help to quickly generate badges website, remember to like collection oh:

  • Shields.io 
  • Badgen.net
  • NodeICO

I’m going to use each of these three badge generators to give you a simple guide on how to quickly and easily generate good-looking badges and beautify our Github repository.

Generate static badges

IO to add an MIT License badge to our Next-antd-Scaffold repository.

After opening the site, we find the location shown in the image below, type in three messages, and then click Generate badge:

I typed license-mit-blue, and the result is as follows:

As you can see, it is very convenient to create a build-passing green badge and put it into the repository readme. md file.

Generate dynamic badges

Above introduced static badge generation and the first badge site use method, next, let’s use the second site Badgen.net to help us generate some dynamic badges.

This time select the repository, dynamic-antd-theme, which is a small react plug-in developed by the author. I want to obtain the latest available release by using dynamic Badge. Here is a scheme as follows: https://badgen.net/github/release/:username/:repo/stable, including: the username = user name: repo = warehouse, results are as follows:

As you can see, the release of the warehouse is indeed 0.8.2, which does automatically generate dynamic badges for us. It is also the same as adding this Badge to the readMd. md file of our warehouse. Let’s see the effect:

Generates NPM badges

NodeICO, the third site, and the third type of badges, which are generated for various NPM packages. Without talking too much nonsense, let’s go to the Demo and see how it works. Here we use the mini-dynamic-antd-theme as an example to generate an NPM badge for it:

Final effect:

After gip: XXX: XXX: XXX: XXX: XXX: XXX: XXX: XXX

Final warehouse effect:

To be honest, the NPM warehouse badge is a bit ugly and incongruous 😂, but that’s it, just to show you how to do it

conclusion

So much for generating badges associated with your project, each of these sites can actually do a lot of things (static badges/dynamic badges etc…). , here is just to help you understand the use of each website, so take out a point to introduce, if you are interested, you can go to each website to see how to use.

Generally speaking, it is helpful to write various plug-ins in open source in the future. The most important thing is that if you have an interview, when the interviewer opens your warehouse, you may have a bright feeling