VitePress 封装居右居中组件

组件封装

1. 封装居中容器

• docs/.vitepress/theme/components/CenterBox/index.vue

<template>
  <ElConfigProvider namespace="rightbox">
    <div id="rightbox-demo">
      <div class="content">{{ data }}</div>
    </div>
  </ElConfigProvider>
</template>

<script setup lang="ts">
import { ElConfigProvider, ElAlert } from "element-plus";
import "../CSS/element.css";

const props = defineProps<{ data: string }>();
</script>

<style lang="scss">
#rightbox-demo {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  .content {
    flex: 1;
    padding: 20px;
    text-align: center;
  }
}
</style>

2. 封装居右边组件

• docs/.vitepress/theme/components/RightBox/index.vue

<template>
  <ElConfigProvider namespace="rightbox">
    <div id="rightbox-demo">
      <div class="content">{{ data }}</div>
    </div>
  </ElConfigProvider>
</template>

<script setup lang="ts">
import { ElConfigProvider, ElAlert } from "element-plus";
import "../CSS/element.css";

const props = defineProps<{ data: string }>();
</script>

<style lang="scss">
#rightbox-demo {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;

  .content {
    flex: 1;
    padding: 20px;
    text-align: right;
  }
}
</style>

插件封装

1. 封装居中插件

• docs/.vitepress/theme/plugins/Center/CenterVueDemoPlugin.ts

import markdownItContainer from "markdown-it-container";

interface Options {
  root?: string;
}

export default (md: any, options?: Options) => {
  md.use(markdownItContainer, "center", {
    validate: (params: string) => {
      return params.trim().match(/^center\s*(.*)$/);
    },
    render(tokens: any[], idx: number) {
      const record = tokens[idx];
      if (record.nesting === 1) {
        // 获取到所有的传递过来的数据
        const data = tokens[idx + 2].content;
        return `<CenterContainer data="${data}">`; // 开始标签
      } else {
        // 处理结束标签
        return "</CenterContainer>\n"; // 结束标签
      }
    },
  });
};

2. 封装居右插件

• docs/.vitepress/theme/plugins/Right/RightVueDemoPlugin.ts

import markdownItContainer from "markdown-it-container";

interface Options {
  root?: string;
}

export default (md: any, options?: Options) => {
  md.use(markdownItContainer, "right", {
    validate: (params: string) => {
      return params.trim().match(/^right\s*(.*)$/);
    },
    render(tokens: any[], idx: number) {
      const record = tokens[idx];
      if (record.nesting === 1) {
        // 获取到所有的传递过来的数据
        const data = tokens[idx + 2].content;
        return `<RightContainer data="${data}">`; // 开始标签
      } else {
        // 处理结束标签
        return "</RightContainer>\n"; // 结束标签
      }
    },
  });
};

3. 调用

• (1) docs/.vitepress/theme/index.ts

/// <reference types="vite/client" />
import type { Theme } from "vitepress";
import DefaultTheme from "vitepress/theme";
import type { Component } from "vue";
// 增加居右侧组件
import RightVueDemo from "./components/RightBox/index.vue";
// 增加中间代码组件
import CenterVueDemo from "./components/CenterBox/index.vue";

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component("RightContainer", RightVueDemo);
    app.component("CenterContainer", CenterVueDemo);
  },
} satisfies Theme;

• (2) docs/.vitepress/config.mts

import { defineConfig } from "vitepress";
// 增加居右组件
import RightVueDemoPlugin from "./theme/plugins/Right/RightVueDemoPlugin";
// 增加居中组件
import CenterVueDemoPlugin from "./theme/plugins/Center/CenterVueDemoPlugin";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "My Awesome Project",
  description: "A VitePress Site",
  markdown: {
    config: (md) => {
      md.use(RightVueDemoPlugin, { root: "docs" }); // 增加居右边栏组件
      md.use(CenterVueDemoPlugin, { root: "docs" }); // 增加居中组件
    },
  },
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: "Home", link: "/" },
      { text: "Examples", link: "/markdown-examples" },
    ],

    sidebar: [
      {
        text: "Examples",
        items: [
          { text: "Markdown Examples", link: "/markdown-examples" },
          { text: "Runtime API Examples", link: "/api-examples" },
        ],
      },
    ],

    socialLinks: [
      { icon: "github", link: "https://github.com/vuejs/vitepress" },
    ],
  },
});

使用

## 结果

::: tip 提示
居中组件封装
::: center

居中

:::

# 结果完成

::: right

居右边

:::