Configure your template strings

Last modified: April 8th, 2024

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

What are template strings?#

Template strings are a mixture of literal text and dynamic placeholders that are replaced with data. You can use template strings to populate complex strings.

Template strings are commonly used in:

Please read these articles for more specific information about the best placeholders for each use case.


Placeholders reference front matter or data values. When CloudCannon reads a placeholder, it will replace the content with the data it references.

There are two types of placeholders.

  • Data placeholder — Reads data you defined in your front matter or other data values. These placeholders use { } brackets.
  • Fixed placeholder — Reads fixed data defined by CloudCannon. These placeholders use [ ] brackets.


Placeholders support several filters. Filters occur after the placeholder key, with a | character separating each key and filter. You can use multiple filters in sequence.

Generic filters#

  • uppercase transforms text to uppercase
  • lowercase transforms text to lowercase
  • deburr converts Latin-1 Supplement and Latin Extended-A letters to basic Latin letters and removes combining diacritical marks.
  • slugify converts non-alphanumeric characters into hyphens, then collapses sequential hyphens, then removes leading/trailing and hyphens.
  • trim removes leading and trailing whitespace

Date filters#

  • year gets a 4-digit year from a date
  • month gets a 2-digit month from a date
  • day gets a 4-digit day from a date
  • time gets the time from a date, in a 12-hour format (e.g. 12:30pm)
  • timezone gets the timezone from a date
  • date_short gets a short date format (e.g. 7/07/22)
  • date_medium gets a medium date format (e.g. 7/07/2022)
  • date_long gets a long date format (e.g. 7 June 2022)
  • date_full gets a longer date format (e.g. Tuesday, 7 June 2022)
  • time gets the time (e.g. 1:00pm)
  • time_short gets a short time format (e.g. 1:00 pm)
  • time_medium gets a medium time format (e.g. 1:00:00 pm)
  • time_long gets a long time format (e.g. 1:00:00 pm NZDT)
  • time_full gets a longer time format (e.g. 1:00:00 pm New Zealand Daylight Time)

All the time and date filters format the date using the site's timezone and the user's locale.

Filters with parameters#

For some filters, you can provide extra parameters for more flexibility. Add extra parameters by including a = character after the filter name.

  • truncate removes and extra characters beyond a specified number. For example, {title|truncate=10} will resolve to the first 10 characters of a message.
  • default allows you to provide a fallback value, in case the data is empty
  • if resolves to the data, if the parameter is "truthy"
  • unless resolves to the data, if the parameter is "falsy"

Filtering examples#

Let's go through some examples for the following file:

date: 2020-01-02
message: "Hello World"
draft: false

In the above file we have four keys containing different data types: date, empty_value, message, and draft.

Here are some examples of how we can transform this data using different filters:

{date|day}-{date|month}-{date|year} {date|time} ({date|timezone}) 
// 01-02-2020 00:00am (Etc/UTC)


// Hello World

// Hello World

{empty_value|default="Nothing here!"} 
// Nothing here!

// Published

We can use multiple date filters to control the output string. This template string uses dynamic data placeholders and literal text characters, such as - and ().

We can convert text strings to uppercase and truncate the number of characters to five.

We can print the value of a key if a value exists using the if filter.

We can print the value of a key based on the value of another key using the unless filter. In this case, we print the value of message because empty_value is falsy.

We can create a fallback option when a placeholder resolves to an empty result using the default filter. In this case, "Nothing here!" is printed because empty_value contains no value.

We can use multiple filters to check if a key contains a value and create a fallback string if that key is falsy.

Filtering nested keys and arrays#

Data placeholders can reference nested keys in your front matter or other data values.

Here is an example file:

  - url: /documentation
    text: Learn more
  - url: /blog
    text: Read more
  - url:
  description: Description goes here
    - 'sales'
    - 'documentation'

In the above file, we have several nested keys and arrays. You can reference these keys in a template string by using the relative path of the key, by specifying the position within an array, or by searching each item in an array using [*].

Here are some examples of how we can transform this data using different filters:

When you use [*] to reference each item within an array, CloudCannon will join the final output into a single string, separating each value with a comma and a space.

// Description goes here

// Learn more


{links[*].text|default="No text"} 
// Learn more, Read more, No text

We can print the value of a nested key.

We can print the value of a specific key within an array.

We can print the value of every item within an array and filter the result with uppercase. CloudCannon automatically joins the final output into a single string.

We can search an array using and print the value of a key each time it appears in that array. If one key is empty, we can use a fallback value using the default filter.

Open in a new tab