VitePress 系列（2）：插件VitePress 系列（2）：插件。使用 medium-zoom 实现缩放图片，使

VitePress 系列（2）：插件

使用插件实现一些其他效果。比如使用 medium-zoom 实现缩放图片，使用 vitepress-plugin-group-icons 增加代码组图标，使用 nprogress-v2 实现切换路由进度条效果。

图片缩放

主要是使用 medium-zoom ，参考了Allow images to be zoomed in on click

::: code-group

pnpm add -D medium-zoom

yarn add -D medium-zoom

npm install medium-zoom

bun add -D medium-zoom

:::

在 .vitepress/theme/index.ts 添加如下代码，并保存

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'

import mediumZoom from 'medium-zoom';
import { onMounted, watch, nextTick } from 'vue';
import { useRoute } from 'vitepress';

export default {
  extends: DefaultTheme,

  setup() {
    const route = useRoute();
    const initZoom = () => {
      // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); // 默认
      mediumZoom('.main img', { background: 'var(--vp-c-bg)' }); // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
    };
    onMounted(() => {
      initZoom();
    });
    watch(
      () => route.path,
      () => nextTick(() => initZoom())
    );
  },

}

点击图片后，还是能看到导航栏，加一个遮挡样式

在 theme/style 新建 medium-zoom.scss 加入如下代码:

/* .vitepress/theme/style/medium-zoom.scss */
:root {
  --medium-zoom-z-index: 100;
  --medium-zoom-c-bg: var(--vp-c-bg);
}

.medium-zoom-overlay {
  /* override element style set by medium-zoom script */
  z-index: var(--medium-zoom-z-index);
  background-color: var(--medium-zoom-c-bg) !important;
}

.medium-zoom-overlay ~ img {
  z-index: calc(var(--medium-zoom-z-index) + 1);
}

然后在 index.scss 中引入生效

/* .vitepress/theme/style/index.scss */
@import "./medium-zoom.scss";

更改之后效果

代码组图标

使用的插件是 @yuyinws/vitepress-plugin-group-icons

参照教程安装：vpgi.vercel.app/

::: code-group

pnpm add -D vitepress-plugin-group-icons

yarn add -D vitepress-plugin-group-icons

npm install vitepress-plugin-group-icons

bun add -D vitepress-plugin-group-icons

:::

然后在 config.mts 中配置

// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons' // [!code focus]

export default defineConfig({

  markdown: {
    config(md) { // [!code focus:3]
      md.use(groupIconMdPlugin) //代码组图标
    },
  },

  vite: { // [!code focus:5]
    plugins: [
      groupIconVitePlugin() //代码组图标
    ],
  },

})

最后还需要再 index.ts 中引入样式

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'

import 'virtual:group-icons.css' //代码组样式 // [!code focus]

export default {
  extends: DefaultTheme,
}

使用时，请确保代码后有对应的文字触发，如 sh [pnpm] 表示这一段代码块是 pnpm 的代码块

::: code-group
```sh [pnpm]
pnpm -v
```

```sh [yarn]
yarn -v
```

```sh [bun]
bun -v
```
:::

::: code-group

pnpm -v

yarn -v

bun -v

:::

此插件已经涵盖了所有的常用图标，但是有一个问题：如果我们想给代码为 js 的块添加图标，必须写文件名，如：

::: code-group
```ts [a.ts]
console.log("I'm TypeScript");
```

```js [b.js]
console.log("I'm JavaScript");
```

```md [c.md]
Markdown 图标演示
```

```css [d.css]
h1 {
  background: red;
}
```
:::

这是因为在插件的内部逻辑中，ts、js等图标是根据文件类型去判断添加的。我理想的效果是只需要写文件类型就行了，就比如js [js]

那么该如何自定义呢，我们需要在config.mts 中配置:

// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import { groupIconMdPlugin, groupIconVitePlugin, localIconLoader } from 'vitepress-plugin-group-icons' // [!code focus]

export default defineConfig({

  markdown: {
    config(md) {
      md.use(groupIconMdPlugin) //代码组图标
    },
  },

  vite: {
    plugins: [
      groupIconVitePlugin({ // [!code focus:22]
       customIcon: {
          mts: "vscode-icons:file-type-typescript",
          cts: "vscode-icons:file-type-typescript",
          ts: "vscode-icons:file-type-typescript",
          tsx: "vscode-icons:file-type-typescript",
          mjs: "vscode-icons:file-type-js",
          cjs: "vscode-icons:file-type-js",
          json: "vscode-icons:file-type-json",
          js: "vscode-icons:file-type-js",
          jsx: "vscode-icons:file-type-js",
          md: "vscode-icons:file-type-markdown",
          py: "vscode-icons:file-type-python",
          ico: "vscode-icons:file-type-favicon",
          html: "vscode-icons:file-type-html",
          css: "vscode-icons:file-type-css",
          scss: "vscode-icons:file-type-scss",
          yml: "vscode-icons:file-type-light-yaml",
          yaml: "vscode-icons:file-type-light-yaml",
          php: "vscode-icons:file-type-php",
        },
      })
    ],
  },

})

最后总体看下使用插件增加代码组图标，更改前后的效果

更改前

更改后

切换路由进度条

当切换页面，顶部会显示进度条，使用的是 @Skyleen77/nprogress-v2，使用方法还是挺简单的

先安装 nprogress-v2

::: code-group

pnpm add -D nprogress-v2

yarn add -D nprogress-v2

npm install nprogress-v2

bun add -D nprogress-v2

:::

然后再 .vitepress/theme/index.ts 中配置，即可生效

// .vitepress/theme/index.ts

import { inBrowser } from "vitepress";
import { NProgress } from "nprogress-v2/dist/index.js"; // 进度条组件
import "nprogress-v2/dist/index.css"; // 进度条样式
export default {
  extends: DefaultTheme,
  enhanceApp({ app, router }) {
    // [!code focus:4]

    // 切换路由进度条
    if (inBrowser) {
      NProgress.configure({ showSpinner: false });

      router.onBeforeRouteChange = () => {
        NProgress.start(); // 开始进度条
      };
      router.onAfterRouteChange = () => {
        NProgress.done(); // 停止进度条
      };
    }
  },
};

更改后效果

VitePress 系列（2）：插件