Collection

Templates and page rendering

Build pages from templates, resources, and reusable components.

Choose the task that matches what you need to do. The pages explain the relevant workflow and link to related guides and reference material. Examples use the local site garden; use your own site name and check the command’s scope before running it.

In this section

  1. 1Follow a request to its templateStart with the URL that gives an unexpected result. Check its hostname: Zotonic uses it to select a site before matching the site's dispatch rules.
  2. 2Find the template used by a pageEnable module#mod_development and open its template tools in the admin. Search for the template name and inspect the selected file and alternatives.
  3. 3Create a page layoutUse an existing site base template as your starting point. Put shared document structure in the base and page-specific markup in blocks.
  4. 4Reuse markup with includes and categoriesExtract repeated markup into a partial and pass its inputs explicitly.
  5. 5Override a module templateFind the active template and its path relative to priv/templates. Create the same relative path in your site or another active module with a higher selection priority.
  6. 6Link to resources and dispatch routesUse a resource's page URL when linking to content. This lets Zotonic account for its path and language.
  7. 7Render template values safelyChoose escaping for the value and the output context.
  8. 8Display images with mediaclassesDefine reusable image sizes in priv/templates/mediaclass.config and use them in image tags. For example, a local mediaclass can constrain an image's width:
  9. 9Translate interface textWrite the source text in English and mark static interface text for translation.
  10. 10Cache a template fragmentFirst measure the work performed by the fragment. Cache a fragment only when you know which inputs and data changes affect its output.
  11. 11Build and serve frontend assetsKeep source files such as SCSS in priv/lib-src and compiled assets in priv/lib. Use an app-level Makefile that delegates asset work to the source directory's Makefile.