# vuepress-plugin-md-tags

npm : https://www.npmjs.com/package/vuepress-plugin-md-tags

# Intro

npm vuepress@1.x文档tag插件 (opens new window)

文档tag插件示例 (opens new window)

适用于 vuepress@1.x (opens new window) 的插件,参考tag样式可以查看 link here (opens new window),配置代码参考link here (opens new window)

当然这需要你的这个页面顶部有 Front Matter (opens new window), 本插件使用了官方预定义的 内置搜索中的 tags (opens new window) 来渲染。

Front Matter 对应如下

---
tags:
  - vuepress
  - plugin
---
1
2
3
4
5

# Install

npm install vuepress-plugin-md-tags
1

# Usage

module.exports = {
  "plugins": [
    ["vuepress-plugin-md-tags"]
  ]
}
1
2
3
4
5

# 详细配置参数

提示:tag标签会被默认插入到h1标题下,建议h1文章标题添加到文章顶部,在文档中# vuepress-plugin-md-tags 会即是h1标题

module.exports = {
  "plugins": [
    ["vuepress-plugin-md-tags", {
      type: 'default', // 标签预定义样式
      color: '#fff',  // 标签字体颜色
      borderColor: 'transparent', // 标签边框颜色
      background: 'rgb(45, 183, 245)', // 标签背景颜色
      selector: '.page .content__default h1'
    }]
  ]
}
1
2
3
4
5
6
7
8
9
10
11

上述配置中的 color、borderColor、background 只在 type=default 时生效。

type 有如下的选项:

  • rainbow : 彩虹主题 目前不支持自定义
  • default 默认主题,与 vuepress 官方默认主题颜色一致;
  • primary : 语义主题
  • success : 语义主题
  • info : 语义主题
  • warning : 语义主题
  • danger : 语义主题
🥰Me

男性,武汉工作,会点Web,擅长Javascript.

技术或工作问题交流,可联系微信:1169170165.

🚀小程序&公众号
🚀运行
2024年2月19日星期一下午2点01分
博客已运行:--天--时--分--秒
上次更新: 7/27/2023, 10:28:11 AM

评 论: