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.
Editor Links allow you to link to other sections of the CloudCannon interface from within the Visual Editor . Use them to create edit buttons for your collection items and blog posts to quickly navigate the app. You can also add front matter Editor Links to open the front matter Editor at specified fields.
Editor Links are using the CloudCannon link protocol .
Create a link to open a data editor at a specific input:
< a href = " cloudcannon:#title" >
Edit the title
</ a>
< a href = " cloudcannon:#array[1]" >
Edit the first array item
</ a>
< a href = " cloudcannon:#array[+]" >
Create a new item in an array
</ a>
< a href = " cloudcannon:#object.title" >
Edit a variable within an object
</ a>
< a href = " cloudcannon:#object.array" >
Edit an array within an object
</ a>
< a href = " cloudcannon:#object.array[0].title" >
Edit the title of the first array item within an object
</ a>
Front matter can be highlighted within the data editor in the sidebar, or displayed standalone in a panel (default). To change open an editor link in the sidebar:
Add the data-cms-bind-style
attribute
Set the attribute’s value to sidebar (optional)
< a href = " cloudcannon:#title" data-cms-bind-style = " sidebar" >
Edit the title
</ a>
To have edit links for posts in a list, add an Editor Link in the blog post loop:
< a href = " cloudcannon:collections/staff" >
Edit all staff
</ a>
< a href = " cloudcannon:collections/staff/jane-doe.md" >
Edit Jane Doe
</ a>
< a href = " cloudcannon:collections/posts/welcome-post.md" >
Edit Welcome Post
</ a>
< a href = " cloudcannon:status" >
Link to Site Status and Recent Activity
</ a>
Front matter Editor Links are prefixed with cloudcannon:#
and use a common syntax to reference them, for example:
< a href = " cloudcannon:#title" >
Edit the title
</ a>
< a href = " cloudcannon:#array[1]" >
Edit the first array item
</ a>
< a href = " cloudcannon:#array[+]" >
Create a new item in an array
</ a>
< a href = " cloudcannon:#object.title" >
Edit a variable within an object
</ a>
< a href = " cloudcannon:#object.array" >
Edit an array within an object
</ a>
< a href = " cloudcannon:#object.array[0].title" >
Edit the title of the first array item within an object
</ a>
To have edit links for posts in a list, add an Editor Link in the blog post loop:
< ul class = " blog-posts" >
{% for post in site.posts %}
< li class = " blog-post" >
< h3> {{ post.title }}</ h3>
< a href = " cloudcannon:collections/{{ post.path }}" class = " editor-link" > Edit post</ a>
< p> {{ post.excerpt }}</ p>
< a href = " {{ post.url }}" > Read more</ a>
</ li>
{% endfor %}
</ ul>
< ul class = " blog-posts" >
{{ range .Pages }}
< li class = " blog-post" >
< h3> {{ .Title }}</ h3>
< a href = " cloudcannon:/collections/content/{{ .File.Path }}" class = " editor-link" > Edit post</ a>
< p> {{ .Summary }}</ p>
< a href = " {{ .RelPermalink }}" > Read more</ a>
</ li>
{{ end }}
</ ul>
< ul class = " blog-posts" >
{% for post in collections.posts %}
< li class = " blog-post" >
< h3> {{ post.title }}</ h3>
< a href = " cloudcannon:/collections/content/{{ .File.Path }}" class = " editor-link" > Edit post</ a>
< p> {{ post.excerpt }}</ p>
< a href = " {{ post.url }}" > Read more</ a>
< a href = " cloudcannon:collections/{{ post.inputPath | replace('./', '') }}" class = " editor-link" > Edit post</ a>
</ li>
{% endfor %}
</ ul>
See other SSG examples and implement with your SSG's templating.
To have an edit link on a collection item page, add the following to the page:
< a href = " cloudcannon:collections/{{ page.relative_path }}" class = " editor-link" > Edit</ a>
If you are using a custom collections_dir
include site.collections_dir
in your editor link:
< a href = " cloudcannon:collections/{{ site.collections_dir }}/{{ page.relative_path }}" class = " editor-link" > Edit</ a>
When generating Editor Links in Jekyll, collection items should use relative_path, while posts and pages should use path.
< a href = " cloudcannon:collections/content/{{ .File.Path }}" class = " editor-link" > Edit</ a>
Replace 'content' in the href
above with the name of your content directory.
< a href = " cloudcannon:collections/{{ page.inputPath | replace('./', '') }}" class = " editor-link" > Edit</ a>
See other SSG examples and implement with your SSG's templating.