Theme Extending

About 2 minAdvancedAdvancedCustomize

vuepress-theme-hope supports extending just like @vuepress/theme-default.

You can create your own theme based on vuepress-theme-hope and use it locally or publish it according to your needs.

Theme extending

You need to create an entry file for your theme and import hopeTheme from vuepress-theme-hope.

In your entry file, set extends: hopeTheme(options) to extend the vuepress-theme-hope theme.

The aliases of the same name (alias) and layouts (layouts) of your own newly created theme has higher priority over the extended theme vuepress-theme-hope, which means that you can override vuepress-theme-hope components via alias option in theme api, and you can add or override layouts via layouts in client config file.

The theme provide the following layouts:

  • Layout
  • NotFound
  • Slide (Only available when presentation is enabled)
  • BlogCategory (Only available when blog is enabled)
  • BlogHome (Only available when blog is enabled)
  • BlogType (Only available when blog is enabled)
  • Timeline (Only available when blog is enabled)
// .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),

  alias: {
    // You can override or add aliases here
    // For example, here we change the vuepress-theme-hope HomePage component to components/HomePage.vue under our own theme
    "@theme-hope/components/HomePage": path.resolve(
      __dirname,
      "./components/HomePage.vue"
    ),
  },
});

Also, you can add or override layout provided by vuepress-theme-hope via layouts in your theme client config file.

// .vuepress/theme/config.ts
import { defineClientConfig } from "@vuepress/client";
import Changelog from "./layouts/Changelog.vue";
import Layout from "./layouts/Layout.vue";

export default defineClientConfig({
  // You can override or add layouts here
  layouts: {
    // For example, here we change the default layout of vuepress-theme-hope to layouts/Layout.vue under our own theme
    Layout,
    // Also we added a Changelog layout
    Changelog,
  },
});