插件

最近更新：2023-11-17

Markdown高亮

使用内置插件 Prism.js 来为 Markdown 代码块启用高亮

注意

不用另外装和配置，已经内置了除非你要改动，你就需要重新安装

pnpm add -D @vuepress/plugin-prismjs@next

yarn add -D @vuepress/plugin-prismjs@next

npm i -D @vuepress/plugin-prismjs@next

import { prismjsPlugin } from '@vuepress/plugin-prismjs'

export default {
  plugins: [
    //markdown代码高亮配置
    prismjsPlugin({
      preloadLanguages:['markdown', 'jsdoc', 'yaml']
    }),
  ],
}

注意

在生产和构建时候会 提示插件已经被使用多次 ，是因为已经内置了，你再装一个插件

默认使用你安装的，不影响打包

站外链接文字

默认主题中，我们复制站外链接文字会出现多余的A11y文字

比如

Githubopen in new window 复制出来是 GitHub open in new window

怎么删除后面这个open in new window呢

我们需要安装插件后进行配置，安装

pnpm add -D @vuepress/plugin-external-link-icon@next

yarn add -D @vuepress/plugin-external-link-icon@next

npm i -D @vuepress/plugin-external-link-icon@next

说明

引号内留空就可以了，除非你想个性化

import { externalLinkIconPlugin } from '@vuepress/plugin-external-link-icon'

export default {
  plugins: [
    externalLinkIconPlugin({
      locales: {
        '/': {
          openInNewWindow: '在新窗口打开，不想要文字删掉留空即可',
        },
        '/en/': {
          openInNewWindow: 'open in new window',
        },
      },
    }),
  ],
}

注意

在生产和构建时候会 提示插件已经被使用多次 ，是因为已经内置了，你再装一个插件

默认使用你安装的，不影响打包

另外站外链接图标不想要，可以用Frontmatter关闭当前页

说明

所有页面都关闭，可参考官方文档open in new window ，但我并未生效

---
externalLinkIcon: false
---

谷歌分析

利用插件 google-analyticsopen in new window ，来查看网站访问量

pnpm add -D @vuepress/plugin-google-analytics@next

yarn add -D @vuepress/plugin-google-analytics@next

npm i -D @vuepress/plugin-google-analytics@next

import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'

export default {
  plugins: [
    googleAnalyticsPlugin({
      id: 'G-XXXXXXXXXX', //跟踪ID
    }),
  ],
}

谷歌分析官网：https://analytics.google.com/open in new window

点 开始衡量

说明

没有账号的注册账号，要翻墙哦

信息随便填，后面都可以改

创建完成，点网站，输入你自己的网站

衡量ID就是跟踪ID，我们填入 config.ts

如果不想要了，在账户设置里删除账户

说明

删除了在回收站里，要35天后永久删除

复制代码块

默认主题没有添加这个功能，我们可以用第三方插件

官网：https://plugin-copy-code2.vuejs.press/zh/open in new window

安装

pnpm add -D vuepress-plugin-copy-code2

yarn add -D vuepress-plugin-copy-code2

npm i -D vuepress-plugin-copy-code2

import { copyCodePlugin } from 'vuepress-plugin-copy-code2'

export default {
  plugins: [
    copyCodePlugin({
      showInMobile: true, //是否显示在移动端
    }),
  ],
};

# 插件

# Markdown高亮

# 站外链接文字

# 谷歌分析

# 复制代码块

# 更多插件

插件

Markdown高亮

站外链接文字

谷歌分析

复制代码块

更多插件