在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主頁徽章展示！