Home Page

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.

Site Information

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 heroAlt.

Home button

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 "primary" and "default" (default) are supported)

Project features

You can set and display item features through features, which is an array, each element is an object, containing the following keys:

• title: title
• details: details
• icon (optional): can be filled with full path or absolute path image link, or FontClass
• link (optional): link address

Info

For complete configuration items, see Home Frontmatter Configuration.

Demo

---
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
---