2.配置文件讲解
2024年11月27日小于 1 分钟约 248 字...
2.配置文件讲解
vuepress 的配置文件分为两类:
主配置文件:
src/.vuepress/config.ts
文件内容
import { defineUserConfig } from 'vuepress';
import theme from './theme.js';
import { getDirname, path } from 'vuepress/utils';
const __dirname = getDirname(import.meta.url);
const SrcPath = path.resolve(__dirname, '../');
export default defineUserConfig({
alias: {
'@components': path.resolve(__dirname, 'components'),
'@src': SrcPath,
},
dest: 'dist',
host: '0.0.0.0',
port: 9451,
base: '/',
temp: '.cache/.vp-temp',
cache: '.cache/.vp-cache',
locales: {
'/': {
lang: 'zh-CN',
title: '墨七',
description: '墨七 - 简单快乐,理应如此。',
},
'/en/': {
lang: 'en-US',
title: 'Mo7',
description: 'Mo7 - Simple and happy, as it should be.',
},
},
theme,
// Enable it with pwa
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
文件内容
import { defineClientConfig } from 'vuepress/client';
import { onMounted } from 'vue';
import { defineAsyncComponent } from 'vue';
import 'vuepress-theme-hope/presets/bounce-icon.scss'; // 为页面图标添加鼠标悬停的跳动效果。
const TopNavBeautify = defineAsyncComponent(() => import('./components/TopNavBeautify.vue'));
const HeroBG = defineAsyncComponent(() => import('./components/HeroBG.vue'));
const Hitokoto = defineAsyncComponent(() => import('./components/Hitokoto.vue'));
const NavMusic = defineAsyncComponent(() => import('./components/NavMusic.vue'));
const PrintVersion = defineAsyncComponent(() => import('./components/PrintVersion.vue'));
const CommentHideBtn = defineAsyncComponent(() => import('./components/CommentHideBtn.vue'));
const MyIcon = defineAsyncComponent(() => import('./components/MyIcon.vue'));
const BlogBg = defineAsyncComponent(() => import('./components/BlogBg.vue'));
const BlogBeautify = defineAsyncComponent(() => import('./components/BlogBeautify.vue'));
const PreviewImage = defineAsyncComponent(() => import('./components/PreviewImage.vue'));
const HeroContent = defineAsyncComponent(() => import('./components/HeroContent.vue'));
export default defineClientConfig({
enhance({ app, router, siteData }) {
app.component('MyIcon', MyIcon);
},
setup() {
onMounted(() => {});
},
rootComponents: [
HeroContent,
TopNavBeautify,
HeroBG,
Hitokoto,
NavMusic,
PrintVersion,
CommentHideBtn,
BlogBeautify,
BlogBg,
PreviewImage,
// ...
],
});
配置文件详解在这里 https://theme-hope.vuejs.press/zh/guide/advanced/client.html ,
我利用了 全局组件 的机制,来对主题进行了一系列的 魔改
所有的组件全部放在 src/.vuepress/components
下。
https://github.com/mo7cc/blog-source/tree/main/src/.vuepress/components
想要美化哪个部分 就启用哪个组件即可。
你认为这篇文章怎么样?
- 0
- 0
- 0
- 0
- 0
- 0