第三方插件

更新: 6/29/2025, 10:22:01 PM 字数: 0 字时长: 0 分钟

Giscus评论

GitHub安装Giscus组件

　首先，访问这里对你的GitHub进行giscus的安装。点击右侧的install按钮进行安装即可，具体的流程页面如下：

　安装完成后，进入对应的仓库，点击settings，找到Features，勾选Discussions 以开启Discussions功能。

　然后，进入Giscus配置页面，填写仓库 并在 Discussion分类选择General 后，在启用 giscus就会生成一段JS代码。

安装Giscus插件

　在终端执行如下命令安装giscus插件。

shell

npm install @giscus/vue

　在.vitepress/theme/Layout.vue中引入<GisCus/>并配上上面的配置即可。另外，此处还加了评论框暗黑和明亮主题切换的功能。

.vitepress/theme/Layout.vue

vue

<script setup lang="ts">
import {watch} from 'vue'
import GisCus from '@giscus/vue'
import DefaultTheme from 'vitepress/theme'
import {useRoute,useData,inBrowser} from 'vitepress'

const {page,isDark} = useData()
const {Layout} = DefaultTheme

// 评论框暗黑和明亮主题切换
watch(isDark, (dark) => {
    if (!inBrowser) return;
    const giscusWidget = document.querySelector('giscus-widget');
    if (!giscusWidget) return;
    const iframe = giscusWidget.shadowRoot?.querySelector('iframe');
    if (!iframe) return;
    iframe.contentWindow?.postMessage(
        {
            giscus: {
                setConfig: {
                    theme: dark ? 'dark' : 'light',
                },
            },
        },
        'https://giscus.app'
    );
});

</script>


<template>
  <Layout>
    <!-- #doc-after 这里使用了插槽，具体可见https://vitepress.dev/zh/guide/extending-default-theme#layout-slots -->
    <template #doc-after>
      <!--index页面不展示评论框 只有具体的文章才展示评论框 -->
      <div v-if="!page.filePath.includes('index.md')" style="margin-top: 24px">
        <GisCus
            :key="page.filePath"
            repo="请按需填写"
            repo-id="请按需填写"
            category-id="请按需填写"
            category="General"
            mapping="pathname"
            strict="0"
            reactions-enabled="1"
            emit-metadata="0"
            input-position="bottom"
            theme="preferred_color_scheme"
            lang="zh-CN"
            crossorigin="anonymous"
            Loading = 'lazy'/>
      </div>
    </template>
  </Layout>
</template>

　重启博客后，即可在页面底部看到加载的评论区，使用GitHub登录即可评论，评论数据会被放入下面这个地方。

图片居中与放大

安装medium插件

　首先需要安装一下插件，medium-zoom插件可以实现图片的放大。

shell

npm install medium-zoom

　然后，在.vitepress/theme/index.js中使用mediumZoom插件即可。

.vitepress/theme/index.js

import DefaultTheme from 'vitepress/theme'
import './style/index.css'
import { onMounted, watch, nextTick } from "vue";
import { useRoute } from "vitepress";
import mediumZoom from "medium-zoom";

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

　配置完成后，刷新页面，点击任意一个图片，即可看到效果。

MarkDown样式

　添加Markdown图片居中和放大的CSS样式。

.vitepress/stycle/index.css

vue

<style>
    /* markdown图片居中 */
    .main img{
        display: block;
        margin: 0 auto;
    }
    
    /* markdown图片放大 */
    .medium-zoom-overlay {
        z-index: 30;
      }
    .medium-zoom-image {
      z-index: 9999 !important;
    }
</style>

　配置完成后，刷新页面，点击任意一个图片，即可看到效果。

视频播放

　Xgplayer更多配置，参加这里。

添加Xgplayer组件

（1）安装

shell

npm add -D xgplayer

（2）添加Xgplayer组件

组件详细代码

./vitepress/theme/components/Xgplayer.vue.vitepress/theme/index.js

vue

<template>
    <div id="mse"></div>
  </template>
  
  <script setup lang="ts">
  import Player from "xgplayer";
  import "xgplayer/dist/index.min.css";
  import { onMounted } from 'vue'
  
  interface propsType {
    url: string
    poster: string
  }
  
  const props = withDefaults(defineProps<propsType>(), {
    url: '',
    poster: '',
  })
  
  onMounted(() => {
    new Player({
      id: 'mse', //占位id
      volume: 0, // 默认静音
      lang: "zh", //设置中文
  
      autoplay: false, //关闭自动播放
      // autoplayMuted: true,// 是否开启自动静音
      fluid: true,  // 流式布局，自动宽高比
      controls: true, //开启控制栏，设为false即隐藏
      leavePlayerTime: 0, //鼠标离开控制栏隐藏延时时间，默认3000ms
      download: true, //开启下载
      keyShortcut: true, //开启热键
  
      url: props.url, //传入的url
      poster: props.poster, //传入的视频封面
  
      start: {
        isShowPause: true //暂停显示播放按钮
      }
  
    })
  
  })
  
  </script>
  
  <style scoped>
  #mse {
    flex: auto;
  }
  </style>

import Xgplayer from "./components/Xgplayer.vue"

export default {
  extends: DefaultTheme,
  Layout: Layout,
  enhanceApp: ({router,app}) =>{
    // 注册全局插件
    app.component("Xgplayer", Xgplayer);
  }
}

本地测试

输入：

<Xgplayer url="http://vjs.zencdn.net/v/oceans.mp4" poster="/封面路径.png" />

输出：

Sandpack

　Sandpack是一个实时编码插件，用法参加这里。

安装sandpack

（1）安装命令

shell

npm i vitepress-plugin-sandpack -D

WARNING

