Netlify CMS Collection Yaml

README.md

Netlify CMS Collection Yaml

Using YAML, you are able to customize a workflow for content editors using the cms.

While this is a very powerful system, there are some limitations to watch out for.

Keep in mind that this is replacing the use of a database for the purposes of structuring data. So it does need to be very specific by necessity.

Important Details

• YAML is whitespace sensitive, indentation matters for correct code rendering
• Collections need to have a name
• Specify create: true if you want new collections to be able to be added
• nest fields using the list widget
• Names can only be used once
• You must specify a folder for the files to be created in.
  • A folder will be created when the collection is used for the first time
• You can wrap fields in utility fields to make it so the user can move them around in the editor
• Comments are made using #
  • Use comments to organize your code

Syntax

Review the config.yml file, it shows proper use case for yml syntax when writing your fields.

config.yml

backend:
  name: git-gateway
  branch: main

media_folder: static/images/uploads
public_folder: /images

collections:
  # Blog
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    format: "frontmatter"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string", hint:"" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }
  # Recipes
  - name: "recipes"
    label: "Recipes"
    folder: "content/recipes"
    format: "frontmatter"
    create: true
    slug: "{{slug}}"
    editor:
      preview: true
    fields:
      - { label: "Title", name: "title", widget: "string", required: true }
      - { label: "Description", name: "description", widget: "text" }
      - { label: "Image", name: "image", widget: "image", required: true }
      - label: "Ingredients"
        name: "ingredients"
        widget: "list"
        required: true
        fields:
          - { label: "Ingredient", name: "title", widget: "string" }
          - label: "Quantity"
            name: "quantity"
            widget: "list"
            fields:
              - name: "amount"
                widget: "number"
              - name: "measurement"
                widget: "select"
                options:
                  - { label: "1/8 Cup", value: "1/8" }
                  - { label: "1/4 Cup", value: "1/4" }
                  - { label: "1/2 Cup", value: 1/2 }
                  - { label: "1 Cup", value: "1" }
      - label: "Steps"
        name: "steps"
        widget: "list"
        fields:
          - name: "step-info"
            widget: "markdown"
      - label: "Date Published"
        name: "date"
        widget: "datetime"
        default: ""
        date_format: DD/MM/YYYY
  # Text stuff
  - name: "code-notes"
    label: "Code Notes"
    folder: "content/code"
    format: "frontmatter"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: true
    fields:
      - name: "container"
        widget: "list"
        fields:
          - name: "title"
            label: "Title"
            widget: "string"
      - name: "container-1"
        widget: "list"
        fields:
          - name: "date"
            label: "Date Published"
            widget: "datetime"
      - name: "markdown-edit"
        label: "Markdown Editor"
        widget: "markdown"
        sanitize_preview: "true"
      - name: "text-editor"
        label: "Text Editor"
        widget: "text"
      - name: "code-editor"
        label: "Code Editor"
        widget: "code"
        default_language: "javascript"