diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 8209c046..9a3d9224 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -74,7 +74,8 @@ function sidebarGuide() { items: [ { text: 'Introduction', link: '/guide/theme-introduction' }, { text: 'Layout', link: '/guide/theme-layout' }, - { text: 'Home Page', link: '/guide/theme-home-page' }, + { text: 'Homepage', link: '/guide/theme-homepage' }, + { text: 'Footer', link: '/guide/theme-footer' }, { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' } ] }, diff --git a/docs/guide/migration-from-vitepress-0.md b/docs/guide/migration-from-vitepress-0.md index 038a31e7..60f11027 100644 --- a/docs/guide/migration-from-vitepress-0.md +++ b/docs/guide/migration-from-vitepress-0.md @@ -1,3 +1,8 @@ # Migration from VitePress 0.x -Coming soon... +If you're coming from VitePress 0.x version, there're several breaking changes due to new features and enhancement. Please follow this guide to see how to migrate your app over to the latest VitePress. + +## Config: Frontmatter + +- `home: true` option has changed to `layout: home`. Also, many Homepage related settings have been modified to provide additional features. See [Homepage guide](../guide/theme-homepage) for details. +- `footer` option is moved to [`themeConfig.footer`](../config/theme-configs#footer). diff --git a/docs/guide/theme-footer.md b/docs/guide/theme-footer.md new file mode 100644 index 00000000..a3e0efde --- /dev/null +++ b/docs/guide/theme-footer.md @@ -0,0 +1,26 @@ +# Footer + +When the [page layout](./theme-layout) is set to either `home` or `page`, VitePress will display global footer at the bottom of the page. Set `themeConfig.footer` to configure footer content. + +```ts +export default { + themeConfig: { + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2019-present Evan You' + } + } +} +``` + +```ts +export interface Footer { + // The message shown rigth before copyright. + message?: string + + // The actual copyright text. + copyright?: string +} +``` + +Note that footer will not be displayed when the page layout is set to `doc`. diff --git a/docs/guide/theme-home-page.md b/docs/guide/theme-home-page.md deleted file mode 100644 index 5039610d..00000000 --- a/docs/guide/theme-home-page.md +++ /dev/null @@ -1,3 +0,0 @@ -# Home Page - -Coming soon... diff --git a/docs/guide/theme-homepage.md b/docs/guide/theme-homepage.md new file mode 100644 index 00000000..d859e073 --- /dev/null +++ b/docs/guide/theme-homepage.md @@ -0,0 +1,116 @@ +# Homepage + +VitePress default theme provides a homepage layout, which you can also see used on [the homepage of this site](../). You may use it on any of your pages by specifying `layout: home` in the [frontmatter](./frontmatter). + +```yaml +--- +layout: home +--- +``` + +However, this option alone wouldn't do much. You can add several different pre templated "sections" to the homepage by setting additional other options such as `hero` and `feaures`. + +## Hero Section + +The Hero section comes at the top of the homepage. Here's how you can configure the Hero section. + +```yaml +--- +layout: home + +hero: + name: VuePress + text: Vite & Vue powered static site generator. + tagline: Lorem ipsum... + actions: + - theme: brand + text: Get Started + link: /guide/what-is-vitepress + - theme: alt + text: View on GitHub + link: https://github.com/vuejs/vitepress +--- +``` + +```ts +interface Hero { + // The string shown top of `text`. Comes with brand color + // and expected to be short, such as product name. + name?: string + + // The main text for the hero section. This will be defined + // as `h1` tag. + text: string + + // Tagline displayed below `text`. + tagline?: string + + // Action buttons to display in home hero section. + actions?: HeroAction[] +} + +interface HeroAction { + // Color theme of the button. Defaults to `brand`. + theme?: 'brand' | 'alt' + + // Label of the button. + text: string + + // Destination link of the button. + link: string +} +``` + +### Customizing the name color + +VitePress uses the brand color (`--vp-c-brand`) for the `name`. However, you may customize this color by overriding `--vp-home-hero-name-color` variable. + +```css +:root { + --vp-home-hero-name-color: blue; +} +``` + +Also you may customize it further by combining `--vp-home-hero-name-background` to give the `name` gradient color. + +```css +:root { + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff); +} +``` + +## Features Section + +In Features section, you can list any number of features you would like to show right after the Hero section. To cinfugure it, pass `features` option to the frontmatter. + +```yaml +--- +layout: home + +features: + - icon: ⚡️ + title: Vite, The DX that can't be beat + details: Lorem ipsum... + - icon: 🖖 + title: Power of Vue meets Markdown + details: Lorem ipsum... + - icon: 🛠️ + title: Simple and minimal, always + details: Lorem ipsum... +--- +``` + +```ts +interface Feature { + // Show icon on each feature box. Currently, only emojis + // are supported. + icon?: string + + // Title of the feature. + title: string + + // Details of the feature. + details: string +} +``` diff --git a/docs/guide/theme-layout.md b/docs/guide/theme-layout.md index c11177d1..2012b564 100644 --- a/docs/guide/theme-layout.md +++ b/docs/guide/theme-layout.md @@ -23,7 +23,7 @@ It also provides documentation specific features listed below. These features ar - Edit Link - Prev Next Link - Outline -- Carbon Ads +- [Carbon Ads](./theme-carbon-ads) ## Page Layout @@ -35,4 +35,4 @@ Note that even in this layout, sidebar will still show up if the page has a matc ## Home Layout -Option `home` will generate templated "Home Page". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Theme: Home Page](./theme-home-page) for more details. +Option `home` will generate templated "Home Page". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Theme: Home Page](./theme-homepage) for more details.