vuepress-theme-hope improves the default home page.
To use it, set
home: true in page frontmatter. Any extra content after the
YAML front matter will be parsed as normal Markdown and rendered after the features section.
You can use
heroText to set the main title and
tagline to set the subtitle.
If you have a logo, you can place it in the
public folder and set it via
heroImage, if you want to display another logo in night mode, you can use
heroImageDark. For better A11y, we recommend that you set the description of Logo to
You can display some important links in the form of buttons on the home page.
You can set them via
actions which is an array where each element is an object with the following keys:
text: button text
link: button link
type: button type (only
"default"(default) are supported)
You can set and display item features through
features, which is an array, each element is an object, containing the following keys:
icon(optional): can be filled with full path or absolute path image link, or FontClass
link(optional): link address
For complete configuration items, see Home Frontmatter Configuration.
--- home: true icon: home title: Home heroImage: /logo.svg heroText: VuePress Theme Hope tagline: A VuePress theme with tons of features✨ actions: - text: Tutorial 🧭 link: /cookbook/tutorial/ type: primary - text: Intro 💡 link: /guide/get-started/intro.html - text: Config 🛠 link: /config/ - text: Online Demo 🪀 link: https://stackblitz.com/fork/vuepress-theme-hope features: - title: Markdown Enhance icon: fab fa-markdown details: Add align, sup/sub script, footnote, tasklist, tex, flowchart, diagram, mark and presentation support in Markdown link: /guide/markdown/ - title: Slide Page icon: person-chalkboard details: Adding slide pages to display things you like link: /guide/layout/slides - title: Layout Enhancement icon: object-group details: Adding breadcrumb, footer, improved navbar, improved page nav and etc. link: /guide/layout/ - title: Pageviews and Comments icon: comment-dots details: Start pageview statistics and comment support with Waline link: /guide/feature/comment.html - title: Article Information icon: circle-info details: Add author, writing date, reading time, word count and other information to your article link: /guide/feature/page-info.html - title: Blog Support icon: blog details: Listing your articles with their dates, tags and categories with some awesome layouts link: /guide/blog/ - title: Customizable Theme Color icon: palette details: Customize theme color link: /guide/interface/theme-color.html - title: Dark Mode icon: circle-half-stroke details: Switch between light and dark modes freely link: /guide/interface/darkmode.html - title: Full A11y support icon: universal-access details: Full support of accessibility in your site link: /guide/interface/accessibility.html - title: Article Encryption icon: lock details: Encrypt you articles based on page links, so that only the one you want could see them link: /guide/feature/encrypt.html - title: Search icon: search details: Support docsearch and client search link: /guide/feature/search.html - title: Copy Code Blocks icon: copy details: Copy codes with one click in code blocks link: /guide/feature/copy-code.html - title: Image Preview icon: image details: Support viewing, zooming, sharing your page images like a gallery link: /guide/feature/photo-swipe.html - title: SEO Enhancement icon: dumbbell details: Optimize pages for search engines link: /guide/advanced/seo.html - title: Sitemap icon: sitemap details: Generate a Sitemap for your site link: /guide/advanced/sitemap.html - title: Feed icon: rss details: Generate feed to allow users to subscribe it link: /guide/advanced/feed.html - title: PWA icon: mobile-screen details: Make your site more like an APP link: /guide/advanced/pwa.html - title: More New Features icon: ellipsis details: Including icon support, fullscreen button, etc. link: /guide/feature/ copyright: false footer: MIT Licensed | Copyright © 2019-present Mr.Hope ---