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
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:
If you create a folder structure that looks like this, you will see the pages you need in the tree.
(Note that due to an outstanding bug, it is not a good idea to call your pages index.pug, see here)
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.
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.