VitePress 链接前加图标

发表于

更新于

字数

阅读量

文内链接前加一个图标，展示当前链接的地址属于哪个网站。效果展示：

VitePress 官方文档

VitePress 建站资源汇总

Github - weizwz

实现

利用伪元素及iconify在线图标，纯css即可实现

docs/.vitepress/theme/style/link.scss

scss

/* 链接 */
.vp-doc a:not([href^='https://img.shields.io/']) {

  &[target='_blank'],
  &[href^='./'],
  &[href^='../'] {
    &::before {
      content: "";
      background-image: url(https://api.iconify.design/uil:link-alt.svg?color=%23409eff);
      width: 20px;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      background-size: cover;
      top: -2px;
      margin-right: 2px;
    }
  }

  &[href^='./']::before,
  &[href^='../']::before,
  &[href^='https://note.weizwz.com']::before {
    background-image: url("https://p.weizwz.com/logo_a4353391cbf0889b.webp");
  }

  &[href^='https://vitepress.dev']::before {
    background-image: url("https://vitepress.dev/vitepress-logo-mini.svg");
  }

  &[href^='https://github.com']::before {
    background-image: url(https://api.iconify.design/mdi/github.svg);
  }

  &[href^='https://gitee.com']::before {
    width: 18px;
    height: 18px;
    margin-left: 1px;
    margin-right: 3px;
    background-image: url(https://api.iconify.design/simple-icons/gitee.svg?color=%23C71E23);
  }

  &[href^='https://developer.mozilla.org']::before {
    width: 16px;
    height: 16px;
    margin-left: 3px;
    margin-right: 3px;
    background-image: url(https://api.iconify.design/logos/mdn.svg);
  }

  &[href^='https://cn.vite.dev']::before,
  &[href^='https://vite.dev']::before {
    background-image: url("https://cn.vite.dev/logo.svg");
  }

  &[href^='https://webpack.js']::before {
    background-image: url(https://api.iconify.design/material-icon-theme/webpack.svg);
  }

  &[href^='https://vuejs.org']::before,
  &[href^='https://cn.vuejs.org']::before {
    background-image: url(https://api.iconify.design/material-icon-theme/vue.svg);
  }

  &[href^='https://twikoo.js.org']::before {
    width: 16px;
    height: 16px;
    margin-left: 3px;
    margin-right: 3px;
    background-image: url("https://twikoo.js.org/twikoo-logo-mini.png");
  }

  &[href^='https://element-plus.org']::before,
  &[href^='https://element.eleme.']::before {
    width: 14px;
    height: 16px;
    margin-left: 2px;
    margin-right: 4px;
    background-image: url(https://api.iconify.design/logos/element.svg);
  }

  &[href^='https://nodejs.org']::before {
    width: 34px;
    height: 20px;
    background-image: url(https://api.iconify.design/logos/nodejs.svg);
  }

  &[href^='https://npmjs.com']::before {
    background-image: url(https://api.iconify.design/material-icon-theme/npm.svg);
  }

  &[href^='https://react.dev']::before {
    background-image: url(https://api.iconify.design/material-icon-theme/react.svg);
  }

  &[href^='https://typescriptlang.org']::before {
    width: 18px;
    height: 18px;
    margin-left: 1px;
    margin-right: 3px;
    background-image: url(https://api.iconify.design/logos/typescript-icon.svg);
  }

  &[href^='https://uniapp.dcloud.net.cn']::before {
    background-image: url(https://api.iconify.design/mynaui/letter-u-square-solid.svg?color=%232D8E3B);
  }

  &[href*='.siliconflow.cn']::before {
    width: 16px;
    height: 16px;
    margin-left: 3px;
    margin-right: 3px;
    background-image: url(https://static01.siliconflow.cn/f/static/cn/logo.svg);
  }

  &[href^='https://code.visualstudio.com']::before {
    width: 16px;
    height: 16px;
    margin-left: 3px;
    margin-right: 3px;
    background-image: url(https://api.iconify.design/logos:visual-studio-code.svg);
  }
}

// 暗黑模式
.dark .vp-doc a {
  &[href^='https://github.com']::before {
    background-image: url(https://api.iconify.design/mdi/github.svg?color=%23d3d3d3);
  }
}

然后将 css 注入主题配置

.vitepress/theme/index.ts

// 导入链接样式
import './style/link.scss'

VitePress 链接前加图标 ​

实现 ​

VitePress 链接前加图标

实现