Collections

The collections option allows you to define groups of related content in your project. It’s an array of objects, each representing a collection with specific properties.

There are two types of collections, as well as dividers to visually separate sections in your navigation. These can be mixed as needed.

Collection Types

There are two main types of collections in Sveltia CMS:

• Entry Collections: Used for managing multiple entries of similar content, such as blog posts, tags, products and events. Each entry is stored as a separate file in a specified folder.
• File Collections: Used for managing individual files, such as static pages or configuration files. Each file is defined explicitly in the configuration.

Additionally, there is a special type of file collection:

• Singleton Collection: Defined at the top level of the config file, singletons are used for managing unique content items, such as site settings or homepage content.

Designing Content Models with Collections

In Sveltia CMS, collections are fundamental building blocks for creating content models. They help organize and structure your content effectively. See the Content Modeling Guide for more information on designing effective content models using collections.

Creating Collections

Collections are defined in your configuration file under the collections property. Here’s how to create both entry and file collections:

YAML

collections:
  # Entry Collection for Blog Posts
  - name: posts
    label: Blog Posts
    folder: content/posts
    fields:
      - { name: title, label: Title }
      - { name: body, label: Body, widget: richtext }
  # File Collection for Static Pages
  - name: pages
    label: Pages
    files:
      - name: about
        label: About Page
        file: content/pages/about.md
        fields:
          - { name: title, label: Title }
          - { name: body, label: Body, widget: richtext }

TOML

[[collections]]
name = "posts"
label = "Blog Posts"
folder = "content/posts"

[[collections.fields]]
name = "title"
label = "Title"

[[collections.fields]]
name = "body"
label = "Body"
widget = "richtext"

[[collections]]
name = "pages"
label = "Pages"

[[collections.files]]
name = "about"
label = "About Page"
file = "content/pages/about.md"

[[collections.files.fields]]
name = "title"
label = "Title"

[[collections.files.fields]]
name = "body"
label = "Body"
widget = "richtext"

JSON

{
  "collections": [
    {
      "name": "posts",
      "label": "Blog Posts",
      "folder": "content/posts",
      "fields": [
        { "name": "title", "label": "Title" },
        { "name": "body", "label": "Body", "widget": "richtext" }
      ]
    },
    {
      "name": "pages",
      "label": "Pages",
      "files": [
        {
          "name": "about",
          "label": "About Page",
          "file": "content/pages/about.md",
          "fields": [
            { "name": "title", "label": "Title" },
            { "name": "body", "label": "Body", "widget": "richtext" }
          ]
        }
      ]
    }
  ]
}

JavaScript

{
  collections: [
    {
      name: "posts",
      label: "Blog Posts",
      folder: "content/posts",
      fields: [
        { name: "title", label: "Title" },
        { name: "body", label: "Body", widget: "richtext" },
      ],
    },
    {
      name: "pages",
      label: "Pages",
      files: [
        {
          name: "about",
          label: "About Page",
          file: "content/pages/about.md",
          fields: [
            { name: "title", label: "Title" },
            { name: "body", label: "Body", widget: "richtext" },
          ],
        },
      ],
    },
  ],
}

The two collections defined above will appear in the Sveltia CMS interface as separate sections for managing blog posts and static pages. These two collection types can be mixed and matched as needed to suit your content management requirements.

It’s easy to distinguish between entry and file collections in the configuration file. Entry collections use the folder property to specify the directory where entries are stored, while file collections use the files property to define individual files.

There is no hard limit to the number of collections you can define in your configuration file. You can create as many collections as needed to effectively organize and manage your content. However, for optimal user experience, it’s recommended to keep the number of collections manageable and logically grouped.

Customizing Collection List Appearance

You can customize the appearance of your collection list in Sveltia CMS by adding icons and dividers. This helps improve navigation and organization, especially when you have multiple collections.

Icons

You can specify an icon for each collection for easy identification in the collection list. You don’t need to install a custom icon set because the Material Symbols font file is already loaded for the application UI. Just pick one of the 2,500+ icons:

1. Visit the Material Symbols page on Google Fonts.
2. Browse and select an icon, and copy the icon name that appears at the bottom of the right pane.
3. Add it to one of your collection definitions in config.yml as the new icon property, like the example below.
4. Repeat the same steps for all the collections if desired.
5. Commit and push the changes to your Git repository.
6. Reload Sveltia CMS once the updated config file is deployed.

Here’s an example of adding an icon to an entry collection that manages tags:

YAML

collections:
  - name: tags
    label: Tags
    icon: sell
    folder: content/tags

TOML

[[collections]]
name = "tags"
label = "Tags"
icon = "sell"
folder = "content/tags"

JSON

{
  "collections": [
    {
      "name": "tags",
      "label": "Tags",
      "icon": "sell",
      "folder": "content/tags"
    }
  ]
}

JavaScript

{
  collections: [
    {
      name: "tags",
      label: "Tags",
      icon: "sell",
      folder: "content/tags",
    },
  ],
}

Dividers

With Sveltia CMS, developers can add dividers to the collection list to distinguish between different types of collections. To do so, insert a new item with the divider option set to true. In VS Code, you may receive a validation error if config.yml is treated as a Netlify CMS configuration file. You can resolve this issue by using our JSON schema.

YAML

collections:
  - name: products
    ...
  - divider: true
  - name: pages
    ...

TOML

[[collections]]
name = "products"

[[collections]]
divider = true

[[collections]]
name = "pages"

JSON

{
  "collections": [
    {
      "name": "products"
    },
    {
      "divider": true
    },
    {
      "name": "pages"
    }
  ]
}

JavaScript

{
  collections: [
    {
      name: "products",
    },
    {
      divider: true,
    },
    {
      name: "pages",
    },
  ],
}

The singleton collection also supports dividers.