Home Page

Frontmatter

The src/routes/+page.(md|svelte) would be identified as home page

Home frontmatter can be like this. Take the frontmatter this site use for example:

---
title: A content centered site build tool
description: A simple, easy to use, content centered site build tool with the full power of Sveltekit.
badge:
  text: '⚡️ Svelte 5 & Runes Full Support'
  link: /guide/markdown/svelte-in-markdown/
installCommand: pnpm create sveltepress
actions:
  - label: Read the docs
    to: /guide/introduction/
    type: primary
  - label: View on github
    type: flat
    to: https://github.com/SveltePress/sveltepress
    external: true
features:
  - title: Svelte 5 Runes in Markdown
    description: Embed reactive Svelte 5 components, state runes, and interactive islands directly inside your markdown files with zero context switching.
    spotlight: true
    tag: Killer Feature
    icon:
      type: iconify
      collection: vscode-icons
      name: file-type-svelte
    link: /guide/markdown/svelte-in-markdown/
  - title: Immutable Document Versioning
    description: Keep current docs at clean URLs while publishing immutable historical snapshots with built-in version navigation and release change catalogs.
    spotlight: true
    tag: Enterprise
    icon:
      type: iconify
      collection: material-symbols
      name: history
    link: /guide/version-management/
  - title: Instant Zero-Config Search
    description: Blazing fast client-side search powered by Pagefind, with multi-locale filtering, historical index freezing, and Algolia DocSearch support.
    spotlight: true
    tag: High Performance
    icon:
      type: iconify
      collection: material-symbols
      name: search
    link: /guide/default-theme/search/
  - title: Markdown centered
    description: Start writing instantly with minimal configuration and elegant default documentation styling.
    tag: Authoring
    icon:
      type: iconify
      collection: vscode-icons
      name: file-type-markdown
    link: /guide/markdown/frontmatter/
  - title: Build with Sveltekit
    description: Preserve the full power of SvelteKit including server routes, SSR, SSG, and adapter deployments.
    tag: Ecosystem
    icon:
      type: iconify
      collection: logos
      name: svelte-icon
    link: /guide/introduction/
  - title: Built-in Internationalization
    description: Serve multiple locales from one site with automatic prefixing, language switcher, and version-preserving navigation.
    tag: Global
    icon:
      type: iconify
      collection: material-symbols
      name: translate
    link: /guide/i18n/
  - title: Type friendly
    description: Fully typed documentation and theme APIs with built-in TypeScript Twoslash hover annotations.
    tag: TypeScript
    icon:
      type: iconify
      collection: logos
      name: typescript-icon
    link: /guide/typescript/
  - title: Theme Customizable
    description: Use the refined default documentation theme, blog theme, or easily craft your own custom theme.
    tag: Extensible
    icon:
      type: iconify
      collection: emojione
      name: artist-palette
    link: /guide/themes/
---

Expand code

And you can see Home page for result

`heroImage`

The home page logo image. It is recommended to use an image with high quality. Set it to false when a landing page should use the full content width without the default hero illustration.

Localized default hero visual

When heroImage is omitted, the default theme shows a two-pane code preview. Localize the text inside this visual with the theme's i18n.heroCode option:

import {  } from '@sveltepress/theme-default'

({
  : {
    : {
      : 'Hello',
      : 'Svelte in ',
      : 'markdown',
      : '',
      : 'TIP',
      : 'Count: 1',
    },
  },
})

messageBefore, messageStrong, and messageAfter compose the Markdown sentence shown in the source pane. tipLabel and counterLabel customize the rendered pane.

`tagline`

The small description text under site title and description

`actions`

The action buttons

label The label text of action button
to The link address of action button. Internal paths should be logical routes such as /guide/introduction/; the Default Theme prefixes them with the active locale.
external Determine whether to render a external icon on the right of action button

`features`

The feature cards

title The title
description The text description under the title
icon custom icon config
- type - 'svg' | 'iconify'
- value - the svg content for svg type icon
- collection - the collection name of iconify
- name - the icon name in the specified collection of iconify
link The link that would go to when the feature card is clicked. Internal paths should be logical routes such as /guide/markdown/frontmatter/; the Default Theme prefixes them with the active locale. If the link starts with http(s), would be auto recognized as external link. And would add an external icon on the top-right corner. And the feature card has a clickable style when link is provided.

Icon pre-build required

The iconify icons should be in the Pre-build iconify icons config

`home`

The root route uses the home layout by default. Set home: true on any other route to reuse the same landing-page presentation with that page's own title, description, and tagline. Landing pages do not render the documentation sidebar, table of contents, edit metadata, or previous/next page switcher.

Set home: false on the root route to remove the default home page content.

Slots

`hero-image`

Use custom hero image content. Example:

/src/routes/+page.(md|svelte)

{#snippet 
  <div>
    Custom hero image content
  </div>
{/snippet}

svelte

Suggest changes to this page