Other features

Print Button

Try it:

The theme fully optimize style for print, and there will be a print button at toc in desktop mode by default.

To hide print button, you should set print: false in theme options.

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

export default {
  theme: hopeTheme({
    print: false,
  }),
};

Fullscreen Button

Try it:

Full Screen

If you need it, you can enable it by setting fullscreen: true in theme options.

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

export default {
  theme: hopeTheme({
    fullscreen: true,
  }),
};

Tips

If the current browser does not support full screen, the full screen button is automatically hidden.

Back to top button

vuepress-theme-hope adds a back-to-top button with progress bar using @vuepress/plugin-back-to-top which will display after scrolling down 100px by default.

You can set plugins.backToTop: false in theme options to disable it, or set it with an object to customize its threshold distance and progress bar display:

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

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      // disable back to top button
      backToTop: false,

      // or

      // customize back to top button
      backToTop: {
        /**
         * Scroll threshold distance to display back to top button (in pixels)
         *
         * @default 100
         */
        threshold: 500,
        /**
         * Whether display scroll progress
         *
         * @default true
         */
        progress: false,
      },
    },
  }),
});

RTL Layout

vuepress-theme-hope fully supports RTL layout. Just set rtl: true in rtl language of locales.

Try it:

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

export default {
  theme: hopeTheme({
    locales: {
      // ...
      "/ar/": {
        // enable RTL layout
        rtl: true,
      },
    },
  }),
};