This module try to simplify the construct of Netlify CMS lone config file. It also sets up the Netlify CMS page wherever on the project with minimal user intervention.
In order to be able to reuse data objects inside the lone NetlifyCMS config.yaml file, this module makes use of Hugo's data file to store said data objects and allow them to be recursively imported in the configuration file.
import collection posts
| type | | file name
- Add this module's path to your
module.importsconfig array
module:
imports:
- path: github.com/theNewDynamic/hugo-module-tnd-netlify-cms
- Create a page where your Netlify CMS dasboard should live.
- Add the
netlifycmslayout to it through Front Matter. - Add the
netlifycms_configoutput format to it through Front Matter (alongside HTML):
Title: Your CMS
layout: netlifycms
outputs:
- HTML
- netlifycms_config- Add your Netlify config data in
data/netlifycms/config.yamland use (or not)importstatements. - Add the data files matching your imports statements to the
data/netlifycmsdir under/collectionsand/fields
# data/netlifycms/config.yaml
backend:
name: git-gateway
branch: easier-netlify-cms
publish_mode: editorial_workflow
# [ ... ]
slug:
encoding: "ascii"
clean_accents: true
sanitize_replacement: "_"
collections:
- import collection pages #--> data/netlifycms/collections/pages.yaml
- import collection posts #--> data/netlifycms/collections/posts.yaml# data/netlifycms/collections/posts.yaml
name: "posts"
label: "Posts"
folder: "content/posts"
create: true
editor:
preview: false
fields:
- import field title #--> data/netlifycms/fields/title.yaml
- import field authors #--> data/netlifycms/fields/authors.yaml
- import field date #--> data/netlifycms/fields/date.yaml
- import field images #--> data/netlifycms/fields/images.yaml
- import field body #--> data/netlifycms/fields/body.yaml
- {
label: "Tags",
name: "tags",
widget: "list",
field:
{
label: "Tag",
widget: "string",
},
}# data/netlifycms/fields/title.yaml
label: "Title"
name: "title"
widget: "string"The module faciliate the addiont of extra Netlify CMS scripts for WidgetPreviews, CollectionPreviews etc...
By default the module prints the content of any assets/netlifycms.js file found inside a <script> tag.
For more control, user should create its own layouts/partials/tnd-netlifycms/scripts.html partial and load the project's custom scripts there.
In this example, we use the load the project's stylesheet for the Articles previews and fire the Custom Preview afterwards, using the project's own classes.
{{ $style := false }}
{{ with resources.Get "css/style.css" }}
{{ $style = . | resources.PostCSS }}
{{ end }}
<script>
{{ with $style }}
CMS.registerPreviewStyle("{{ $style.Permalink }}");
{{ end }}
var PostPreview = createClass({
render: function() {
var entry = this.props.entry;
return h('div', {"className": "px-4"},
h('h1', {"className": "text-5xl font-normal
6875
pt-10 mb-16"}, entry.getIn(['data', 'title'])),
h('div', {"className": "my-4 user-content"}, this.props.widgetFor('body'))
);
}
});
CMS.registerPreviewTemplate("articles", PostPreview);
</script>