Theme Presets

About 3 min

In order to meet the needs of different users, the theme provides some presets, you can get them under vuepress-theme-hope/presets and import them yourself.

Tips

To replace component using alias, you need to set { custom: true } as second argument to hopeTheme.

Bing Wallpapers

Replace the background of your blog's homepage with daily Bing wallpaper.

Components:

"vuepress-theme-hope/presets/BingHeroBackground.js": Daily Bing wallpaper component

Usage:

Override @theme-hope/components/blog/BlogHero and import the above component into the bg slot of the original BlogHero.

Code Example

.vuepress/config.ts
import { getDirname
, path
 } from "vuepress/utils";
import { defineUserConfig
 } from "vuepress";

const __dirname
 = getDirname
(import.meta.url
);

export default defineUserConfig
({
  //...

  alias
: {
    "@theme-hope/components/blog/BlogHero": path
.resolve
(
      __dirname
,
      "./components/BlogHero.vue",
    ),
  },
});

.vuepress/components/BlogHero.vue
<script setup lang="ts">
import BlogHero from "vuepress-theme-hope/blog/components/BlogHero.js";
import BingHeroBackground from "vuepress-theme-hope/presets/BingHeroBackground.js";
</script>

<template>
  <BlogHero>
    <template #bg>
      <BingHeroBackground />
    </template>
  </BlogHero>
</template>

Hitokoto Description

Replace the description of the blog's home page with a random Hitokoto sentence (Chinese only).

Components:

"vuepress-theme-hope/presets/HitokotoBlogHero.js": A sentence component

Usage:

Override @theme-hope/components/blog/BlogHero, import the above component into the info slot of the original BlogHero, and pass in the slot properties as they are.

Code Example

.vuepress/config.ts
import { getDirname
, path
 } from "vuepress/utils";
import { defineUserConfig
 } from "vuepress";

const __dirname
 = getDirname
(import.meta.url
);

export default defineUserConfig
({
  //...

  alias
: {
    "@theme-hope/components/blog/BlogHero": path
.resolve
(
      __dirname
,
      "./components/BlogHero.vue",
    ),
  },
});

.vuepress/components/BlogHero.vue
<script setup lang="ts">
import BlogHero from "vuepress-theme-hope/blog/components/BlogHero.js";
import HitokotoBlogHero from "vuepress-theme-hope/presets/HitokotoBlogHero.js";
</script>

<template>
  <BlogHero>
    <template #info="info">
      <HitokotoBlogHero v-bind="info" />
    </template>
  </BlogHero>
</template>

Make navbar transparent in certain pages while at page top.

export declare const setupTransparentNavbar: (options?: {
  /**
   * @default 'blog-homepage'
   */
  type?: "homepage" | "blog-homepage" | "all";

  /**
   * Transparent threshold
   *
   * @default 50
   */
  threshold?: number;

  /**
   * Text color in light mode
   */
  light?: string;

  /**
   * Text color in dark mode
   */
  dark?: string;
}) => void;

Code Example

.vuepress/client.ts
import { defineClientConfig
 } from "vuepress/client";
import { setupTransparentNavbar
 } from "vuepress-theme-hope/presets/transparentNavbar.js";

export default defineClientConfig
({
  setup
: () => {
    setupTransparentNavbar
({ type
: "homepage" });
  },
});

Running time

Get the running time of the site in footer.

export declare const setupRunningTimeFooter: (
  /**
   * The date to calculate the running time
   */
  date: string | Date,
  /**
   * The locales of running time
   *
   * @description :day, :hour, :minute, :second will be replaced by the corresponding value
   *
   * @default { "/": "Running time: :day days :hour hours :minute minutes :second seconds" }
   */
  locales?: Record<string, string>,
  /**
   * Whether to preserve the original content of the footer
   *
   * @default false
   */
  preserveContent?: boolean,
) => void;

Code Example

.vuepress/client.ts
import { defineClientConfig
 } from "vuepress/client";
import { setupRunningTimeFooter
 } from "vuepress-theme-hope/presets/footerRunningTime.js";

export default defineClientConfig
({
  setup
() {
    setupRunningTimeFooter
(
      new Date
("2022-01-01"),
      {
        "/": "Running time: :day days :hour hours :minute minutes :second seconds",
        "/zh/": "已运行 :day 天 :hour 小时 :minute 分钟 :second 秒",
      },
      true,
    );
  },
});

Snowfall

Add snowfall effect to the site.

export declare const setupSnowFall: (options: {
  /**
   * Image of snowflake
   */
  image?: string;

  /**
   * Count of snowflakes
   *
   * @default 25
   */
  count?: number;

  /**
   * Min size of snowflake in pixels
   *
   * @default 5
   */
  minSize?: number;

  /**
   * Max size of snowflake in pixels
   *
   * @default 10
   */
  maxSize?: number;

  /**
   * Speed of snowflake
   *
   * @default 1
   */
  speed?: number;
}) => void;

