Theme Layout Options

The following options control theme layout.

Navbar Related

navbarrecommended: YesNavbarOptions | false

Defaultfalse

Navbar config.

See also: Layout → Navbar → Navbar links and Layout → Navbar → Disable Navbar.

navbarLayoutNavbarLayoutOptions

Default{ start: ["Brand"], center: ["Links"], end: ["Language", "Repo", "Outlook", "Search"] }

Customize navbar layout.

See also: Layout → Navbar → Navbar layout.

Each field accepts an array of built-in navbar component names or custom component names:

type NavbarComponent =
  "Brand" | "Links" | "Language" | "Search" | "Outlook" | "Repo";

navbarLayout.start(NavbarComponent | string)[]

The navbar components at the start.

navbarLayout.center(NavbarComponent | string)[]

The navbar components in the center.

navbarLayout.end(NavbarComponent | string)[]

The navbar components at the end.

logorecommended: Yesstring

Navbar logo, should be absolute path relative to .vuepress/public folder.

See also: Layout → Navbar → Site Logo.

logoDarkstring

Defaultlogo

Navbar logo in dark mode, should be absolute path relative to .vuepress/public folder.

See also: Layout → Navbar → Site Logo.

navbarTitlestring

Default$siteLocale.title

Navbar title, you can set it to an empty string to hide it.

repostring

Repository link.

See also: Layout → Navbar → Git Repository and Edit Links.

repoDisplayboolean

Defaulttrue

Whether display repo link in navbar.

See also: Layout → Navbar → Git Repository and Edit Links.

repoLabelstring

Repository aria label of navbar.

Note

The theme can recognize links of GitHub, Gitlab, Gitee and Bitbucket.

See also: Layout → Navbar → Git Repository and Edit Links.

navbarAutoHide'always' | 'mobile' | 'none'

Default'mobile'

Whether to hide navbar when scrolling down.

hideSiteNameOnMobileboolean

Defaulttrue

Whether hide site title on mobile.

Sidebar Related

For guide, see Layout → Sidebar.

sidebarrecommended: YesSidebarOptions

Default'structure'

Sidebar Config.

sidebarSorterroot-only: YesSidebarSorter

Default["readme", "order", "title", "filename"]

Structure sidebar sorter.

You can:

• fill in a custom function
• provide one sorter keyword
• provide an array of custom function or sorter keyword

Available keywords are:

• readme: README.md or readme.md first
• order: positive order first with its value ascending, negative order last with its value descending
• date: sort by date ascending
• date-desc: sort by date descending
• title: alphabetically sort by title
• filename: alphabetically sort by filename

Its type is:

import type {
  ThemeNormalPageFrontmatter,
  ThemePageData,
} from "vuepress-theme-hope";

interface SidebarFileInfo {
  
type
: "file";
  
filename
: string;

  
title
: string;
  
order
: number | null;
  
path
?: string | null;

  
frontmatter
: ThemeNormalPageFrontmatter;
  
pageData
: ThemePageData;
}

interface SidebarDirInfo {
  
type
: "dir";
  
dirname
: string;
  
children
: 
SidebarInfo
[];

  
title
: string;
  
order
: number | null;

  
groupInfo
: {
    
icon
?: string;
    
collapsible
?: boolean;
    
link
?: string;
  };

  
frontmatter
: ThemeNormalPageFrontmatter | null;
  
pageData
: ThemePageData | null;
}

type 
SidebarInfo
 = SidebarFileInfo | SidebarDirInfo;

type 
SidebarSorterKeyword
 =
  "readme" | "order" | "date" | "date-desc" | "filename" | "title";

type 
SidebarSorterFunction
 = (
infoA
: 
SidebarInfo
, 
infoB
: 
SidebarInfo
) => number;

type 
SidebarSorter
 =
  | 
SidebarSorterFunction

  | 
SidebarSorterKeyword

  | (
SidebarSorterKeyword
 | 
SidebarSorterFunction
)[];

Route Navigation

breadcrumbboolean

Defaulttrue

Whether enable route navigation globally.

breadcrumbIconboolean

Defaulttrue

Whether show icons in route navigation.

prevLinkboolean

Defaulttrue

Whether show prevLink in bottom.

nextLinkboolean

Defaulttrue

Whether show nextLink in bottom.

Page Meta

titleIconboolean

Defaulttrue

Whether to display an icon beside the page title.

pageInfoArticleInfo[] | false

Default["Author", "Original", "Date", "Category", "Tag", "ReadingTime"]

Article information. The order of the items decides the display order. Fill in false to disable it.

Available items in ArticleInfo:

• 'Author': author
• 'Date': writing date
• 'Original': is original
• 'Category': category
• 'Tag': tags
• 'ReadingTime': expect reading time
• 'Word': word number for the article
• 'PageView': pageviews

lastUpdatedboolean

Defaulttrue

Whether to show "Last Updated" or not.

contributors'content' | 'meta' | boolean

Default'meta'

Whether to show "Contributors" or not.

• 'content': show as content in main text
• 'meta': show as meta info at the bottom of content
• true: same as 'meta'
• false: disable it

changelogboolean

Whether to show changelog.

editLinkboolean

Defaulttrue

Whether to show "Edit this page" or not.

editLinkPatternstring

Pattern of edit link. While :repo :branch :path will be automatically replaced by docsRepo docsBranch and docsDir + filePath.

Note

The theme provides built-in support for GitHub, Gitlab, Gitee and Bitbucket.

docsRepostring

Defaultrepo

The repo of your docs.

docsBranchstring

Default'main'

The branch of your docs.

docsDirstring

Docs dir location in repo.

Footer

footerstring

The default content for the footer, can accept HTMLString.

copyrightstring | false

Default'Copyright © <author>'

The default copyright info, set it to false to disable it by default.

displayFooterboolean

Whether to display footer by default.

Others

homestring

Default Key of current locale

Home path of current locale, used as the link of back-to-home and navbar logo.

rtlboolean

Whether to use RTL layout.

tocGetHeadersOptions | boolean

Defaulttrue

Whether show toc list.

toc.selectorstring

Default'#markdown-content > h1, #markdown-content > h2, #markdown-content > h3, #markdown-content > h4, #markdown-content > h5, #markdown-content > h6, [vp-content] > h2'

The selector of the headers.

toc.ignorestring[]

Default[".vp-badge", ".vp-icon"]

Ignore specific elements within the header, should be an array of CSS Selector.

toc.levelsHeaderLevels

Default'deep'

The levels of the headers.

1 to 6 for <h1> to <h6>

• false: No headers.
• number: only headings of that level will be displayed.
• [number, number]: headings level tuple, where the first number should be less than the second number, for example, [2, 4] which means all headings from <h2> to <h4> will be displayed.
• 'deep': same as [2, 6], which means all headings from <h2> to <h6> will be displayed.