Page

Mr.Hope ... Layout
  • Layout
About 2 min

# Page

# Icon support

You can configure the icon field in the Front Matter of the page, and fill in the FontClass of the corresponding icon to bind the icon to the page.

This icon is used in Path Navigation and Sidebar.

Example
---
icon: Home
---
1
2
3

The theme adds a new Breadcrumb support, you can config it using breadcrumb in Frontmatter and themeConfig.

Without any configuration, a Breadcrumb that matches the theme color is displayed at the top of the page content to help the reader understand the document structure.

You can also control the icon display of the path navigation Support page config, the configuration item is breadcrumbIcon.

Note

To ensure Breadcrumb working well, the readme.md file should be included in each folder.

Otherwise, the path navigation will automatically ignore that level because the component can not generate titles and links from the corresponding level folder.

# Page Info Display

See Page Info Section

# Last Updated

The themeConfig.lastUpdated option allows you to get the UNIX timestamp(ms) of each file’s last git commit, and it will also display at the bottom of each page in an appropriate format:

module.exports = {
  themeConfig: {
    lastUpdated: "Last Updated", // string | boolean
  },
};
1
2
3
4
5

Note that it’s on by default. If given a string, it will be displayed as a prefix.

Note

Since lastUpdated is based on git, you can only use it in a git repository. Also, since the timestamp used comes from the git commit, it will display only after a first commit for a given page, and update only on ensuing commits of that page.

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 Front matter:

---
prev: ./some-other-page
next: false
---

1
2
3
4
5

# Comment

See the Comment section for details.

To display the footer on every page, you need to set themeConfig.footer.display to true. At the same time, you can also use themeConfig.footer.copyright and themeConfig.content to set the default copyright information and footer content.

You can also configure the footer, copyrightText and medialink fields in the Front Matter page.

  • The footer field can be filled with a string or Boolean value.

    Setting footer to true will display the default footer content. Setting footer tofalse will disable the page footer.

    If you fill in a string, it will be inserted into footer by v-html, so you can fill in HTMLString.

  • The copyrightText field can be filled with copyright information on this page (also support HTMLString). This option is useful when you quote articles from other places while they are using a specific license. You can also fill in false to hide the copyright information in a specific page.

  • The medialink field is the same as themeConfig.blog.links (specific configuration see here), you can configure it in a specific page to display different social media links. You can also set it to false to hide it.

Example

Enable the default footer text:

---
footer: true
---
1
2
3

Customize footer text without displaying copyright information and media links:

---
footer: This website is served by GitHub Pages
copyrightText: false
medialink: false
---
1
2
3
4
5

Custom footer content and copyright information and media links:

---
footer: <a href="https://github.com/Mister-Hope"> Mr.Hope </a>
copyrightText: MIT LICENSE
medialink:
  Zhihu: https://zhihu.com
---
1
2
3
4
5
6

When you set footer.display to true in the theme, you can also disable it locally:

---
footer: false
---
1
2
3

To remove the default footer content while keeping social media and copyright information displayed, please use an empty string.

---
footer: ""
---
1
2
3

# Custom Layout for Specific Pages

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 prev/next links. To use a fully custom component in place of the page, you can again specify the component to use using YAML front matter:

---
layout: SpecialLayout
---

1
2
3
4

This will render .vuepress/components/SpecialLayout.vue for the given page.