Page index and tree

How to add a page

To add a page, simply create a new .pug file in the /content/templates folder. Here is a basic page setup you can use that will always work, regardless of folders/paths:

extends /templates_layouts/master

block body
    // Your code here

Adding a page structure

You can nest .pug templates in folders. The structure will be reflected on the index page and in the page tree (see next section).

In the basic tutorial we are making an invoicing app. There is an invoices page, a reports page, a settings page etc.

Structurally, the application looks like this:

  • Authentication
    • Sign in
    • Sign in (empty)
  •  Invoices
    • List of invoices
    • Detail of invoice
  • Reports
    • List of invoices
    • Detail of invoice
  • Settings
    • Overview of settings
    • Detail settings

If you create a folder structure that looks like this, you will see the pages you need in the tree.

  • authentication (folder)
    • sign-in.pug
    • sign-in--error.pug
  • invoices (folder)
    • overview.pug
    • detail.pug
  • reports (folder)
    • overview.pug
    • detail.pug
  •  settings (folder)
    • overview.pug
    • detail.pug

(Note that due to an outstanding bug, it is not a good idea to call your pages index.pug, see here)

Showing and hiding the page tree

The page tree can be shown and hidden at any time using the shortcut Ctrl + M (or Ctrl + B on Windows).

This will show the page tree. If you are on mobile and don’t have an explicit keyboard, you will have to link to a page where the +renderPageTree mixin is used.

The page tree remember its state across pages. If you collapsed a folder, it will remember your choice as you navigate through the prototype.

Working with page states

Imagine you have a page called sign-in.pug. When you add another template called sign-in--error.pug (note the double dash), it will show up as a page state.

This is useful for showing the different states a page can be in.