CloudCannon link protocol

Last modified: March 13th, 2023

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.

CloudCannon Links allow you to reference other sections of the CloudCannon interface. These are used within Editor links and Add options.

Syntax#

CloudCannon Links are formatted with cloudcannon:{path}#{slug} and match the URL structure of the CloudCannon app.

path - string#

The relative path of the collection inside of the site url. For example https://app.cloudcannon.com/123/editor#sites/456/dashboard would become dashboard which targets the current site's dashboard.

If you want your link to be relative to https://app.cloudcannon.com/ add a ! to the start of your URL. This is used internally for linking to the templates list and using this is not recommended.

slug - string#

Modelled after JavaScripts property accessors, this is a recursive representation of your desired object target. Starting from the base of your structure, name each item as a step towards your desired object. Each object or property is separated by a dot. An array item is denoted by an open square bracket, an integer starting from 0, followed by a closing square bracket ([index]).

Linking to front matter#

By excluding the front path, the cloudcannon link is relative to the current page. This is useful for keeping your code DRY. For example:

  • cloudcannon:#title Targets the title of the current page
  • cloudcannon:#seo.title Targets the title within the seo object
  • cloudcannon:#people[0] Targets the first array item in an array named people.
  • cloudcannon:#people[0].title Targets the title of the first array item within an array named people.

Creating an array item#

A special case of slug editing is the +, by targeting an array you can trigger an item to be added to the end of the array. For example cloudcannon:#people[+] Create a new item in an array named people.

Related Articles

Open in a new tab