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.
heroImage: /android-chrome-192x192.png
tagline: A simple, easy to use, content centered site build tool with the full power of Sveltekit.
actions:
  - label: Read the docs
    to: /guide/introduction/
    type: primary
  - label: View on github
    type: flat
    to: https://github.com/Blackman99/sveltepress
    external: true
features:
  - title: Markdown centered
    description: To help you can start writing with minimal configuration.
    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. So that you can do more than SSG.
    icon:
      type: iconify
      collection: logos
      name: svelte-kit
  - title: Svelte in Markdown
    description: Feel free to use svelte (3 and 4) in markdown. Explore infinite possibilities.
    icon:
      type: iconify
      collection: vscode-icons
      name: file-type-svelte
    link: /guide/markdown/svelte-in-markdown/
  - title: Type friendly
    description: All APIs are fully typed with typescript.
    icon:
      type: iconify
      collection: logos
      name: typescript-icon
  - title: Theme Customizable
    description: Feel free to use default theme, community themes or write your own.
    icon:
      type: iconify
      collection: emojione
      name: artist-palette
---
md

And you can see

Home page
for result

heroImage

The home page logo image. It is recommended to use an image with high quality

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

home

Config to false to remove all home page content that mentioned above.

Slots

hero-image

Use custom hero image content. Example:

/src/routes/+page.(md|svelte)
<div slot="hero-image">
Custom hero image content
</div>
html
Suggest changes to this page
Last update at: 2023/06/11 04:25:31