主题及页面布局优化
大约 2 分钟使用指南配置页面配置使用指南
Theme-hope这个组件非常强大, 很多的功能都能满足大部分的需求了, 对于很特殊的需求, 也可以通过继承主题的方式来实现.
首页调整
官方给出的例子， 在Theme文件里替换 HomePage 组件
// .vuepress/theme/index.js
import { getDirname, path } from "@vuepress/utils";
import { hopeTheme } from "vuepress-theme-hope";
const __dirname = getDirname(import.meta.url);
export default (options) => ({
name: "vuepress-theme-local",
extends: hopeTheme(options, { custom: true }),
alias: {
// 你可以在这里覆盖或新增别名
// 比如这里我们将 vuepress-theme-hope 主页组件改为自己主题下的 components/HomePage.vue
"@theme-hope/components/HomePage": path.resolve(
__dirname,
"./components/HomePage.vue"
),
},
});
自定义的HomePage.vue的具体内容。
<template>
<HopeHomePage>
<!-- 使用 bottom 插槽引入评论组件 -->
<template #top>
<!-- <CommentService /> -->
插槽的内容
</template>
</HopeHomePage>
</template>
<script>
import HopeHomePage from "@theme-hope/components/HomePage";
</script>
常规页面调整
在Theme文件里替换NormalPage 组件
// .vuepress/theme/index.js
import { getDirname, path } from "@vuepress/utils";
import { hopeTheme } from "vuepress-theme-hope";
const __dirname = getDirname(import.meta.url);
export default (options) => ({
name: "vuepress-theme-local",
extends: hopeTheme(options, { custom: true }),
alias: {
"@theme-hope/components/NormalPage": path.resolve(
__dirname,
"./components/NormalPage.vue"
),
},
});
我们在每个常规页面页面的TOC下面都加上一个广告位,。
<template>
<NormalPage>
<template #tocAfter>
<div>
这个是广告位
</div>
</template>
</NormalPage>
</template>
<script>
import NormalPage from "@theme-hope/components/NormalPage";
</script>
看一下效果
关于Vuepress Google Adsense广告接入, 请查看接入Google Adsense。
常用组件
主题组件别名
@theme-hope/components/HomePage主页@theme-hope/components/NormalPage常规页面
博客组件别名
@theme-hope/modules/blog/components/BlogHome博客主页
所有的插槽 请详见 所有组件别名。
常用插槽
HomePage(首页):top,center,bottomNormalPage(常规页面):top,contentBefore,contentAfter,bottom,tocBefore,tocAfter
所有的插槽 请详见 所有组件的插槽。