主题继承
大约 2 分钟
vuepress-theme-hope
和默认主题一样,同样支持继承。
你可以根据自己的需求在 vuepress-theme-hope
的基础上二次创作自己的主题并本地使用或发布它。
继承主题
你需要为自己的主题创建一个入口文件,并从 vuepress-theme-hope
中导入 hopeTheme
。
在你的入口文件中,设置 extends: hopeTheme(options)
声明继承 vuepress-theme-hope
主题。
你自己新创建的主题的同名别名 (alias
) 和 同名布局 (layouts
) 的优先级高于被继承主题 vuepress-theme-hope
,这意味着你可以通过主题 API 的 alias
选项覆盖 vuepress-theme-hope
主题的组件,也可以通过客户端配置文件的同名布局覆盖 vuepress-theme-hope
主题的布局。
主题提供了如下布局
- Layout
- NotFound
- Slide (仅在幻灯片启用时可用)
- BlogCategory (仅在博客启用时可用)
- BlogHome (仅在博客启用时可用)
- BlogType (仅在博客启用时可用)
- Timeline (仅在博客启用时可用)
// .vuepress/theme/index.ts
import { getDirname, path } from "@vuepress/utils";
import { hopeTheme } from "vuepress-theme-hope";
import type { ThemeOptions } 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",
),
},
});
// .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",
),
},
});
你也可以通过主题客户端文件的 layouts
覆盖或新增 vuepress-theme-hope
提供的布局。
// .vuepress/client.ts
import { defineClientConfig } from "@vuepress/client";
import Changelog from "./layouts/Changelog.vue";
import Layout from "./layouts/Layout.vue";
export default defineClientConfig({
// 你可以在这里覆盖或新增布局
layouts: {
// 比如这里我们将 vuepress-theme-hope 的默认布局改为自己主题下的 layouts/Layout.vue
Layout,
// 同时我们新增了一个 Changelog 布局
Changelog,
},
});
// .vuepress/client.js
import { defineClientConfig } from "@vuepress/client";
import Changelog from "./layouts/Changelog.vue";
import Layout from "./layouts/Layout.vue";
export default defineClientConfig({
// 你可以在这里覆盖或新增布局
layouts: {
// 比如这里我们将 vuepress-theme-hope 的默认布局改为自己主题下的 layouts/Layout.vue
Layout,
// 同时我们新增了一个 Changelog 布局
Changelog,
},
});