You can configure the
icon field in the frontmatter of the page, and fill in the FontClass of the corresponding icon to bind the icon to the page.
This icon is used in navbar, sidebar, breadcrumb and page title.
--- icon: home ---
For icon settings, please see Icon Support
Page Info Display
Please see Page Info Section
Please see Breadcrumb.
In desktop mode, a list of article headers will automatically be displayed on the right side of the screen. (They will be placed in the sidebar on mobile devices)
If you don't want to display the title list on the right in desktop mode, please set
toc: false in theme options.
You can also set it through
toc in page frontmatter.
Setting header depth
You can customize the depth of the header list by setting
headerDepth in theme options and page frontmatter.
The valid maximum value depends on which levels of headers you have extracted via markdown.headers.level.
Since the default value of markdown.headers.level is
[2, 3], so The default maximum value for
Contributors and Last Updated Time
Please see Page Meta.
Prev / Next Links
Prev and next links are automatically inferred based on the sidebar order of the active page. You can also explicitly overwrite or disable them globally with theme config or on specific pages using
--- prev: ./some-other-page next: false ---
Please see Comment section for details.
By default, the content of each
*.md file is rendered in a
<div class="page"> container, along with the sidebar, auto-generated edit links and previous/next links. To use a fully custom component in place of the page, you can again specify the component using frontmatter:
--- layout: SpecialLayout ---
This will render
SpecialLayout layout registered in VuePress for the given page.
The theme only provides
Also the theme:
- Provides a
Bloglayout when the blogging feature is enabled
- Provides a
Slidelayout when the slideshow feature is enabled
If you want to provide your own layout, please add them in client config files.
Customize Container Class
By default, each page is rendered in a
div with class
theme-container. To apply some special styles to specific pages, you can additionally specify a class name by setting
containerClass in frontmatter
--- containerClass: fancy-container ---
This will render in
<div class="theme-container fancy-container" /> for the current page.