Rocket Logo Rocket Guides Docs Blog Toggle darkmode

Presets: Using templates

The template system allows for very granular control of how individual parts will be merged, overwritten, or reordered.

On top of the Overriding you can do with the presets alone templates have another superpower and that is automatically joining of parts.

It is generally preferred to use Joining Blocks before overriding.

Adding html to the html head

Often you will want to load some more fonts or an additional CSS file. You can do so by adding a file to the head Joining Block.

👉 docs/_includes/_joiningBlocks/head/additional-styles.njk

<link rel="stylesheet" href="/_merged_assets/additional-styles.css" />

This will add the html at the bottom of the head.

Adding JavaScript to the bottom of the body

For executing a script you can use the bottom Joining Block.

👉 docs/_includes/_joiningBlocks/bottom/my-script.njk

  console.log('hello world');

If you look into docs/_merged_includes/_joiningBlocks/bottom/ you will see a few scripts

  • 10-init-navigation.njk
  • 180-service-worker-update.njk
  • 190-google-analytics.njk
  • my-script.njk

File names without an order/number in front are considered with the order number 10 000 so the generally end up at the bottom. If you need something even below unordered items you can use numbers that are greater then 10 000.

Note: For unordered files there is no guarantee of any order.

Controlling the order

In the html <head> order is usually not that important but when adding script it does.

If you look into the dom then you see that its order matches with the file system order.

Now if you want to move your script in-between init-nagivation and service-worker-update then you can rename your file to

👉 docs/_includes/_joiningBlocks/bottom/20-my-script.njk

which brings the order to

  • 10-init-navigation.njk
  • 20-my-script.njk
  • 180-service-worker-update.njk
  • 190-google-analytics.njk

More information

For more details please see the Joining Blocks Docs