Extending Posts

As mentioned before, markdown files can have metadata using Front Matter.

SveltePress directly makes them available alongside the post. So let's add some stuff!

Tags

Let's say we want to add tags on a post, we firstly need to add it to the markdown metadata:

---
postName: Posts
tags:
  - Svelte
  - Press
  - JS
  - Vite
---

Inside src/routes/[...group]/[slug].svelte the tags will be available by calling post.meta.tags.

Let's now display them at the top, by creating a Svelte loop that will display each one:

<Content pagination={post.pagination} meta={post.meta}>
    {#each post.meta.tags || [] as tag}
        <span style="margin-right: 5px; padding: 2px; background-color: green">{tag}</span>
    {/each}
    {@html post.body}
</Content>

This will instantly have the following outcome:

Date

Similarly, we can also do the same for the date the file was modified or made. SveltePress already passes the last modified date in metadata. However, this can get overwritten if eg. this is an old blog post.

<Content pagination={post.pagination} meta={post.meta}>
    {post.meta.date}
    {@html post.body}
</Content>

Other metadata ideas

  • Last commit
  • Last editor
  • Original author
  • Time to read
  • Rating
  • Edit on Git button

Note: Obviously this is a bit more advanced. The built-in theme doesn't have any extra components for most metadata ideas. The Content component passes all metadata to theme, you can manually use them there.