Blog homepage

About 1 min

vuepress-theme-hope allows you to enable a blog-style and a portfolio style homepage.

Blog Style Homepage

Set layout: BlogHome and home: true in the frontmatter of homepage.

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.

You can set the background image through bgImage and bgImageDark, but you need to pay attention that you must fill in the full URL or absolute path. 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 the logo and background image through heroImageStyle and bgImageStyle.

Typically, you might want to display some projects, books, articles, links, friend links, etc. on your homepage. You can set them via projects, which is an array where each element is an object with the following keys:

name: required, project name
link: required, project link, fill in an external path or absolute path
desc: project description
icon: Icon, you can fill in full path or absolute path image link, also icon FontClass is supported
We provide these icons as built-in support either: "link", "project", "book", "article", "friend"。

Info

For complete configuration items, see Blog Home Frontmatter Configuration.

Living Demo