Home Page

vuepress-theme-hope provides a powerful home page.

To use it, set home: true in page frontmatter. Any extra content after frontmatter 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.

Example

README.md

---
home: true
heroText: My Project
tagline: A powerful project
---

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.

Example

README.md

---
home: true
heroImage: /logo.png
heroImageDark: /logo-dark.png
heroAlt: My Project
---

Important

Medias in frontmatter should only use absolute path or full URL. These medias can not be tracked by bundlers, so relative path will not work.

You can set the background image through bgImage and bgImageDark.

Example

README.md

---
home: true
bgImage: /bg.png
# defaults to bgImage
bgImageDark: /bg-dark.png
---

If you want the information to be displayed in full screen, you can set heroFullScreen: true.

If you need to customize some styles, you can set the style of hero, hero image and background image through heroStyle, heroImageStyle and bgImageStyle. Both CSS string and object are supported.

Example

README.md

---
home: true
# set hero to fullscreen
heroFullScreen: true
# CSS string
heroStyle: "background-color: #000"
# CSS object
heroImageStyle:
  width: 100px
  height: 100px
---

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" are supported)
• icon (optional): support all formats of Icon

Example

README.md

---
home: true
actions:
  - text: Get Started
    link: /get-started/
    icon: signs-post
    type: primary

  - text: Guide
    icon: lightbulb
    link: /guide/
---

Project features (legacy)

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

Example

README.md

---
home: true
features:
  - title: Pageviews and Comments
    icon: comment-dots
    details: Start pageview statistics and comment support with Waline
    link: /guide/feature/comment.html

  - title: Search
    icon: search
    details: Support docsearch and client search
    link: /guide/feature/search.html
---

Project Highlights and features

You can set and display project features and highlights through highlights, which is an array, each element is an object, representing a highlight or feature section.

Highlight section use highlights to set highlights and feature section use features to set features (you should only set one of them). Both of them are arrays, each element is an object, representing a highlight or feature item:

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

You can also set the following optional keys:

• header: section title, supports HTML string
• description: section description, supports HTML string
• color: Text color
• image: Section image
• imageDark: Section image used in dark mode
• bgImage: Section background image
• bgImageDark: Section background image used in dark mode
• bgImageStyle: Section background image styles

Highlights also support the following properties:

• type: "order", "un-order"(default) or "no-order"

Example

README.md

---
home: true
highlights:
  - header: Easy to install
    image: /assets/image/box.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/3-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/3-dark.svg
    highlights:
      - title: Run <code>pnpm create vuepress-theme-hope hope-project</code> to create a new project with this theme.
      - title: Run <code>pnpm create vuepress-theme-hope add .</code> in your project root to create a new project with this theme.

  - header: Add things you want in markdown
    description: We extended the standard commonMark specification and added tons of new features for you.
    image: /assets/image/markdown.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
    bgImageStyle:
      background-repeat: repeat
      background-size: initial
    features:
      - title: Links Check
        icon: clipboard-check
        details: Check markdown links
        link: ./guide/markdown/others.html#link-check

      - title: Hint box
        icon: box-archive
        details: Decorate Markdown content with styles
        link: ./guide/markdown/stylize/hint.html
---

Demo

Info

For complete configuration items, see Home Frontmatter Configuration.

• Project HomePage with features

• Project HomePage with highlights

Feature Homepage Code

---
home: true
icon: home
title: Project Home with features
heroImage: https://theme-hope-assets.vuejs.press/logo.svg
heroText: VuePress Theme Hope
tagline: A VuePress theme with tons of features✨
actions:
  - text: Get Started
    link: /get-started/
    icon: signs-post
    type: primary

  - text: Guide
    icon: lightbulb
    link: /guide/

  - text: Demos
    icon: star
    link: /demo/

features:
  - title: Markdown Enhance
    icon: b: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: 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: 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
---

## 🛠Install

Create a new vuepress-theme-hope project in `<dir>` directory under the current path:

::: code-tabs#shell

@tab pnpm

```bash
pnpm create vuepress-theme-hope <dir>
```

@tab yarn

```bash
yarn create vuepress-theme-hope <dir>
```

@tab npm

```bash
npm init vuepress-theme-hope@latest <dir>
```

:::

To add vuepress-theme-hope as docs builder to an existing project, run the following command in the project root directory:

