2.配置文件讲解

vuepress 的配置文件分为两类:

主配置文件：

src/.vuepress/config.ts

文件内容

src/.vuepress/config.ts

import { defineUserConfig } from 'vuepress';
import theme from './theme';
import { getDirname, path } from 'vuepress/utils';
const __dirname = getDirname(import.meta.url);
const SrcPath = path.resolve(__dirname, '../');

// const urls: any = [];

export default defineUserConfig({
  // onGenerated: (app) => {
  //   for (let i = 0; i < app.pages.length; i++) {
  //     const el = app.pages[i];
  //     urls.push(el.path);
  //   }

  //   console.log(JSON.stringify(urls));
  // },

  base: '/',
  dest: 'dist',
  host: '0.0.0.0',
  port: 9451,
  temp: '.cache/.vp-temp',
  cache: '.cache/.vp-cache',

  alias: {
    '@components': path.resolve(__dirname, 'components'),
    '@src': SrcPath,
  },
  locales: {
    '/': {
      lang: 'zh-CN',
      title: '墨七',
      description: '墨七 - 与其感慨路难行，不如马上出发。',
    },
    // '/en/': {
    //   lang: 'en',
    //   title: 'Mo7',
    //   description: 'Mo7 - Simple and happy, as it should be.',
    // },
  },

  theme,
  shouldPrefetch: false,
});

主题配置文件则是通过如下方式植入进来的。
一旦你使用了 vuepress-hope , 那么大部分的配置项都将在 src/.vuepress/theme.ts 中完成。
如果一个插件或者功能你在 config.ts 和 theme.ts 都做了配置，那么就会导致冲突而不生效。

import { defineUserConfig } from 'vuepress';
import theme from './theme.js';
export default defineUserConfig({
  // ...
  theme,
  // ...
});

这其中的配置项的作用基本都可以在 https://theme-hope.vuejs.press/zh/config/intro.html 中搜得到。

---

客户端配置文件:

src/.vuepress/client.ts

文件内容

src/.vuepress/client.ts

import { defineClientConfig } from 'vuepress/client';
import { onMounted } from 'vue';
import { defineAsyncComponent } from 'vue';

import('./components/PrintVersion').then((res) => {
  res.default();
});

const MyIcon = defineAsyncComponent(() => import('./components/MyIcon.vue'));
const TopNavBeautify = defineAsyncComponent(() => import('./components/TopNavBeautify.vue'));
const NavMusic = defineAsyncComponent(() => import('./components/NavMusic.vue'));
const CommentHideBtn = defineAsyncComponent(() => import('./components/CommentHideBtn.vue'));
const BlogBg = defineAsyncComponent(() => import('./components/BlogBg.vue'));
const PreviewImage = defineAsyncComponent(() => import('./components/PreviewImage.vue'));

const HeroContent = defineAsyncComponent(() => import('./components/HeroContent.vue'));
const HeroBG = defineAsyncComponent(() => import('./components/HeroBG.vue'));
const Hitokoto = defineAsyncComponent(() => import('./components/Hitokoto.vue'));

export default defineClientConfig({
  enhance({ app, router, siteData }) {
    app.component('MyIcon', MyIcon);
  },
  setup() {
    onMounted(() => {});
  },
  rootComponents: [
    TopNavBeautify,
    NavMusic,
    CommentHideBtn,
    BlogBg,
    PreviewImage,
    HeroBG,
    HeroContent,
    Hitokoto,
    // ...
  ],
});

配置文件详解在这里 https://theme-hope.vuejs.press/zh/guide/advanced/client.html ，

我利用了 全局组件 的机制，来对主题进行了一系列的 魔改
所有的组件全部放在 src/.vuepress/components 下。

https://github.com/mo7cc/blog-source/tree/main/src/.vuepress/components

想要美化哪个部分 就启用哪个组件即可。