Saber uses the file-system as the router API. Files with .js, .vue or .md extension inside ./pages folder will automatically become web pages, .js and .vue pages are treated as Vue components, .md files will also be converted to Vue components internally.

Try this pages/

Hello __Saber__!

And run saber in your project:

page preview

  • ./pages/ maps to /
  • ./pages/ maps to /about.html
  • ./pages/docs/ maps to /docs
  • and so on..

Note: If you don't like the .html suffix, feel free to customize the permalinks.

A page is made of two parts, the attributes (optional) and the content. The attributes is a mechanism for the page component to communicate with its layout component.

To define attributes for Markdown page you can use the front matter:

title: Hello World
layout: page

This is a page.

Then this page will use the page layout from your layouts directory or pre-configured theme directory. The page data will be available in the layout component as page prop, you can access the attributes via page.attributes. The page content will be available as the default slot, you can use it like this: <slot name="default"></slot>. Check out Layouts for more details.

In a .vue or .js page, you can't use front matter, instead you can use ES export keyword to export the attributes:

  <div>This is a page.</div>

export const attributes = {
  title: 'Hello World',
  layout: 'page'

Note that the value of attributes must be a literal.


Posts live inside ./pages/_posts, they are just a special kind of pages. The default value of page.attributes.type will be post instead of page.

Check out Page Interface for more details.

Last Edited on May 11, 2019 Edit This Page on GitHub