Static CMS
Star StaticJsCMS/static-cms on GitHubSponsor
v3.4.6DocsExamplesCommunitySponsor

Beta Features

Static CMS runs new functionality in an open beta format from time to time. That means that this functionality is totally available for use, an it might be ready for primetime, but it could break or change without notice.

Use these features at your own risk.

Folder Collections Path

By default Static CMS stores folder collection content under the folder specified in the collection setting. You can now specify an additional path template (similar to the slug template) to control the content destination.

This allows saving content in subfolders, e.g. configuring path: '{{year}}/{{slug}}' will save the content under posts/2019/post-title.md.

See Folder Collections Path for more information.

Nested Collections

Nested collections is a beta feature that allows a folder collection to show a nested structure of entries and edit the locations of the entries. This feature is useful when you have a complex folder structure and may not want to create separate collections for every directory.

See Nested Collections for more information.

Image widget file size limit

You can set a limit to as what the maximum file size of a file is that users can upload directly into a image field.

See Media Library for more information.

Media Library Folders

Adds support for viewing subfolders and creating new subfolders in the media library, under your configured media_folder.

See Media Library for more information.

Summary string template transformations

You can apply transformations on fields in a summary string template using filter notation syntax.

Example config:

collections:
  - name: 'posts'
    label: 'Posts'
    folder: '_posts'
    summary: "{{title | upper}} - {{date | date('YYYY-MM-DD')}} - {{body | truncate(20, '***')}}"
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

The above config will transform the title field to uppercase and format the date field using YYYY-MM-DD format. Available transformations are upper, lower, date('<format>'), default('defaultValue'), ternary('valueForTrue','valueForFalse') and truncate(<number>)/truncate(<number>, '<string>')

Registering to CMS Events

You can execute a function when a specific CMS event occurs. Supported events are mounted, login, logout, change, preSave and postSave.

Mounted

The mounted event handler fires once the CMS is fully loaded.

CMS.registerEventListener({
  name: 'mounted',
  handler: () => {
    // your code here
  },
});

Login

The login event handler fires when a user logs into the CMS.

CMS.registerEventListener({
  name: 'login',
  handler: ({ author: { login, name } }) => {
    // your code here
  },
});

Logout

The logout event handler fires when a user logs out of the CMS.

CMS.registerEventListener({
  name: 'logout',
  handler: () => {
    // your code here
  },
});

Pre Save

The preSave event handler fires before the changes have been saved to your git backend, and can be used to modify the entry data like so:

CMS.registerEventListener({
  name: 'preSave',
  collection: 'posts',
  handler: ({ data: { entry } }) => {
    return {
      ...entry.data,
      title: 'new title',
    };
  },
});

Post Save

The postSave event handler fires after the changes have been saved to your git backend.

CMS.registerEventListener({
  name: 'postSave',
  collection: 'posts',
  handler: ({ data: { entry } }) => {
    // your code here
  },
});

Change

The change event handler must provide a field name, and can be used to modify the entry data like so:

CMS.registerEventListener({
  name: 'change',
  collection: 'posts',
  field: 'path.to.my.field',
  handler: ({ data, collection, field }) => {
    const currentValue = data.path.to.my.field;

    return {
      ...data,
      path: {
        ...data.path,
        to: {
          ...data.path.to,
          my: {
            ...data.path.to.my,
            field: `new${currentValue}`
          }
        }
      }
    };
  },
});

i18n Support

Static CMS can provide a side by side interface for authoring content in multiple languages. Configuring Static CMS for i18n support requires top level configuration, collection level configuration and field level configuration.

Gitea Backend

For repositories stored on Gitea, the gitea backend allows CMS users to log in directly with their Gitea account. Note that all users must have push access to your content repository for this to work.

See Gitea Backend for more information.

Large Media Support

Netlify Large Media allows you to store your media files outside of your git backend. This is helpful if you are trying to store large media files.

See Netlify Large Media for more information.