博客搭建

vuepress

全局ui组件

引用的组件都会在div#app > div.global-ui里面加载

// config.js
globalUIComponents: ['Component-1'],

// docs\.vuepress\components 下新建相关组件文件即可

vitepress

布局组件

使用自定义的MyLayout.vue

docs\.vitepress\theme\index.js

import DefaultTheme from "vitepress/theme";
import MyLayout from "./MyLayout.vue";
import "./styles/vars.scss";
import "./styles/style.scss";

export default {
  ...DefaultTheme,
  Layout: MyLayout,
  //enhanceApp({ app }) {
  //  app.use(ZIcon);
  // },
};

其实MyLayout.vue还是使用的DefaultTheme

<template>
  <Layout>
    // do something
  </Layout>
</template>

<script lang="ts" setup>
import DefaultTheme from "vitepress/theme";
import { useData } from "vitepress";
const { page, theme, frontmatter } = useData();
const { Layout } = DefaultTheme;
</script>