Template Configuration

The template.config.js file is used to define the template and to enhance basic Phaistos content types.

A basic template config file has the following structure:

module.exports = {
   name: 'My first template',
   variables: [/* list of custom variables */],
   fontPreloads: [ /* list of fonts to preload */ ],
   components: [ /* list of template components */ ],
   pages: [ /* list of custom template pages */ ],
   pageSize: 50,
   sidebarPosition: 'pre'
}

Variables

The variables array can be used to defined custom variables that can be set in the Phaistos administration. Every variable has three required properties:

  • type - 'color' or 'label', color variables are available in all .scss files and are referenced by the name (e.g. $primary), label variables can be used in all template files and can be referenced by the name prefixed with a $ sign (e.g. {{$nextPageLabel}}),

  • key - the variable name,

  • name - the view name,

  • default - the default variable value.

For example, to add a customizable primary color and a next page label, you can use the following variables array:

[
   { type: 'color', key: 'primary', name: 'Primary Color', default: '#4282f2' },
   { type: 'label', key: 'nextPageLabel', title: 'Next Page Label', default: 'Next' }
]

Font preloads

The font preloads array can be used to add a <link rel="preload"> tag and preload the fonts before the stylesheets are loaded, for example:

['https://fonts.gstatic.com/s/worksans/v8/QGYsz_wNahGAdqQ43Rh_fKDp.woff2']

Note: Only woff2 fonts can be preloaded.

Components and custom pages

See components and custom pages documentation.

Page size

The pageSize property defines how many posts are loaded per page.

The sidebarPosition (either 'pre' or 'post') can be used to choose whether the sidebar should be rendered before, or after the main content.