GitHub

How the theme is rendered?

The theme rendering process has several steps; knowing them is very useful if you want to fully understand all the possibilities the renderer can offer.

The Publii renderer can work in two modes:

  • Single page mode
  • Full page mode

The single page mode is used for creating a post page preview pulled from the post editor level.

Full page mode is used for creating a preview and during website synchronization.

We will focus here on the full page mode; the single page mode works in a very similar way but renders only a single post page.

Rendering process

  1. Theme is validated,
  2. Site config is loaded,
  3. Translations are loaded,
  4. Renderer loads website data from database,
  5. Theme config is loaded,
  6. Theme files are loaded,
  7. Publii Handlebars helpers are registered,
  8. Theme helpers from helpers.js (if exists) are registered,
  9. Content structure is loaded and cached,
  10. Common data for all views are loaded,
  11. Partials are registered (standard and custom ones),
  12. Frontpage and its pagination are rendered,
  13. Post pages are rendered,
  14. Tag pages and its pagination are rendered,
  15. Author pages and its pagination are rendered,
  16. Error page is rendered (if used),
  17. Search page is rendered (if used),
  18. CSS is created,
  19. Config files, assets and media files are copied to the output directory,
  20. RSS and JSON feed is rendered,
  21. Sitemap is created,
  22. AMP version is rendered.

You can use custom helpers and partials in your theme.

The theme CSS is a sum of three CSS sources:

main.css + visual-overrides.js output + custom CSS

So the output from the visual-overrides.js file overrides the main.css code, but any CSS code generated by Publii can be overridden with custom CSS code that is added in the Tools section of Publii.

Subscribe

Get the latest Publii news, updates and more delivered directly to your email inbox

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at contact@tidycustoms.net. By clicking below, you agree that we may process your information in accordance with our Privacy Policy.