主题继承

vuepress-theme-hope 和默认主题一样，同样支持继承。

你可以根据自己的需求在 vuepress-theme-hope 的基础上二次创作自己的主题并本地使用或发布它。

如何继承 Hope 主题

你需要为自己的主题创建一个入口文件，并从 vuepress-theme-hope 中导入 hopeTheme。

在你的入口文件中，设置 extends: hopeTheme(options) 声明继承 vuepress-theme-hope 主题。

你自己新创建的主题的同名别名 (alias) 和 同名布局 (layouts) 的优先级高于被继承主题 vuepress-theme-hope，这意味着你可以通过主题 API 的 alias 选项覆盖 vuepress-theme-hope 主题的组件，也可以通过 客户端配置文件 的同名布局覆盖 vuepress-theme-hope 主题的布局。

TS

.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
: ThemeOptions) => ({
  
name
: "vuepress-theme-local",

  
extends
: 
hopeTheme
(
options
, { 
custom
: true }),

  
alias
: {
    // 你可以在这里覆盖或新增别名
    // 比如这里我们将 vuepress-theme-hope 主页组件改为自己主题下的 components/HomePage.vue
    "@theme-hope/components/home/HomePage": 
path
.
resolve
(
      
__dirname
,
      "./components/HomePage.vue",
    ),
  },
});

JS

.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/home/HomePage": path.resolve(
      __dirname,
      "./components/HomePage.vue",
    ),
  },
});

你也可以通过主题客户端文件的 layouts 覆盖或新增 vuepress-theme-hope 提供的布局。

.vuepress/layouts/Home.vue

<script setup lang="ts">
import { Layout } from "vuepress-theme-hope/client";
</script>

<template>
  <Layout>
    <!-- 覆盖默认 Hero 标志为更高级的，像主题主页一样 -->
    <template #heroLogo>
      <div>一个 3D 标志</div>
    </template>
  </Layout>
</template>

.vuepress/layouts/Layout.vue

<script setup lang="ts">
import { Layout } from "vuepress-theme-hope/client";
</script>

<template>
  <Layout>
    <!-- 通过 contentBefore 插槽在 Markdown 内容前添加广告 -->
    <template #contentBefore>
      <div>广告内容</div>
    </template>
    <!-- 使用 pageBottom 插槽引入评论组件 -->
    <template #pageBottom>
      <CommentService />
    </template>
  </Layout>
</template>

.vuepress/client.ts

import { defineClientConfig } from "vuepress/client";
import Changelog from "./layouts/Changelog.vue";
import Home from "./layouts/Home.vue";
import Layout from "./layouts/Layout.vue";

export default defineClientConfig({
  // 你可以在这里添加或覆盖布局
  layouts: {
    // 一个主页布局，带有自定义的 Hero 标志
    Home,
    // 例如，在这里我们将 vuepress-theme-hope 的默认布局更改为 layouts/Layout.vue
    Layout,
    // 我们还添加了一个 Changelog 布局
    Changelog,
  },
});

详情见 使用插槽自定义布局。