必须在package.json中增加"type":"module"

（2）注册为全局组件

.vitepress/theme/index.js.vitepress/config.ts

import Layout from './Layout.vue'
import { Sandbox } from 'vitepress-plugin-sandpack';
import 'vitepress-plugin-sandpack/dist/style.css';

export default {
  Layout,
  enhanceApp: ({router,app}) =>{
    // 将实时编码插件Sandbox注册为全局组件
    app.component('Sandbox', Sandbox); 
  },
}

import { defineConfig } from 'vitepress'
import container from 'markdown-it-container'; 
import { renderSandbox } from 'vitepress-plugin-sandpack'; 

export default defineConfig({
  markdown: {
    config(md) { 
      md.use(container, 'sandbox', { // [!code ++]
          render (tokens, idx) { 
            return renderSandbox(tokens, idx, 'sandbox'); 
          }, 
        }); 
    },
  },
})

本地测试

输入：

vue

::: sandbox
```vue /src/App.vue [active]
<template>
  <div>{{ hello }}</div>
</template>

<script setup>
import { ref } from 'vue';

const hello = ref('Hello World!');
</script>
```

```js /src/main.js
import App from './App.vue';
import { createApp } from 'vue';

createApp(App).mount('#app');
```
:::

输出：

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

时间线

安装

　安装vitepress-markdown-timeline插件。

npm add -D vitepress-markdown-timeline

　引入插件中的样式并将插件配置到markdown配置项中。

.vitepress/config.mts.vitepress/theme/index.js

import timeline from "vitepress-markdown-timeline"; 

export default {
  markdown: { 
    //时间线
    config: (md) => {
      md.use(timeline);
    },
  }, 
}

// 只需添加以下一行代码，引入时间线样式
import "vitepress-markdown-timeline/dist/theme/index.css";

本地测试

输入：

::: timeline 2023-04-24
- 一个非常棒的开源项目 H5-Dooring 目前 star 3.1k
  - 开源地址 https://github.com/MrXujiang/h5-Dooring
  - 基本介绍 http://h5.dooring.cn/doc/zh/guide/
- 《深入浅出webpack》 http://webpack.wuhaolin.cn/
:::

::: timeline 2023-04-23
:::

输出：

2023-04-24

一个非常棒的开源项目 H5-Dooring 目前 star 3.1k
- 开源地址 https://github.com/MrXujiang/h5-Dooring
- 基本介绍 http://h5.dooring.cn/doc/zh/guide/
《深入浅出webpack》 http://webpack.wuhaolin.cn/

2023-04-23

切换路由进度条

　安装一下插件：

pnpm add -D nprogress-v2

　配置如下代码生效：

.vitepress/theme/index.js

import DefaultTheme from 'vitepress/theme'
import Layout from './components/Layout.vue'
import { inBrowser } from "vitepress";

// 进度条
import { NProgress } from 'nprogress-v2/dist/index.js'
import 'nprogress-v2/dist/index.css'

export default {
  extends: DefaultTheme,
  Layout: Layout,
  enhanceApp: ({router,app}) =>{
    // 切换路由进度条
    if (inBrowser) {
      NProgress.configure({ showSpinner: false })//// [!code ++]
      router.onBeforeRouteChange = (to) => {
        // 开始进度条
        NProgress.start()
      }
      // 停止进度条
      router.onAfterRouteChange = () => {
         NProgress.done() 
       }
    }
  },
}

五彩纸屑

　安装一下canvas-confetti插件：

shell

npm install canvas-confetti

　只需将如下代码添加到首页index.md文章末尾即可，若想更换其他效果，可以参加这里预览。

index.md

<!-- 添加到md文章末尾 -->
<script setup lang="ts">
    import confetti from "canvas-confetti";
    import { inBrowser } from "vitepress";
    if (inBrowser) {
      /* 纸屑 */
      confetti({
        particleCount: 100,
        spread: 170,
        origin: { y: 0.6 },
      });
    }
</script>

附录

（1）为VitPress提供支持的插件

① Giscus评论插件

文档：Giscus文档
功能：为博客增加评论功能
安装命令：npm install @giscus/vue

② 五彩纸屑插件

安装命令：npm install canvas-confetti
预览：实现效果

③ Sandpack实时编码插件

安装命令：npm i vitepress-plugin-sandpack -D
文档：sandpack文档

④ Vue 组件预览插件

名称：@vitepress-code-preview
文档：安装指南

⑤ 根据目录自定生成侧边栏插件

名称：vitepress-sidebar
文档：安装指南

⑥ 页面加载进度插件

名称：vitepress-plugin-nprogress
文档：安装指南

⑦ 文件图标插件

名称：vitepress-plugin-group-icons
文档：安装指南

⑧ 博客访问流量统计分析工具

名称：umami
文档：官网

⑨ 图片放大查看

名称：medium-zoom
文档：参见这里

⑩ 视频播放组件 Xgplayer

名称：Xgplayer
文档：接入指南

第三方插件 ​

Giscus评论 ​

GitHub安装Giscus组件 ​

安装Giscus插件 ​

图片居中与放大 ​

安装medium插件 ​

MarkDown样式 ​

视频播放 ​

添加Xgplayer组件 ​

本地测试 ​

Sandpack ​

安装sandpack ​

本地测试 ​

时间线 ​

安装 ​

本地测试 ​

切换路由进度条 ​

五彩纸屑 ​

附录 ​

第三方插件

Giscus评论

GitHub安装Giscus组件

安装Giscus插件

图片居中与放大

安装medium插件

MarkDown样式

视频播放

添加Xgplayer组件

本地测试

Sandpack

安装sandpack

本地测试

时间线

安装

本地测试

切换路由进度条

五彩纸屑

附录