Extending in app navigation with Editor Links

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 prefixed with cloudcannon: and match the URL structure of the CloudCannon app, for example:

index.html
<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:

index.html
<!-- Inputs -->
<a href="cloudcannon:#title">
  Edit the title
</a>

<!-- Arrays -->
<a href="cloudcannon:#array[1]">
  Edit the first array item
</a>

<a href="cloudcannon:#array[+]">
  Create a new item in an array
</a>

<!-- Inputs within an Object -->
<a href="cloudcannon:#object.title">
  Edit a variable within an object
</a>

<a href="cloudcannon:#object.array">
  Edit an array within an object
</a>

<!-- Inputs within an Array inside an Object -->
<a href="cloudcannon:#object.array[0].title">
  Edit the title of the first array item within an object
</a>

Instead of only anchor tags, any element can have an Editor Link by using the data-cms-editor-link attribute, for example:

index.html
<h1 data-cms-editor-link="cloudcannon:#title">
  HTML
</h1>

Posts

To have edit links for posts in a list, add an Editor Link in the blog post loop:

posts.html
<ul class="blog-posts">
  {% for post in site.posts %}
    <li class="blog-post">
      <h3>{{ post.title }}</h3>
      <!-- Editor Link -->
      <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>
Screenshot of visual editor with editor links to edit blog posts

Collection Items

To have an edit link on a collection item page, add the following to the page:

item.html
<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:

item.html
<a href="cloudcannon:collections/{{ site.collections_dir }}/{{ page.relative_path }}" class="editor-link">Edit</a>
Note

When generating Editor Links in Jekyll, collection items should use relative_path, while posts and pages should use path.

Screenshot of a blog post in CloudCannon with an editor link

Open in modal or sidebar

Front matter can be highlighted within the data editor in the sidebar, or displayed standalone in a modal popup. To change how an editor link opens:

  1. Add the data-cms-editor-link-style attribute
  2. Set the attribute’s value to modal or sidebar (optional)
index.html
<a href="cloudcannon:#title" data-cms-editor-link-style="modal">
  Edit the title
</a>

<h1 data-cms-editor-link="cloudcannon:#title" data-cms-editor-link-style="modal">
  HTML
</h1>
Note

You can edit hidden fields by using modal-style editor links. The hidden field will be highlighted in the pop-up.

Screenshot of a modal style editor link in the CloudCannon visual editor

Styling

You can give Editor Links our default styles by adding the cms-editor-link class. This provides a seamless experience alongside Editable Regions by using the same styles.

index.html
<a href="cloudcannon:#title" class="cms-editor-link">
  Edit the title
</a>

<h1 data-cms-editor-link="cloudcannon:#title" class="cms-editor-link">
  HTML
</h1>
Note

cms-editor-link-dirty is also handled with the default styles.

To hide Editor Links on your live site, give them an HTML class (e.g. class="editor-link"), then in your CSS add the following code:

main.css
.editor-link {
  display: none;
}
Was this article helpful? or Suggest an improvement >

Related articles