Custom Pages

Additionally to custom components, you can also define custom page types. Those are very similar to custom components with a few small differences.

Custom page structure

Instead of defining a custom page template, styles, and scripts in a single file, you need to split those into 3 different files (script and styles files aren't required). Let's say you want to create a landing page, then you would create the following three files:

  • templates/landing_page.html

  • css/landing_page.scss

  • js/landing_page.js

Page declaration

To connect a custom page, you need to add an entry to the pages array in the template.config.js configuration file.

  • name (required) - the name of the page, used to load the template files

  • viewName (required) - the view name of the page, will be displayed in the editor

  • type (required) - the type of the custom page, can be page, post, or home (custom homepage)

  • includePostJs - whether to include the scripts of a standard post/page (default true)

  • includePostCss - whether to include the styles of a standard post/page (default true)

  • props - an array of props the page instance will receive (same structure as component props)

Our sample landing page can be connected with the following configuration:

// template.config.js
module.exports = {
   name: 'My first template',
   pages: [
      { 
         name: 'landing_page', 
         viewName: 'Landing Page',
         type: 'page',
         props: [
            { name: 'featuredImage', viewName: 'Featured Image', type: 'image' }
         ]
      }
   ]
};

Other differences to components