Navigate pages, collections, and data on your site.
The explore sidebar navigation is based on your site configuration and build information. Images and titles come from the corresponding file’s front matter.
CloudCannon groups your collections, pages, and data in the sidebar navigation. You can reorder, show/hide or regroup sections with the _collection_groups configuration.
These options are set in _config.yml on the top level. For example:
_collection_groups:
- heading: Blogging
collections:
- posts
- drafts
- heading: Other
collections:
- pages
- staff
- featuresThese options are set in your site config on the top level. For example:
CloudCannon treats top-level content sections as collections.
Note
_collection_groups:
- heading: Blogging
collections:
- posts
- drafts
- heading: Other
collections:
- pages
- staff
- features[[_collection_groups]]
heading = "Blogging"
collections = ["posts", "drafts"]
[[_collection_groups]]
heading = "Other"
collections = ["posts", "drafts", "features"]These options are set in your _data/cloudcannon.* file. For example:
module.exports = {
_collection_groups: [
{
heading: 'Blogging',
collections: ['posts', 'drafts']
},
{
heading: 'Other',
collections: [
'pages',
'staff',
'features'
]
}
]
};Set collection-level options to customize the collection lists your editors see after navigating in the sidebar.
These options are set in _config.yml on the top level. These options supplement the default configuration. For example:
collections:
staff:
output: true
cloudcannon:
collections:
staff:
_sort_key: surname
_subtext_key: role
_image_key: profile_image
_image_size: cover
_singular_name: Staff Member
_singular_key: staff_member
_disable_add: false
_icon: people
_add_options:
- name: Add Staff Member
icon: person_add
href: "cloudcannon::editor/:collections_dir/_staff/.:extension🆕"These options are set in your site config on the top level. For example:
[cloudcannon.collections.staff]
_sort_key = "surname"
_subtext_key = "role"
_image_key = "profile_image"
_image_size = "cover"
_singular_name = "Staff Member"
_singular_key = "staff_member"
_disable_add = "false"
_icon = "people"
[cloudcannon.collections.staff._add_options]
name = "Add Staff Member"
icon = "person_add"
href = "cloudcannon::editor/:collections_dir/_staff/.:extension🆕"These options are set in your _data/cloudcannon.* file. These options override the default configuration. For example:
module.exports = {
collections: {
staff: {
_sort_key: 'surname',
_subtext_key: 'role',
_image_key: 'profile_image',
_image_size: 'cover',
_singular_name: 'Staff Member',
_singular_key: 'staff_member',
_disable_add: 'false',
_icon: 'people',
_add_options: [
{
name: 'Add Staff Member',
icon: 'person_add',
href: 'cloudcannon::editor/:collections_dir/_staff/.:extension🆕'
}
]
}
}
};_sort_key
String
Must match a front matter field of the collection items. Sets the sort order of the collection.
_subtext_key
String
Defines a front matter field to use when displaying subtext on an item. Must match a front matter field of the collection items.
_image_key
String
Defines a front matter field to use when displaying an image on an item. Must match a front matter field of the collection items.
_image_size
String
Sets how images are displayed in the list. Must be unset, cover or contain.
_singular_name
String
Overrides the default singular display name of the collection.
_singular_key
String
Overrides the default singular input key of the collection.
_disable_add
Boolean
Prevents users from adding new collection items. Default is false.
_icon
String
Overrides the default collection icon with an icon from Google’s Material Icons. Must match Material Icon name.
_add_options
Array of objects
Changes the options presented in the add dropdown menu list.
Create or change actions for the add dropdown menu in the collection list in the with _add_options.
These options are set in _config.yml on the cloudcannon.collections level. For example:
cloudcannon:
collections:
posts:
_add_options:
- name: Add Post
href: "cloudcannon::editor/:collections_dir/:base_path/.:extension🆕"
- name: Add Draft
href: "cloudcannon::editor/:collections_dir/:base_path_draftify/.:extension🆕:base_path_postify/_defaults.:extension"Extended example:
cloudcannon:
collections:
staff:
_add_options:
- name: Add Staff Member
href: "cloudcannon:explore/_staff/.md🆕"
- name: Add Author
icon: edit
href: "cloudcannon:explore/_staff/.md🆕/_staff/_defaults-author.md"
offices:
_add_options:
- name: Add Office
href: "cloudcannon:explore/_offices/.md🆕"
- name: Add Office Location
icon: public
href: "cloudcannon:explore/_data/office-locations.yml"
- name: Search on Google
icon: search
href: "https://www.google.com/"These options are set in your site config on the cloudcannon.collections level. For example:
[[cloudcannon.collections.posts._add_options]]
name = "Add Post"
href = "cloudcannon::editor/:collections_dir/:base_path/.:extension🆕"
[[cloudcannon.collections.posts._add_options]]
name = "Add Draft"
href = "cloudcannon::editor/:collections_dir/:base_path_draftify/.:extension🆕:base_path_postify/_defaults.:extension"Extended example:
[[cloudcannon.collections.staff._add_options]]
name = "Add Staff Member"
href = "cloudcannon:explore/_staff/.md🆕"
[[cloudcannon.collections.staff._add_options]]
name = "Add Author"
icon = "edit"
href = "cloudcannon:explore/_staff/.md🆕/_staff/_defaults-author.md"
[[cloudcannon.collections.offices._add_options]]
name = "Add Office"
href = "cloudcannon:explore/_offices/.md🆕"
[[cloudcannon.collections.offices._add_options]]
name = "Add Office Location"
icon = "public"
href = "cloudcannon:explore/_data/office-locations.yml"
[[cloudcannon.collections.offices._add_options]]
name = "Search on Google"
icon = "search"
href = "https://www.google.com/"These options are set in your _data/cloudcannon.* file. For example:
module.exports = {
cloudcannon: {
collections: {
posts: {
_add_options: [
{
name: 'Add Post',
href: 'cloudcannon::editor/:collections_dir/:base_path/.:extension🆕'
},
{
name: 'Add Draft',
href: 'cloudcannon::editor/:collections_dir/:base_path_draftify/.:extension🆕:base_path_postify/_defaults.:extension'
}
]
}
}
}
};Extended example:
module.exports = {
cloudcannon: {
collections: {
staff: {
_add_options: [
{
name: 'Add Staff Member',
href: 'cloudcannon:explore/_staff/.md🆕'
},
{
name: 'Add Author',
icon: 'edit',
href: 'cloudcannon:explore/_staff/.md🆕/_staff/_defaults-author.md'
}
]
},
offices: {
_add_options: [
{
name: 'Add Office',
href: 'cloudcannon:explore/_offices/.md🆕'
},
{
name: 'Add Office Location',
icon: 'public',
href: 'cloudcannon:explore/_data/office-locations.yml'
},
{
name: 'Search on Google',
icon: 'search',
href: 'https://www.google.com/'
}
]
}
}
}
};Add options can include actions on the current collection, other collections, and external links.
name
String
The text displayed for the menu item.
href
String
The link that opens when the option is clicked.
The href field is formatted as an Editor Link or external link. There are a number of variables you can use to make these links more flexible:
:editor
Usually explore, is update if creating an HTML file.
:collections_dir
The collections path from the build information.
:base_path
The path the editor is currently navigated to, not including the source or :collections_dir.
:base_path_postify
Same as :base_path, with /_drafts/ changed to /_posts/.
:base_path_draftify
Same as :base_path, with /_posts/ changed to /_drafts/.
:source
The source path defined your site config.
:extension
The extension of the default content file, not prefixed with ..
The default content file is the file listed after 🆕 in your Editor Link, or the Collection Defaults file if not listed.
These options are set in the front matter of specific files and affect individual items in the collection list.
_unlisted
Boolean
Hides specific files in the collection list section (still accessible from Visual Editor and direct links).
_enabled_editors
Array of strings
Controls how your team edits specific files, use this to set a preferred editor and/or disable the others. The first value sets which editor opens from the collection list, the other values specify which editors are accessible. Available values are visual and content for the Visual Editor and Content Editor, respectively. The Source Editor is always available for those with permission.
_unlisted: true
_enabled_editors:
- visual
- content_unlisted = true
_enabled_editors = [ "visual", "content"]{
"_unlisted": true,
"_enabled_editors": ["visual", "content"]
}