Code Example

.vuepress/client.ts
import { defineClientConfig
 } from "vuepress/client";
import { setupSnowFall
 } from "vuepress-theme-hope/presets/snowFall.js";

export default defineClientConfig
({
  setup
() {
    setupSnowFall
();
  },
});

Custom Blog Types

Recent Updated:

// vuepress-theme-hope/presets/getRecentUpdatedArticles.js
export interface RecentUpdateArticlesOptions {
  /**
   * Path of this blog type
   *
   * @default "/recent-updated/"
   */
  path?: string;

  /**
   * Locale text for the blog type
   *
   * @example {
   *  '/': 'Recent Updated',
   *  '/zh/': '最近更新',
   * }
   */
  locales?: Record<string, string>;
}

export declare const getRecentUpdatedArticles: (
  options: RecentUpdateArticlesOptions,
) => BlogTypeOptions;

Code Example

.vuepress/theme.ts
import { hopeTheme
 } from "vuepress-theme-hope";
import { getRecentUpdatedArticles
 } from "vuepress-theme-hope/presets/getRecentUpdatedArticles.js";

export default hopeTheme
({
  plugins
: {
    blog
: {
      type
: [
        getRecentUpdatedArticles
({
          locales
: {
            "/": "Recent Updated",
            "/zh/": "最近更新",
          },
        }),
      ],
    },
  },
});

Slides:

// vuepress-theme-hope/presets/getSlides.js
export interface SlidesOptions {
  /**
   * Path of this blog type
   *
   * @default "/slides/"
   */
  path?: string;

  /**
   * Locales for the blog type
   *
   * @example {
   *  '/': 'Slides',
   *  '/zh/': '幻灯片',
   * }
   */
  locales?: Record<string, string>;
}

export declare const getSlides = (options: SlidesOptions) => BlogTypeOptions;

Code Example

.vuepress/theme.ts
import { hopeTheme
 } from "vuepress-theme-hope";
import { getSlides
 } from "vuepress-theme-hope/presets/getSlides.js";

export default hopeTheme
({
  plugins
: {
    blog
: {
      type
: [
        getSlides
({
          locales
: {
            "/": "Slides",
            "/zh/": "幻灯片",
          },
        }),
      ],
    },
  },
});

You can create a client config file and import the following files through the import statement.

Docs

"vuepress-theme-hope/presets/shinning-feature-panel.scss": Add shinning effect to the features of the project home page.

Blog

"vuepress-theme-hope/presets/left-blog-info.scss": Move the blogger information to the left of the article list.
"vuepress-theme-hope/presets/round-blogger-avatar.scss": Clip blogger avatar to round shape
"vuepress-theme-hope/presets/squircle-blogger-avatar.scss": Clip blogger avatar to a squircle

Others

"vuepress-theme-hope/presets/bounce-icon.scss": Add a mouseover bounce effect to the page icon.
"vuepress-theme-hope/presets/hide-navbar-icon.scss": Hide navbar icon.
"vuepress-theme-hope/presets/hide-sidebar-icon.scss": Hide sidebar icon.
"vuepress-theme-hope/presets/hr-driving-car.scss": Add a driving car to all hr elements

If you have great customizations based on VuePress Theme Hope, you can pull them out into presets and send us a PR.

Changelog

5/7/25, 7:29 PM

View All Changelog

1e9f5-feat(theme): update file structure and rebuild alias (#4875)on 5/7/25
253d1-docs: update docson 4/14/25
f3e43-chore: bump depson 3/5/25
b1230-docs(theme): add twoslashon 2/18/25
a4c1a-feat(theme): add squircle-blogger-avatar preset (#4614)on 12/6/24
6ad69-feat: implement theme guidelines and use official plugins (#4453)on 9/20/24
0f326-feat(theme): add blog type presets, close #4166on 5/21/24
c8f9d-feat(theme): add snowfall preseton 5/14/24
cdb47-feat(theme): add transparentNavbar preseton 4/30/24
66fff-feat(theme): add hr-driving-car preseton 4/30/24
95ac5-feat(theme): update slot nameon 4/29/24
73f6e-feat(theme): remove navbarIcon and sidebarIcon and make them presetson 4/17/24
f3ee6-feat(theme): remove blogger.roundAvatar and make it a preseton 4/17/24
54c46-docs: update docson 1/26/24
05f91-feat: bump to vp2rc2on 1/26/24
8a130-docs: add linkson 1/2/24
fa8af-docs: tweakson 12/27/23
2f38e-docs(theme): update docson 11/9/23
794f9-chore: update depson 7/6/23
9e467-feat(theme): add runningTime preset, close #1950on 6/4/23
fa8bb-docs(theme): fix typoson 5/24/23
b5f3b-docs(theme): fix typos (#3076)on 4/25/23
ac0d6-feat(theme): add presetson 4/19/23