Theme Extension

Extend vuepress-theme-hope to create custom themes.

Extension Setup

Create a theme entry file importing hopeTheme:

import { hopeTheme } from "vuepress-theme-hope";

export default (options: ThemeOptions) => ({
  name: "your-custom-theme",
  extends: hopeTheme(options),
  // customizations
});

Your theme's alias (in theme options) and layouts (in client config file) override the parent theme's configurations.

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

You can also override or add layouts provided by vuepress-theme-hope via layouts in your theme client config file.

.vuepress/layouts/Home.vue

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

<template>
  <Layout>
    <!-- Overriding default hero logo to advanced ones, like home page of theme docs -->
    <template #heroLogo>
      <div>A 3D logo</div>
    </template>
    <!-- Introduce comment component using pageBottom slot -->
    <template #pageBottom>
      <CommentService />
    </template>
  </Layout>
</template>

.vuepress/layouts/Layout.vue

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

<template>
  <Layout>
    <!-- Adding ADs before Markdown content with contentBefore slot -->
    <template #contentBefore>
      <div>AD contents</div>
    </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/Changelog.vue";

export default defineClientConfig({
  // You can override or add layouts here
  layouts: {
    // a home page layout with customized hero logo
    Home,
    // For example, here we change the default layout of vuepress-theme-hope to layouts/Layout.vue with ADs
    Layout,
    // Also we added a Changelog layout
    Changelog,
  },
});

For details see Customize Layout with Slots.