一、Shields
免费的SVG徽章生成器，靠URL传参就能生成各种状态、版本、技术栈小牌子，直接插Markdown就能用 不用装插件、不用写CSS、不用管跨域——复制链接、粘贴到md，部署完直接生效，省心到离谱。
二、基础玩法：30秒插一个能用的徽章
1️⃣ 静态徽章（固定文字/颜色，最常用）
格式： 举个栗子，直接复制到你的VitePress md里：
markdown
效果：
2️⃣ 动态徽章（自动拉取数据，比如版本、下载量）
不用手动改，自动同步npm/GitHub数据：
markdown
效果：
3️⃣ 可点击徽章（加链接，跳转到对应页面）
套一层Markdown链接语法，点击徽章直接跳转：
markdown
[](https://vitepress.dev)
[](https://github.com/vuejs/vitepress)效果：
三、进阶骚操作：让徽章颜值拉满
✨ 样式自由切换（style参数）
默认太普通？加?style=，常用这4种：
flat（默认，简约）flat-square（方角，干净）plastic（塑料质感，复古）for-the-badge（大字体，醒目）
markdown
效果：
🎨 自定义颜色+Logo（逼格核心）
labelColor：左侧背景色color：右侧背景色（支持十六进制，比如#646CFF）logo：加技术图标（去Simple Icons查名称）logoColor：图标颜色
markdown
效果：
🧩 排版优化（VitePress里更好看）
别堆成一团，用空格/换行分组，清爽不杂乱：
markdown
### 项目信息
### 技术栈
四、VitePress实战：直接复制就能用的模板
放到你的index.md或文档首页顶部，直接出效果：
markdown
---
title: 我的技术博客
---
# 我的VitePress博客 ✨
[](https://vitepress.dev)
[](https://nodejs.org)
[](https://vuejs.org)
[](https://www.typescriptlang.org)
[](https://github.com/你的用户名/你的仓库)
[](https://opensource.org/licenses/MIT)
> 专注前端、后端、架构分享，用代码构建有趣的世界
## 简介
这里是我的个人技术博客，基于VitePress搭建，记录学习、踩坑、实战心得……