大家好，我是南城余。

最近在搞项目的开源 README.md 时，看到有的大佬的 README.md 前面都会有 badge 标识和多彩的 tag 标签。都看着超级高级，就想着也来实践下。

今天一篇文章带着大家个性化你的 README.md。如下图片：

 

这里我先放下适用于所有 Spring Boot 项目和 React 项目的通用模板。方便大家直接 COPY。

❝

因为搞这东西，还挺费时的，这里直接给大家放下通用的模板。

下方也有自定义你的专属 README.md 步骤哦~

通用模板

Spring Boot 项目

❝

只需要修改下方 nanchengcyu/TechMindWave-backend 为你自己的名字和仓库即可 

另外：如果项目的 Java 版本和 SpringBoot 版本与下方不一致，也可以修改下方对应数字即可

<h1 align="center">自动图文生成系统</h1>
<p align="center">
  <img src="https://img.shields.io/github/languages/code-size/nanchengcyu/TechMindWave-backend" alt="code size"/>
  <img src="https://img.shields.io/badge/Spring%20Boot-2.5.4-brightgreen" alt="Spring Boot"/>
  <img src="https://img.shields.io/github/languages/count/nanchengcyu/TechMindWave-backend" alt="languages"/>
  <img src="https://img.shields.io/badge/Java-8-blue" alt="Java"/>
  <img src="https://img.shields.io/github/last-commit/nanchengcyu/TechMindWave-backend" alt="last commit"/><br>
  <img src="https://img.shields.io/badge/Author-nanchengyu-orange" alt="Author" />
</p>
<hr>

效果图展示

React 项目

<h1 align="center">自动图文生成系统</h1>

<p align="center">
  <img src="https://img.shields.io/github/languages/code-size/nanchengcyu/TechMindWave-frontend" alt="code size"/>
  <img src="https://img.shields.io/badge/React-17.0.2-blue" alt="React"/>
  <img src="https://img.shields.io/badge/Ant%20Design%20Pro-5.0.0-brightgreen" alt="Ant Design Pro"/>
  <img src="https://img.shields.io/github/languages/count/nanchengcyu/TechMindWave-frontend" alt="languages"/>
  <img src="https://img.shields.io/github/last-commit/nanchengcyu/TechMindWave-frontend" alt="last commit"/>
  <br>
  <img src="https://img.shields.io/badge/Author-nanchengyu-orange" alt="Author" />
</p>
<hr>

效果图展示

自定义你的 README.md

步骤如下：
1）你可以用下面这个网站，自定义你的标签

❝

https://shields.io/

2）点击 Get Started，进入下面这个页面自定义你的 badge 标识和多彩的 tag 标签

❝

如下方红色箭头所示，推荐使用 HTML 粘贴到 README.md 中。

 

❝

此步骤参考于

https://www.cnblogs.com/knuzy/p/15320038.html

但是步骤有点过时，推荐使用上方我的通用模板！