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.

.vuepress/theme.ts

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

export default 
hopeTheme
({
  
print
: false,

  // other options..
});

Fullscreen Button

Try it:

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

.vuepress/theme.ts

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

export default 
hopeTheme
({
  
fullscreen
: true,

  // other options..
});

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:

.vuepress/theme.ts

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

export default {
  
plugins
: {
    // disable back to top button with `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,
    },
  },
};

Full A11y Support

"A11y" stands for "accessibility".

The theme adds full support of accessibility.

• All page structures of the theme are processed semantically.

• All buttons and icons have their corresponding accessibility labels

• All main interactive elements can be focused and interacted through the keyboard

This is our support for the visually impaired people around the world! ❤️

Focus Mode

If you want to focus on reading, you can enable focus mode by setting focus: true in theme options.

.vuepress/theme.ts

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

export default 
hopeTheme
({
  
focus
: true,

  // other options..
});

In this mode, we will blur elements other than the main content, providing a more focused reading experience.

The default delay is 1500ms, and you can customize it by setting a number value.

Pure Mode

If your site is a documentation-only site, and you prefer a clean style, you can enable pure mode by setting pure: true in theme options.

.vuepress/theme.ts

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

export default 
hopeTheme
({
  
pure
: true,

  // other options..
});

In this mode, we disable some fancy animations and some colors and just provide functionality.

RTL Layout

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

Try it:

.vuepress/theme.ts

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

export default 
hopeTheme
({
  
locales
: {
    // ...

    "/ar/": {
      // enable RTL layout
      
rtl
: true,
    },
  },
});