Working with a specific static site generator? Customize CloudCannon's documentation to suit your SSG.
Select your preferred SSG
Showing docs
{
selected_name = 'Astro';
selected_icon = '/documentation/static/ssgs/astro.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-astro" aria-label="Astro" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Astro', 'icon': '/documentation/static/ssgs/astro.svg'})" x-show="selected_name !== 'Astro'">
Astro
{
selected_name = 'Bridgetown';
selected_icon = '/documentation/static/ssgs/bridgetown.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-bridgetown" aria-label="Bridgetown" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Bridgetown', 'icon': '/documentation/static/ssgs/bridgetown.svg'})" x-show="selected_name !== 'Bridgetown'">
Bridgetown
{
selected_name = 'Docusaurus';
selected_icon = '/documentation/static/ssgs/docusaurus.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-docusaurus" aria-label="Docusaurus" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Docusaurus', 'icon': '/documentation/static/ssgs/docusaurus.svg'})" x-show="selected_name !== 'Docusaurus'">
Docusaurus
{
selected_name = 'Eleventy';
selected_icon = '/documentation/static/ssgs/eleventy.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-eleventy" aria-label="Eleventy" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Eleventy', 'icon': '/documentation/static/ssgs/eleventy.svg'})" x-show="selected_name !== 'Eleventy'">
Eleventy
{
selected_name = 'Gatsby';
selected_icon = '/documentation/static/ssgs/gatsby.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-gatsby" aria-label="Gatsby" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Gatsby', 'icon': '/documentation/static/ssgs/gatsby.svg'})" x-show="selected_name !== 'Gatsby'">
Gatsby
{
selected_name = 'Hugo';
selected_icon = '/documentation/static/ssgs/hugo.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-hugo" aria-label="Hugo" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Hugo', 'icon': '/documentation/static/ssgs/hugo.svg'})" x-show="selected_name !== 'Hugo'">
Hugo
{
selected_name = 'Jekyll';
selected_icon = '/documentation/static/ssgs/jekyll.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-jekyll" aria-label="Jekyll" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Jekyll', 'icon': '/documentation/static/ssgs/jekyll.svg'})" x-show="selected_name !== 'Jekyll'">
Jekyll
{
selected_name = 'Lume';
selected_icon = '/documentation/static/ssgs/lume.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-lume" aria-label="Lume" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Lume', 'icon': '/documentation/static/ssgs/lume.svg'})" x-show="selected_name !== 'Lume'">
Lume
{
selected_name = 'MkDocs';
selected_icon = '/documentation/static/ssgs/mkdocs.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-mkdocs" aria-label="MkDocs" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'MkDocs', 'icon': '/documentation/static/ssgs/mkdocs.svg'})" x-show="selected_name !== 'MkDocs'">
MkDocs
{
selected_name = 'Next.js';
selected_icon = '/documentation/static/ssgs/nextjs.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-nextjs" aria-label="Next.js" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Next.js', 'icon': '/documentation/static/ssgs/nextjs.svg'})" x-show="selected_name !== 'Next.js'">
Next.js
{
selected_name = 'Nuxt';
selected_icon = '/documentation/static/ssgs/nuxtjs.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-nuxt" aria-label="Nuxt" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Nuxt', 'icon': '/documentation/static/ssgs/nuxtjs.svg'})" x-show="selected_name !== 'Nuxt'">
Nuxt
{
selected_name = 'Static';
selected_icon = '/documentation/static/ssgs/statik.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-static" aria-label="Static" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Static', 'icon': '/documentation/static/ssgs/statik.svg'})" x-show="selected_name !== 'Static'">
Static
{
selected_name = 'SvelteKit';
selected_icon = '/documentation/static/ssgs/sveltekit.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-sveltekit" aria-label="SvelteKit" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'SvelteKit', 'icon': '/documentation/static/ssgs/sveltekit.svg'})" x-show="selected_name !== 'SvelteKit'">
SvelteKit
{
selected_name = 'Custom';
selected_icon = '/documentation/static/ssgs/custom.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-other" aria-label="Custom" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Custom', 'icon': '/documentation/static/ssgs/custom.svg'})" x-show="selected_name !== 'Custom'">
Custom
Great! We'll show you documentation relevant to . You can change this any time using the dropdown in the navigation bar.
CloudCannon supports embedding rich Snippets in Markdown content when using the CloudCannon Content Editor. Once configured, Snippets in your content will be presented as blocks in rich text views, with the ability to add them as Snippets via the toolbar:
To start configuring Snippets in your Eleventy content, a Snippet configuration must be imported using the _snippets_imports
key in your CloudCannon global configuration file.
Currently, CloudCannon supports Snippets in the Nunjucks and Liquid templating languages, which can imported with the eleventy_nunjucks
and eleventy_liquid
keys:
YAML JSON JavaScript
_snippets_imports :
eleventy_nunjucks : true
eleventy_liquid : true
Import the Eleventy Nunjucks Snippets.
Import the Eleventy Liquid Snippets.
{
"_snippets_imports" : {
"eleventy_nunjucks" : true ,
"eleventy_liquid" : true
}
}
Import the Eleventy Nunjucks Snippets.
Import the Eleventy Liquid Snippets.
module. exports = {
_snippets_imports : {
eleventy_nunjucks : true ,
eleventy_liquid : true
}
} ;
Import the Eleventy Nunjucks Snippets.
Import the Eleventy Liquid Snippets.
CloudCannon provides support for the raw
tag out of the box for both the eleventy_nunjucks
and eleventy_liquid
Snippet imports. If this isn't desired, you can exclude this snippet like so:
YAML JSON JavaScript
_snippets_imports :
eleventy_nunjucks :
exclude :
- eleventy_nunjucks_raw
eleventy_liquid :
exclude :
- eleventy_liquid_raw
Exclude the Nunjucks raw tag.
Exclude the Liquid raw tag.
{
"_snippets_imports" : {
"eleventy_nunjucks" : {
"exclude" : [
"eleventy_nunjucks_raw"
]
} ,
"eleventy_liquid" : {
"exclude" : [
"eleventy_liquid_raw"
]
}
}
}
Exclude the Nunjucks raw tag.
Exclude the Liquid raw tag.
module. exports = {
_snippets_imports : {
eleventy_nunjucks : {
exclude : [
"eleventy_nunjucks_raw"
]
} ,
eleventy_liquid : {
exclude : [
"eleventy_liquid_raw"
]
}
}
} ;
Exclude the Nunjucks raw tag.
Exclude the Liquid raw tag.
By default, CloudCannon will show the snippet
toolbar action in the content editor if snippets are available.
If you have already customized which options are available via _editables
in your CloudCannon config, you will need to include snippet: true
for Snippets to be available. See the Editables options documentation for more details.
After importing the eleventy_liquid
Snippets configurations, any custom liquid tags in your content will be displayed in the Content Editor as an Unknown Shortcode
or Unknown shortcode pair
. The same is true for eleventy_nunjucks
and nunjuck tags. This allows an editor to move and delete a Snippet, but prevents editing of its arguments or content:
To enable editing and provide the custom Snippet in the toolbar, your custom Snippet must be configured using the _snippets
object in your CloudCannon global config file. CloudCannon Snippets can be built from scratch to support nearly any syntax or SSG, but importing a Snippet configuration provides a set of snippet templates for common use cases in Eleventy.
To help illustrate configuring custom Snippets, we will first cover a few examples. First, let's look a custom tint
Snippet on our Eleventy site that takes a string and applies a color to it:
# My Post
{% tint "#ff0000" %}This text should be red{% endtint %}
The first thing we need to do is decide which Snippet template to use, which we can determine from the following aspects:
First, we want to configure this shortcode for the Nunjucks
templating language
Next, this is an Eleventy "shortcode" rather than an "include" or other tag
Lastly, in Eleventy terms this is a "paired" shortcode, since it has a start and an end tag that wrap some content.
Looking at the list of snippet templates further down this page, this means we should configure this snippet using the eleventy_nunjucks_paired_shortcode_positional_args
template. A full example configuration for this Snippet thus might look like the following:
YAML JSON JavaScript
_snippets_imports :
eleventy_nunjucks : true
_snippets :
eleventy_tint :
template : eleventy_nunjucks_paired_shortcode_positional_args
inline : true
preview :
text : Tint
definitions :
shortcode_name : tint
content_key : inner_text
positional_args :
- editor_key : tint_color
type : string
_inputs :
tint_color :
type : color
inner_text :
comment : This text will be tinted
{
"_snippets_imports" : {
"eleventy_nunjucks" : true
} ,
"_snippets" : {
"eleventy_tint" : {
"template" : "eleventy_nunjucks_paired_shortcode_positional_args" ,
"inline" : true ,
"preview" : {
"text" : "Tint"
} ,
"definitions" : {
"shortcode_name" : "tint" ,
"content_key" : "inner_text" ,
"positional_args" : [
{
"editor_key" : "tint_color" ,
"type" : "string"
}
]
} ,
"_inputs" : {
"tint_color" : {
"type" : "color"
} ,
"inner_text" : {
"comment" : "This text will be tinted"
}
}
}
}
}
module. exports = {
_snippets_imports : {
eleventy_nunjucks : true
} ,
_snippets : {
eleventy_tint : {
template : "eleventy_nunjucks_paired_shortcode_positional_args" ,
inline : true ,
preview : {
text : "Tint"
} ,
definitions : {
shortcode_name : "tint" ,
content_key : "inner_text" ,
positional_args : [
{
editor_key : "tint_color" ,
type : "string"
}
]
} ,
_inputs : {
tint_color : {
type : "color"
} ,
inner_text : {
comment : "This text will be tinted"
}
}
}
}
} ;
Each snippet definition lives under a top level key, eleventy_tint
in this example. This is the unique name that CloudCannon uses to identify this snippet, but is otherwise unused in the shortcode configuration itself.
We specify the template that this snippet should inherit from, and also specify that it is an inline
snippet, since it can live anywhere in the content (such as in the middle of a sentence).
In the preview
object we configure how this snippet is displayed while editing, using the CloudCannon card preview options .
In definitions
we need to specify some values that are required for the template we picked. For the eleventy_nunjucks_paired_shortcode_positional_args
template, we need to specify:
The shortcode_name
— in this case we're configuring our tint
shortcode
The content_key
— this controls the key that CloudCannon will use to edit the text in between the start and end tags of the shortcode.
The positional_args
— for our tint
shortcode we need to configure that the first argument should be captured with the key tint_color
Finally, we can specify any other keys from the CloudCannon configuration cascade here. In this example, we configure the inputs for the keys that this snippet will generate. With that in place, we can now add and edit our tint shortcode anywhere on our site.
Next, let's quickly look at a shortcode with a different syntax:
# My Post
{% include 'callout' type: 'info' message: 'This is my shortcode' %}
This time, we have an unpaired Liquid include that takes type
and message
argument keys. This syntax matches the eleventy_liquid_include
template.
In CloudCannon, we could configure this snippet using the following global configuration:
YAML JSON JavaScript
_snippets_imports :
eleventy_liquid : true
_snippets :
callout :
template : eleventy_liquid_include
inline : false
preview :
text : Callout
definitions :
include_name : callout
named_args :
- source_key : type
editor_key : label
type : string
- editor_key : message
type : string
_inputs :
label :
type : select
options :
values :
- info
- warning
- error
{
"_snippets_imports" : {
"eleventy_liquid" : true
} ,
"_snippets" : {
"callout" : {
"template" : "eleventy_liquid_include" ,
"inline" : false ,
"preview" : {
"text" : "Callout"
} ,
"definitions" : {
"include_name" : "callout" ,
"named_args" : [
{
"source_key" : "type" ,
"editor_key" : "label" ,
"type" : "string"
} ,
{
"editor_key" : "message" ,
"type" : "string"
}
]
} ,
"_inputs" : {
"label" : {
"type" : "select" ,
"options" : {
"values" : [
"info" ,
"warning" ,
"error"
]
}
}
}
}
}
}
module. exports = {
_snippets_imports : {
eleventy_liquid : true
} ,
_snippets : {
callout : {
template : "eleventy_liquid_include" ,
inline : false ,
preview : {
text : "Callout"
} ,
definitions : {
include_name : "callout" ,
named_args : [
{
source_key : "type" ,
editor_key : "label" ,
type : "string"
} ,
{
editor_key : "message" ,
type : "string"
}
]
} ,
_inputs : {
label : {
type : "select" ,
options : {
values : [
"info" ,
"warning" ,
"error"
]
}
}
}
}
}
} ;
This should now be familiar, but with a few changes:
We want this snippet to be a block-level element in the editor, so we set inline
to false
.
Since this include does not have an end tag, we have no content_key
Instead of positional_args
, we now have named_args
Configuring named arguments uses most of the same options as the positional arguments earlier, but here we can additionally specify source_key
and editor_key
separately. In this example, we want the key in our shortcode to be type
, but tell CloudCannon to treat that value as the label
key, which we then configure using our inputs configuration.
The following options are available for Eleventy snippets:
The variables required for the selected template.
Whether this Snippet can appear inline (within a sentence). Defaults to false
, which will treat this Snippet as a block-level element in the content editor.
The first step to configure your custom Snippet is to identify which Snippet template to use, as each Snippet template requires a set of definitions
keys to be configured. The following Snippet templates are available:
# eleventy_nunjucks_shortcode_positional_args
{% custom_shortcode arg1 arg2 %}
# eleventy_liquid_shortcode_positional_args
{% custom_shortcode arg1, arg2 %}
Example config
YAML JSON JavaScript
_snippets :
custom_snippet :
template : eleventy_nunjucks_shortcode_positional_args
inline : false
preview :
text : My Custom Snippet
definitions :
shortcode_name : custom_shortcode
positional_args :
- editor_key : argument_one
type : string
- editor_key : argument_two
type : string
{
"_snippets" : {
"custom_snippet" : {
"template" : "eleventy_nunjucks_shortcode_positional_args" ,
"inline" : false ,
"preview" : {
"text" : "My Custom Snippet"
} ,
"definitions" : {
"shortcode_name" : "custom_shortcode" ,
"positional_args" : [
{
"editor_key" : "argument_one" ,
"type" : "string"
} ,
{
"editor_key" : "argument_two" ,
"type" : "string"
}
]
}
}
}
}
module. exports = {
_snippets : {
custom_snippet : {
template : "eleventy_nunjucks_shortcode_positional_args" ,
inline : false ,
preview : {
text : "My Custom Snippet"
} ,
definitions : {
shortcode_name : "custom_shortcode" ,
positional_args : [
{
editor_key : "argument_one" ,
type : "string"
} ,
{
editor_key : "argument_two" ,
type : "string"
}
]
}
}
}
} ;
Definitions
The name of your shortcode, as used in your Eleventy content files.
An ordered list of each argument the shortcode takes.
# eleventy_nunjucks_paired_shortcode_positional_args
{% custom_shortcode arg1, arg2 %} content {% endcustom_shortcode %}
# eleventy_liquid_paired_shortcode_positional_args
{% custom_shortcode arg1 arg2 %} content {% endcustom_shortcode %}
Example config
YAML JSON JavaScript
_snippets :
custom_snippet :
template : eleventy_liquid_paired_shortcode_positional_args
inline : false
preview :
text : My Custom Snippet
definitions :
shortcode_name : custom_shortcode
content_key : custom_key
positional_args :
- editor_key : argument_one
type : string
- editor_key : argument_two
type : string
{
"_snippets" : {
"custom_snippet" : {
"template" : "eleventy_liquid_paired_shortcode_positional_args" ,
"inline" : false ,
"preview" : {
"text" : "My Custom Snippet"
} ,
"definitions" : {
"shortcode_name" : "custom_shortcode" ,
"content_key" : "custom_key" ,
"positional_args" : [
{
"editor_key" : "argument_one" ,
"type" : "string"
} ,
{
"editor_key" : "argument_two" ,
"type" : "string"
}
]
}
}
}
}
module. exports = {
_snippets : {
custom_snippet : {
template : "eleventy_liquid_paired_shortcode_positional_args" ,
inline : false ,
preview : {
text : "My Custom Snippet"
} ,
definitions : {
shortcode_name : "custom_shortcode" ,
content_key : "custom_key" ,
positional_args : [
{
editor_key : "argument_one" ,
type : "string"
} ,
{
editor_key : "argument_two" ,
type : "string"
}
]
}
}
}
} ;
Definitions
The name of your shortcode, as used in your Eleventy content files.
The key to use in the data panel for editing the inner contents of the shortcode.
An ordered list of each argument the shortcode takes.
# Only supported in Nunjucks
# eleventy_nunjucks_shortcode_named_args
{% custom_shortcode arg="value" %}
Example config
YAML JSON JavaScript
_snippets :
custom_snippet :
template : eleventy_nunjucks_shortcode_named_args
inline : false
preview :
text : My Custom Snippet
definitions :
shortcode_name : custom_shortcode
named_args :
- editor_key : arg
type : string
{
"_snippets" : {
"custom_snippet" : {
"template" : "eleventy_nunjucks_shortcode_named_args" ,
"inline" : false ,
"preview" : {
"text" : "My Custom Snippet"
} ,
"definitions" : {
"shortcode_name" : "custom_shortcode" ,
"named_args" : [
{
"editor_key" : "arg" ,
"type" : "string"
}
]
}
}
}
}
module. exports = {
_snippets : {
custom_snippet : {
template : "eleventy_nunjucks_shortcode_named_args" ,
inline : false ,
preview : {
text : "My Custom Snippet"
} ,
definitions : {
shortcode_name : "custom_shortcode" ,
named_args : [
{
editor_key : "arg" ,
type : "string"
}
]
}
}
}
} ;
Definitions
The name of your shortcode, as used in your Eleventy content files.
A list of each key-value pair the shortcode takes.
# Only supported in Nunjucks
# eleventy_nunjucks_paired_shortcode_named_args
{% custom_shortcode arg="value" %} content {% endcustom_shortcode %}
Example config
YAML JSON JavaScript
_snippets :
custom_snippet :
template : eleventy_nunjucks_paired_shortcode_named_args
inline : false
preview :
text : My Custom Snippet
definitions :
shortcode_name : custom_shortcode
content_key : custom_key
named_args :
- editor_key : arg
type : string
{
"_snippets" : {
"custom_snippet" : {
"template" : "eleventy_nunjucks_paired_shortcode_named_args" ,
"inline" : false ,
"preview" : {
"text" : "My Custom Snippet"
} ,
"definitions" : {
"shortcode_name" : "custom_shortcode" ,
"content_key" : "custom_key" ,
"named_args" : [
{
"editor_key" : "arg" ,
"type" : "string"
}
]
}
}
}
}
module. exports = {
_snippets : {
custom_snippet : {
template : "eleventy_nunjucks_paired_shortcode_named_args" ,
inline : false ,
preview : {
text : "My Custom Snippet"
} ,
definitions : {
shortcode_name : "custom_shortcode" ,
content_key : "custom_key" ,
named_args : [
{
editor_key : "arg" ,
type : "string"
}
]
}
}
}
} ;
Definitions
The name of your shortcode, as used in your Eleventy content files.
The key to use in the data panel for editing the inner contents of the shortcode.
A list of each key-value pair the shortcode takes.
# eleventy_liquid_include
{% include 'custom_include' arg="value" %}
# eleventy_nunjucks_include
{% include 'custom_include.njk' %}
Example config
YAML JSON JavaScript
_snippets :
custom_snippet :
template : eleventy_liquid_include
inline : false
preview :
text : My Custom Include
definitions :
include_name : custom_include
named_args :
- editor_key : arg
type : string
{
"_snippets" : {
"custom_snippet" : {
"template" : "eleventy_liquid_include" ,
"inline" : false ,
"preview" : {
"text" : "My Custom Include"
} ,
"definitions" : {
"include_name" : "custom_include" ,
"named_args" : [
{
"editor_key" : "arg" ,
"type" : "string"
}
]
}
}
}
}
module. exports = {
_snippets : {
custom_snippet : {
template : "eleventy_liquid_include" ,
inline : false ,
preview : {
text : "My Custom Include"
} ,
definitions : {
include_name : "custom_include" ,
named_args : [
{
editor_key : "arg" ,
type : "string"
}
]
}
}
}
} ;
Definitions
The name of the file being included.
Supported in liquid only, a list of each key-value pair the include takes.
# eleventy_liquid_render
{% render 'custom_render' arg="value" %}
Example config
YAML JSON JavaScript
_snippets :
custom_snippet :
template : eleventy_liquid_render
inline : false
preview :
text : My Custom Render
definitions :
render_name : custom_render
named_args :
- editor_key : arg
type : string
{
"_snippets" : {
"custom_snippet" : {
"template" : "eleventy_liquid_render" ,
"inline" : false ,
"preview" : {
"text" : "My Custom Render"
} ,
"definitions" : {
"render_name" : "custom_render" ,
"named_args" : [
{
"editor_key" : "arg" ,
"type" : "string"
}
]
}
}
}
}
module. exports = {
_snippets : {
custom_snippet : {
template : "eleventy_liquid_render" ,
inline : false ,
preview : {
text : "My Custom Render"
} ,
definitions : {
render_name : "custom_render" ,
named_args : [
{
editor_key : "arg" ,
type : "string"
}
]
}
}
}
} ;
Definitions
The name of the file being rendered.
A list of each key-value pair the render takes.
# eleventy_liquid_bookshop_component
{% bookshop 'my_component' arg="value" %}
# eleventy_liquid_bookshop_include
{% bookshop_include 'my_helper' arg="value" %}
Example config
YAML JSON JavaScript
_snippets :
custom_snippet :
template : eleventy_liquid_bookshop_component
inline : false
preview :
text : My Custom Render
definitions :
component_name : my_component
named_args :
- editor_key : arg
type : string
{
"_snippets" : {
"custom_snippet" : {
"template" : "eleventy_liquid_bookshop_component" ,
"inline" : false ,
"preview" : {
"text" : "My Custom Render"
} ,
"definitions" : {
"component_name" : "my_component" ,
"named_args" : [
{
"editor_key" : "arg" ,
"type" : "string"
}
]
}
}
}
}
module. exports = {
_snippets : {
custom_snippet : {
template : "eleventy_liquid_bookshop_component" ,
inline : false ,
preview : {
text : "My Custom Render"
} ,
definitions : {
component_name : "my_component" ,
named_args : [
{
editor_key : "arg" ,
type : "string"
}
]
}
}
}
} ;
Definitions
For components, the name of the component.
For includes, the name of the include.
A list of each key-value pair the tag takes.
The following options are available for positional and named argument option objects:
Determines the key that will be used for this argument in the CloudCannon data panel.
Determines the key of the key-value pair as it appears in the shortcode.
Only used for named arguments, and will default to the editor_key
if unset.
The default value that should be used for this argument when creating a new snippet in the CloudCannon editor.
Restrict this argument to parse as the specified type. Useful to ensure booleans get parsed as the boolean value, rather than a string such as "true".
One of:
string
boolean
number
array
Whether this argument is required for the shortcode. If false
, shortcodes in your templates missing this argument will not match this snippet definition.
Defaults to false
.
Whether this argument should be omitted from the output shortcode if the value is empty.
Only used for named arguments, defaults to false
.
A list of values that this argument must be in order to match this snippet definition. Allows you to match different usages of the same shortcode to separate snippet definitions based on the value of an argument.
Output a boolean for whether this argument is present, rather than the value of the argument itself.
Only used for positional arguments.