插件使用

滚动选中目录

1. 安装 yarn add @vuepress/plugin-active-header-links -D
2. 在 docs\.vuepress\config.js 引入
3. 配置

import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'

module.exports = {
  plugins: [activeHeaderLinksPlugin({})]
}

搜索

1. 安装
2. 在 docs\.vuepress\config.js 引入
3. 配置

import { searchPlugin } from '@vuepress/plugin-search'
module.exports = {
  plugins: [
    searchPlugin({
      locales: {
        '/': {
          placeholder: '搜索'
        },
        '/zh/': {
          placeholder: '搜索'
        }
      },
      // 允许搜索 Frontmatter 中的 `tags`
      getExtraFields: (page) => page.frontmatter.tags ?? []
    })
  ]
}

返回顶部

1. 安装 yarn add @vuepress/plugin-back-to-top -D
2. 配置

module.exports = {
  plugins: ['@vuepress/back-to-top']
}

复制代码块

TIP

官网：https://vuepress-theme-hope.github.io/v2/copy-code/zh/

1. 安装 yarn add -D vuepress-plugin-copy-code2@next
2. 在 docs\.vuepress\config.js 引入
3. 配置

import { copyCodePlugin } from 'vuepress-plugin-copy-code2'
module.exports = {
  plugins: [
    copyCodePlugin({
      showInMobile: true
    }),

}

完整配置代码

import { defaultTheme } from 'vuepress'
// 搜索框
import { searchPlugin } from '@vuepress/plugin-search'
// 滚动选择对应标题
import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
// 复制代码
import { copyCodePlugin } from 'vuepress-plugin-copy-code2'
import { navbar, sidebar } from './config/index'

module.exports = {
  lang: 'zh-CN',
  title: '我睡着的时候不困唉', // 网站标题
  description: '记录学习笔记', // 网站的描述
  dest: './dist', // 设置编译后的输出目录./ROOT代表在工程的根目录下生成一个ROOT文件，里面是编译好的文件，可以拿ROOT直接部署
  base: '/zmmblog/', // 设置站点根路径 // 路径名为 "/<REPO>/"
  port: 3026, // 端口号
  head: [
    // 增加一个自定义的 favicon
    [
      'link',
      {
        rel: 'icon',
        href: '/favicons/favicon-16x16.png',
        type: 'image/png',
        sizes: '16x16'
      }
    ],
    [
      // 解决外联图片不显示由于我们vuepress本地服务把当前本站的referrer带给了cdn图片请求，第三方发现不是本站的请求
      'meta',
      {
        name: 'referrer',
        content: 'no-referrer'
      }
    ],
    // 移动端优化
    [
      'meta',
      {
        name: 'viewport',
        content:
          'width=device-width,initial-scale=1,user-scalable=no,maximum-scale=2'
      }
    ]
  ],
  // 插件配置-----------------------------
  plugins: [
    copyCodePlugin({
      showInMobile: true
    }),
    searchPlugin({
      locales: {
        '/': {
          placeholder: '搜索'
        },
        '/zh/': {
          placeholder: '搜索'
        }
      },
      // 允许搜索 Frontmatter 中的 `tags`
      getExtraFields: (page) => page.frontmatter.tags ?? []
    }),
    activeHeaderLinksPlugin({}),
    '@vuepress/back-to-top'
  ],

  theme: defaultTheme({
    logo: '/images/logo.png',
    // 默认主题配置
    navbar: navbar,
    sidebar: sidebar
  })
}