Skip to content

Customize the templates

Jump to bottom
Ludovic Muller edited this page Mar 18, 2024 · 4 revisions

You may want to configure the look of your Trifid instance.

We will start here to define some important concepts so that you can understand how you can customize your instance the way you want.

Layout

A layout is a very basic piece of template that will need to take care of loading all other parts of the template.

It should contain the following parts:

Title

Middlewares should be able to configure the title of the page (the one that is in the <title> tag).

{{title}}

You can also do some logic to have a fallback, like this:

{{#if title}}{{title}}{{else}}Trifid{{/if}}

Body

This is where the different views will be rendered:

{{{body}}}

Header

This is how the header will be loaded.

It can be nice that the main template supports a simple way to disable this specific part to be loaded, in case one view do not need it to be loaded. Middlewares con use the disableHeader option and set it to true to disable the header part to be rendered.

This is how we can do it:

{{#unless disableHeader}}
  {{{header}}}
{{/unless}}

Footer

This is how the footer will be loaded.

Same as the header, make sure that middlewares can disable the render of the footer using the disableFooter option, by setting it to true.

This is how we can do it:

{{#unless disableFooter}}
  {{{footer}}}
{{/unless}}

Example

This is an example of layout:

<html>

  <head>
    <meta charset="utf-8" />
    <title>{{#if title}}{{title}}{{else}}Trifid{{/if}}</title>
    {{#each styles}}
      <link rel="stylesheet" href="{{this}}" />
    {{/each}}
  </head>

  <body>
    {{#unless disableHeader}}
      {{{header}}}
    {{/unless}}

    <main class="trifid-main">
      {{{body}}}
    </main>

    {{#unless disableFooter}}
      {{{footer}}}
    {{/unless}}

    {{#each scripts}}
      <script src="{{this}}"></script>
    {{/each}}
  </body>

</html>

View

A view is a portion of HTML code that will be rendered in the {{{ body }}} part of the layout.

You can use all Handlebars features for the rendering of your code.

Render

Each Trifid middleware will receive a render function in the trifid object they receive.

This function looks like this:

async(templatePath, context, (options = {}));

where:

  • templatePath is a string which contains the path of the view you want to load

  • context is an object that contains the input to be used for this view

  • options is an object used to configure the layout

This render function will return a string, and this is how you can use it:

import { dirname } from "path";
import { fileURLToPath } from "url";

const currentDir = dirname(fileURLToPath(import.meta.url));

const factory = (trifid) => {
  const { render } = trifid;

  return {
    defaultConfiguration: async () => {
      return {
        paths: ["/plugin/path"],
        methods: ["GET"],
      };
    },
    routeHandler: async () => {
      const handler = async (_request, reply) => {
        return reply.type("text/plain").send(
          await render(
            `${currentDir}/../views/your-view.hbs`,
            {
              name: "John Doe",
            },
            { title: "My custom page" }
          )
        );
      };
      return handler;
    },
  };
};

export default factory;

GitHub repository - Issues - Open an issue - Documentation

Clone this wiki locally