在Github页面上生成类似下面这样的badge的方法

你可以通过以下步骤在GitHub个人主页的README中创建类似的技术栈徽章：

---

一、使用 Shields.io 生成徽章

Shields.io 是一个开源徽章生成工具，支持自定义文本、颜色、图标等参数。

1. 基础模板

https://img.shields.io/badge/标签-消息-颜色代码?style=样式&logo=图标名称&logoColor=图标颜色

• 标签：徽章左侧文字（如 ROS）
• 消息：徽章右侧文字（如版本号或技术名称）
• 颜色代码：支持十六进制（如 #22314E）或颜色名称（如 blue）
• 图标名称：从 Simple Icons 中查找（如 ROS → ros）
• 样式：可选 flat/flat-square/plastic 等

---

二、操作步骤

1. 生成单个徽章

例如生成 ROS 徽章：

![ROS](https://img.shields.io/badge/ROS-22314E?style=flat-square&logo=ros&logoColor=white)

• 标签留空：若不需要左侧文字，可省略标签部分：

  ![ROS](https://img.shields.io/badge/-ROS-22314E?style=flat-square&logo=ros&logoColor=white)
  

2. 组合多个徽章

将多个徽章链接排列在README中，例如：

![Python](https://img.shields.io/badge/-Python-3776AB?style=flat-square&logo=python&logoColor=white)
![React](https://img.shields.io/badge/-React-61DAFB?style=flat-square&logo=react&logoColor=black)
![Docker](https://img.shields.io/badge/-Docker-2496ED?style=flat-square&logo=docker&logoColor=white)

---

三、快速生成工具

如果手动构造URL太麻烦，可以使用以下工具：

1. Shields.io 在线生成器
   • 选择样式、填写参数后自动生成链接。
2. Badgen.net
   • 更简洁的URL格式，例如：

     https://badgen.net/badge/ROS/2.0/22314E?icon=ros
     

---

四、添加到GitHub README

1. 编辑你的GitHub Profile仓库（通常名为 <用户名>/<用户名>）
2. 在 README.md 中插入徽章代码：

   ## 🛠 技术栈
   ![ROS](https://img.shields.io/badge/-ROS-22314E?style=flat-square&logo=ros&logoColor=white)
   ![Python](https://img.shields.io/badge/-Python-3776AB?style=flat-square&logo=python&logoColor=white)
   

---

五、进阶技巧

1. 对齐优化：使用HTML换行或调整间距：

   <img src="链接1" alt="徽章1" /> <img src="链接2" alt="徽章2" /> 
   

2. 动态更新：通过API动态显示数据（如博客访问量）：

   https://img.shields.io/badge/博客-今日访问量-{count}-brightgreen
   

---

示例效果

通过上述方法，你可以轻松定制个性化的GitHub主页徽章展示！