Metadata

Metadata refers to Routify's internal data and can be used to add custom data to any route. This data can then be accessed without loading the component.

To add metadata, insert a comment with routify:options

<!-- routify:options index=1 -->
<!-- routify:options index=1 -->

The metadata can then be accessed through $route , $layout and $page

import { route, layout, page } from @sveltech/routify $route.meta //meta from the current page $page.meta //meta from the current page $layout.meta //meta from the closest layout
import { route, layout, page } from @sveltech/routify

$route.meta //meta from the current page
$page.meta //meta from the current page
$layout.meta //meta from the closest layout

Reserved names

title string Sets the name accessed through $page.title.
index number By default nodes are sorted by index, then filename.
bundle boolean Bundles everything in the current folder into one .js file.

Example

Using a custom published prop to filter nodes and a custom tags prop to display tags.

<!-- routify:options tags=['recipes', 'cupcakes'] --> <!-- routify:options published=true -->
<!-- routify:options tags=['recipes', 'cupcakes'] -->
<!-- routify:options published=true -->
<script> import { layout } from @sveltech/routify </script> {#each $layout.parent.children.filter(c => c.published) as node} <div class="card"> <h3>{node.title}</h3> <h5>{node.meta['tags'].join(', ')}</h5> <a href={$url(node.path)}>Goto</a> </div> {/each}
<script>
  import { layout } from @sveltech/routify
</script>

{#each $layout.parent.children.filter(c => c.published) as node}
   <div class="card">
     <h3>{node.title}</h3>
     <h5>{node.meta['tags'].join(', ')}</h5>
     <a href={$url(node.path)}>Goto</a>
   </div>
{/each}

Realworld example

Routify blog index

Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.