::: code-tabs#shell

@tab pnpm

```bash
pnpm create vuepress-theme-hope add <dir>
```

@tab yarn

```bash
yarn create vuepress-theme-hope add <dir>
```

@tab npm

```bash
npm init vuepress-theme-hope@latest add <dir>
```

:::

## 🚀Usage

```ts twoslash title=".vuepress/config.ts"
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    // your theme config here
  }),
});
```

## Telegram Group

- [vuepressthemehope](https://t.me/vuepressthemehope)

Highlight Homepage Code

---
home: true
icon: home
title: Home
heroText: VuePress Theme Hope
tagline: A VuePress theme with tons of features✨
heroStyle:
  min-height: 600px
bgImage: https://theme-hope-assets.vuejs.press/bg/6-light.svg
bgImageDark: https://theme-hope-assets.vuejs.press/bg/6-dark.svg
bgImageStyle:
  background-attachment: fixed
actions:
  - text: Get Started
    link: ./get-started/
    icon: signs-post
    type: primary

  - text: Guide
    icon: lightbulb
    link: ./guide/

  - text: Demos
    icon: star
    link: ./demo/

highlights:
  - header: Easy to install
    image: /assets/image/box.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/3-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/3-dark.svg
    highlights:
      - title: Run <code>pnpm create vuepress-theme-hope hope-project</code> to create a new project with this theme.
      - title: Run <code>pnpm create vuepress-theme-hope add .</code> in your project root to create a new project with this theme.

  - header: Add things you want in markdown
    description: We extended the standard commonMark specification and added tons of new features for you.
    image: /assets/image/markdown.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
    bgImageStyle:
      background-repeat: repeat
      background-size: initial
    features:
      - title: Links Check
        icon: clipboard-check
        details: Check markdown links
        link: ./guide/markdown/others.html#link-check

      - title: Hint box
        icon: box-archive
        details: Decorate Markdown content with styles
        link: ./guide/markdown/stylize/hint.html

      - title: GFM alerts
        icon: bell
        details: GFM alert box
        link: ./guide/markdown/stylize/alert.html

      - title: Tabs
        icon: table-columns
        details: Group similar content with tabs and switch them together
        link: ./guide/markdown/content/tabs.html

      - title: Code Tabs
        icon: code
        details: Group similar codes with tabs
        link: ./guide/markdown/code/code-tabs.html

      - title: Custom Align
        icon: align-center
        details: Let you decide to align paragraphs in the way you like
        link: ./guide/markdown/stylize/align.html

      - title: Attrs
        icon: code
        details: Allow you to add attributes for Markdown content
        link: ./guide/markdown/stylize/attrs.html

      - title: Superscript and subscript
        icon: superscript
        details: Inserting superscript and subscript
        link: ./guide/markdown/stylize/sup-sub.html

      - title: Footnote
        icon: quote-left
        details: Your Markdown now support footnotes
        link: ./guide/markdown/content/footnote.html

      - title: Mark
        icon: highlighter
        details: Mark and highlight contents
        link: ./guide/markdown/stylize/mark.html

      - title: Spoiler
        icon: eraser
        details: Mark spoiler contents
        link: ./guide/markdown/stylize/spoiler.html

      - title: Tasklist
        icon: square-check
        details: Use tasklist in Markdown
        link: ./guide/markdown/grammar/tasklist.html

      - title: Image syntax
        icon: image
        details: improve syntax to specify size and color scheme
        link: ./guide/markdown/grammar/image.html

      - title: Component Support
        icon: puzzle-piece
        details: Easily insert components in Markdown
        link: ./guide/component/grammar.html

      - title: Components
        icon: puzzle-piece
        details: Common components out fo box
        link: ./guide/component/built-in.html

      - title: Chart Support
        icon: chart-simple
        details: Display charts in Markdown
        link: ./guide/markdown/chart/chartjs.html

      - title: Flowchart Support
        icon: route
        details: Create your flowchart in Markdown
        link: ./guide/markdown/chart/flowchart.html

      - title: Mermaid Support
        icon: chart-pie
        details: Add mermaid diagram in Markdown
        link: ./guide/markdown/chart/mermaid.html

      - title: Plantuml Support
        icon: diagram-project
        details: Add plantuml in Markdown
        link: ./guide/markdown/chart/plantuml.html

      - title: Tex Support
        icon: square-root-variable
        details: Markdown now have Tex Support so you can write your formula
        link: ./guide/markdown/grammar/math.html

      - title: Include snippet Support
        icon: b:markdown
        details: split your docs with different parts and import them in Markdown
        link: ./guide/markdown/content/include.html

      - title: Playground Support
        icon: code
        details: You can add playground in Markdown files
        link: ./guide/markdown/code/playground.html

      - title: Kotlin playground Support
        icon: b:kickstarter
        details: Reactive kotlin playground
        link: ./guide/markdown/code/kotlin-playground.html

      - title: Vue playground Support
        icon: b:vuejs
        details: Show living vue component in playground
        link: ./guide/markdown/code/vue-playground.html

      - title: Sandpack playground Support
        icon: code
        details: A live coding environment driven by Sandpack.
        link: ./guide/markdown/code/sandpack.html

      - title: Code Demo Support
        icon: laptop-code
        details: You can insert code demo easily
        link: ./guide/markdown/code/demo.html

      - title: Presentation Support
        icon: person-chalkboard
        details: Insert presentation in Markdown files via Reveal.js
        link: ./guide/markdown/content/revealjs.html

  - header: Customizable UI
    description: Customizable outlook with full a11y support.
    image: /assets/image/ui.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/9-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/9-dark.svg
    highlights:
      - title: Dark Mode
        icon: circle-half-stroke
        details: Switch between light and dark modes freely
        link: ./guide/interface/darkmode.html

      - title: Customizable Theme Color
        icon: palette
        details: Set theme color with the brand color and even a picker
        link: ./guide/interface/theme-color.html

      - title: More
        icon: ellipsis
        details: RTL layout, print support, fullscreen button, etc.
        link: ./guide/interface/others.html

  - header: Improved layouts
    description: An awesome responsive layout
    image: /assets/image/layout.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/5-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/5-dark.svg
    highlights:
      - title: Navbar
        icon: window-maximize
        details: Fully customizable navbar with improved mobile support
        link: ./guide/layout/navbar.html

      - title: Sidebar
        icon: fas fa-window-maximize fa-rotate-270
        details: Generate sidebar based on page headings and file structure
        link: ./guide/layout/sidebar.html

      - title: Slide Page
        icon: person-chalkboard
        details: Adding slide pages to display things you like
        link: ./guide/layout/slides.html

      - title: Other Layout Improvement
        icon: object-group
        details: Improved page nav and new breadcrumb, footer and toc. We also bring you a brand new homepage.
        link: ./guide/layout/

  - header: New features
    image: /assets/image/features.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/1-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/1-dark.svg
    features:
      - title: Catalog Page
        icon: network-wired
        details: Auto generating catalog page and out of box catalog component
        link: ./guide/feature/catalog.html

      - title: Pageviews and Comments
        icon: comment-dots
        details: Pageview statistics and comment support with 4 comment service
        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: 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: Code Block
        icon: code
        details: Customize code block themes, line number, highlight lines, copy button, etc.
        link: ./guide/markdown/code/fence.html.html

      - title: Image Preview
        icon: image
        details: Support viewing, zooming, sharing your page images like a gallery
        link: ./guide/feature/photo-swipe.html

  - header: Blogging
    description: Create personal blog with theme
    image: /assets/image/blog.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/5-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/5-dark.svg
    highlights:
      - title: Blog features
        icon: blog
        details: Listing your articles with their dates, tags and categories
        link: ./guide/blog/intro.html

      - title: Blog homepage
        icon: blog
        details: New blog homepage
        link: ./guide/blog/home.html

      - title: Blogger info
        icon: circle-info
        details: Customize avatar, name, slogan, introduction and social links
        link: ./guide/blog/blogger.html

      - title: Timeline
        icon: clock
        details: Read through blog posts in a timeline
        link: ./guide/blog/timeline.html

  - header: Advanced
    description: Advanced features to improve site SEO and user experience
    image: /assets/image/advanced.svg
    bgImage: https://theme-hope-assets.vuejs.press/bg/4-light.svg
    bgImageDark: https://theme-hope-assets.vuejs.press/bg/4-dark.svg
    highlights:
      - 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

copyright: false
footer: MIT Licensed | Copyright © 2019-present Mr.Hope
---