Custom Layout

Mr.Hope ... 2021-5-31 Layout
  • Custom
  • Layout
About 1 min

We understand the needs of custom layout, you can add content to a specific part of the theme layout on all pages or a specific page.

# Layout slot

The theme provides 10 slots:

Markdown Slot Name ThemeConfig Key Note
content-top contentTop top of content
content-bottom contentBottom bottom of content
page-top pageTop top of the page
page-bottom pageBottom bottom of the page
navbar-start navbarStart start of navigation bar
navbar-center navbarCenter the upper part of the navigation bar
navbar-end navbarEnd the end of the navigation bar
sidebar-top sidebarTop the top of the sidebar
sidebar-center sidebarCenter the upper part of the sidebar
sidebar-bottom sidebarBottom the bottom of the sidebar

# Usage

You can enable it globally through themeConfig using component, or you can add content to a specific page through a special syntax in Markdown.

# Via Markdown

VuePress officially provides a special syntax:

::: slot [slot-name]

The slot content will be rendered as Markdown, and you can also use Vue components.

:::
1
2
3
4
5
example
::: slot navbar-start

Hope

:::
1
2
3
4
5

# Via ThemeConfig

You can configure the components rendered by the slot through themeConfig.custom. Please note that this option and the content inserted by Markdown do not affect each other, and the component content comes before the Markdown content.

All key names of the custom object are the camelCase version of the slot name mentioned above, and the value is the corresponding path of the component.

You can fill in an absolute path or a relative path under the .vuepress folder.

example