Theme Layout Options

About 2 minConfigTheme ConfigLayout

The following options control theme layout.

For related guide, please see Layout → Navbar.

  • Type: NavbarConfig | false
  • Default: false

Navbar config

  • Type: boolean
  • Default: true

Whether display icons in navbar.

  • Type: HopeNavbarLayoutOptions

    type NavbarComponent =
      | "Brand"
      | "Links"
      | "Language"
      | "Search"
      | "Outlook"
      | "Repo";
    
    interface HopeNavbarLayoutOptions {
      start: NavbarComponent[];
      center: NavbarComponent[];
      end: NavbarComponent[];
    }
    
  • Default: { start: ["Brand"], center: ["Links"], end: ["Language", "Repo", "Outlook", "Search"] }

Customize navbar layout.

  • Type: string
  • Required: No

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

logoDark

  • Type: string
  • Required: No

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

repo

  • Type: string
  • Required: No

Repository link

repoDisplay

  • Type: boolean
  • Default: true

Whether display repo link in navbar.

repoLabel

  • Type: string
  • Required: No

Repository aria label of navbar.

Note

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

  • Type: "always" | "mobile" | "none"
  • Default: "mobile"

Whether to hide navbar when scrolling down.

hideSiteNameOnMobile

  • Type: boolean
  • Default: true

Whether hide site title on mobile.

For guide, see Layout → Sidebar.

  • Type: SidebarConfig | "structure" | "heading" | false
  • Default: "structure"

Sidebar Config.

sidebarIcon

  • Type: boolean
  • Default: true

Whether show icons in the sidebar

sidebarSorter Root Only

  • Type: SidebarSorter

    interface SidebarFileInfo {
      type: "file";
      filename: string;
    
      title: string;
      order: number | 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
      | SidebarSorterFunction[]
      | SidebarSorterKeyword
      | SidebarSorterKeyword[];
    
  • 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 ascendingly, negative order last with its value descendingly
  • date: sort by date ascendingly
  • date-desc: sort by date descendingly
  • title: alphabetically sort by title
  • filename: alphabetically sort by filename

headerDepth

  • Type: number
  • Default: 2

Nested headings depth in sidebar

Route Navigation

  • Type: boolean
  • Default: true

Whether enable route navigation globally.

  • Type: boolean
  • Default: true

Whether show icons in route navigation

  • Type: boolean
  • Default: true

Whether show prevLink in bottom.

  • Type: boolean
  • Default: true

Whether show nextLink in bottom.

Title

titleIcon

  • Type: boolean
  • Default: true

Whether display icon besides page title

pageInfo

  • Type: ArticleInfo[] | 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

Meta

lastUpdated

  • Type: boolean
  • Default: true

Whether to show "Last Updated" or not.

contributors

  • Type: boolean
  • Default: true

Whether to show "Contributors" or not.

  • Type: boolean
  • Default: true

Whether to show "Edit this page" or not.

editLinkPattern

  • Type: string

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

Note

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

docsRepo

  • Type: string
  • Default: repo

The repo of your docs

docsBranch

  • Type: string
  • Default: "main"

The branch of your docs

docsDir

  • Type: string
  • Default: ""

Docs dir location in repo

  • Type: string
  • Required: false

The default content for the footer, can accept HTMLString.

  • Type: string | boolean
  • Default: "Copyright © <author>"

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

displayFooter

  • Type: boolean
  • Default: false

Whether to display footer by default.

Others

home

  • Type: string
  • Default: Key of current locale

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

rtl

  • Type: boolean
  • Default: false

Whether use RTL layout.

toc

  • Type: boolean
  • Default: true

Whether show toc list in desktop mode.

Loading...