为外部链接添加图标标识，提升用户识别外部链接的体验。在链接右侧添加一个小图标或图标字体，让用户一眼就能识别这是指向外部网站的链接，提升可用性和用户体验。

在theme/style新建link.css文件

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.mts
│  │  └─ theme
│  │     └─ style
│  │        └─ index.css
│  │        └─ link.css
│  └─ index.md
└─ node_modules

将下面代码，复制粘贴到link.css中

/* .vitepress/theme/style/link.css */

/* YouTube */
.vp-doc a[href^="https://www.youtube.com/"]:before {
    content: '';
    background-image: url(/icons/youtube.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    margin-right: 4px;
}

/* 哔哩哔哩 */
.vp-doc a[href^="https://www.bilibili.com/"]:before {
    content: '';
    background-image: url(/icons/bilibili.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: -1px;
    margin-right: 4px;
}

/* 哔哩哔哩个人空间 */
.vp-doc a[href^="https://space.bilibili.com/"]:before {
    content: '';
    background-image: url(/icons/bilibili.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: -1px;
    margin-right: 4px;
}

/* 爱发电 */
.vp-doc a[href^="https://afdian.com/"]:before {
    content: '';
    background-image: url(/icons/aifadian.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: 0px;
    margin-right: 4px;
}

/* Github */
.vp-doc a[href^="https://github.com/"]:before {
    content: '';
    background-image: url(/icons/github.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: -4px;
    margin-right: 4px;
}

/* QQ频道 */
.vp-doc a[href^="https://pd.qq.com/"]:before {
    content: '';
    background-image: url(/icons/QQ.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-size: cover;
    top: -4px;
    margin-right: 4px;
}

然后在index.ts中引入生效

/* .vitepress/theme/index.ts */
import "./style/link.css";

图标文件放置位置：

在docs/public/icons目录下放置 SVG 图标文件：

• youtube.svg
• bilibili.svg
• aifadian.svg
• github.svg
• QQ.svg

用法

油管链接图标：[Youtube](https://www.youtube.com/)

B站链接图标：[哔哩哔哩](https://space.bilibili.com/1323019347)

爱发电链接图标：[爱发电](https://afdian.com/a/mcooooo)

Github链接图标：[Github](https://github.com/GeminiAlpha-1)

QQ频道链接图标：[QQ频道](https://pd.qq.com/)