• 在vuepress中应用组件
  • 全局组件
    • 全局注册 Vue 组件
      • 通过 @vuepress/plugin-register-components 注册组件
      • 通过客户端配置文件注册
    • 使用
      • Markdown中
      • 组件中：
      • 在布局中:
  • Component
  • 内置组件
    • BiliBili
    • Share

这里分俩部分讨论：

1. 组件的注册和使用。
2. 个别组件的使用。

在vuepress中应用组件

全局组件

全局注册 Vue 组件

你可以全局注册组件，以便你在 Markdown 文件和布局中直接使用它们。

全局组件需要在 VuePress 初始化时加载（即访问第一个页面时）。
因此，如果一个全局组件很大，它会影响站点的初始加载时间。

通过 @vuepress/plugin-register-components 注册组件

略

通过客户端配置文件注册

通过创建 .vuepress/client.js 或 .vuepress/client.ts 手动注册组件。

import { defineClientConfig } from "vuepress/client";
import MyComponent from "./MyComponent.vue";

export default defineClientConfig({
  enhance: ({ app, router, siteData }) => {
    app.component("MyComponent", MyComponent);
  },
});

使用

全局组件可以直接在任何组件、布局或页面中使用。
假设你已经全局注册了 MyComponent，那么你可以这样使用它:

Markdown中

<MyComponent />

使用：

年

月

日

分

秒

组件中：

<template>
  <p>组件案例</p>
  <MyComponent />
</template>

在布局中:

<template>
  <p>布局案例</p>
  <MyComponent />
</template>

Component

在 Markdown 中通过 component 代码块快速添加组件。

• 全局组件 是 Vue 原生机制，作用域更广，适合复杂业务逻辑。
• Component标签 是 VuePress 插件提供的便捷方案，适合在 Markdown 中快速复用简单组件。

启用 Component 首先需要在配置文件中进行配置：

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default hopeTheme({
  markdown: {
    component: true,//启用component功能
    
  },
  plugins: {
    components: {
      components: ["Badge", "VPCard","VPBanner"],//设置需要启用的component
    },
  },
});

下面是一个使用 VPBanner 的示例：

<VPBanner
  title="Mr.Hope"
  content="Where there is light, there is hope"
  logo="https://mister-hope.com/logo.svg"
  :actions='[
    {
      text: "访问",
      link:"https://mister-hope.com",
    },
    {
      text: "仓库",
      link: "https://github/Mister-Hope/Mister-Hope.github.io",
      type: "default",
    },
  ]'
/>

显示效果：

Mr.Hope

Where there is light, there is hope

访问仓库

内置组件

通过 vuepress-plugin-components，你可以在 Markdown 文件中导入并使用一些组件。

可用组件:

• ArtPlayer: 由 ArtPlayer 驱动的视频播放器。
• Badge: 多彩的徽章组件
• BiliBili: 嵌入 BiliBili 视频
• CodePen: 嵌入 CodePen 演示
• PDF: 嵌入 PDF 查看器
• Share: 通过社交媒体分享当前页面
• StackBlitz: 嵌入 StackBlitz 演示
• SiteInfo: 显示站点
• VPBanner: 一个横幅组件
• VPCard: 一个卡片组件
• VidStack: 由 VidStack 驱动的音频/视频播放器
• XiGua: 嵌入 XiGua 视频

启用组件，你需要将 plugins.components.components 设置为一个组件名的数组。
参见前面的配置部分

BiliBili

在 Markdown 文件中嵌入 B 站视频：
代码：

<BiliBili bvid="BV1kt411o7C3" />

显示内容：

A BiliBili video

Share

分享组件，将页面内容分享到社交媒体。

参考配置：

    components: {
      components: ["Badge", "VPCard","VPBanner","BiliBili","Share"],
      componentOptions: {
        share:{
          services:[
              ,"buffer"
              ,"douban"
              ,"email"
              ,"evernote"
              ,"facebook"
          ],
        }
      },
    },

示例

代码：

<Share colorful />

显示内容：

目前不支持 B站。详情参见：