To do this I created a new component of FlexibleContent which takes the sections input, loops through it and then uses a switch function to determine which component to use. This will then figure out what component type we are wanting to use and pass the individual fields into it to display on the front end. To do this we will need a component that we can pass sections into. Now we have a working GraphQL query we actually want to use it in React. text_block will also have images as part of it, however the value will be null so we can work with that. What you will notice is that each item in the array will have all the possible fields included in it, i.e.
For this particular issue (as below) we are now getting our fully formatted HTML returning and ready to be used. I'm definitely interested in finding out more about field resolvers as they seem like they could be really powerful and helpful in the future. Label : "Page" folder : "content/pages" media_folder : '' public_folder : '' create : true slug : " = actions But that's given me ideas for another challenge so nothing wasted! Unfortunately, that came after a couple of hours of trying to build my own version of the ACF flexible content functionality as a Netlify CMS custom widget. Variable types was straight-forward to set up once I knew that it existed. This feature provides the ability to use a repeater like with 'List' but assign different fields to each type. On the Netlify CMS site they have a list of their beta features and in there I found exactly what I was after, variable types. I could use 'List' and add every instance of field along with ability to pick which component to use, but as there isn't any conditional logic, this would become awful to use really fast. The closest was 'List' which gives you the ability to add a repeatable set of fields, but these fields are static and the same for each repetition. TL DR - I want to use the Netlify CMS to be able to piece together pages with a flexible use of components, without creating new template files for each combination still being built with Gatsby.js Introducing Netlify CMS Variable TypesĪfter looking into the widget types built into Netlify CMS I couldn't find anything that quite catered for my needs. Not every project can have someone making a new file for every page creation after all. Longer term, I don't want to do this - if I have a CMS then I'm going to use the CMS. For these bespoke pages I actually made them using a template file for each one.
When building version one of my site I knew I wanted pages to have different content on them. This allows you to build pages using any combination of components as required, without resorting to using inefficient page builder plugins. I have historically worked with WordPress for my CMS sites and love the flexibility provided to me by using Advanced Custom Fields, more specifically with it's 'Flexible Content' approach. My issue: The static nature of my Netlify CMS content Displaying Variable Type queried data in React.Formatting markdown content with createFieldExtension.Querying Variable Type fields in GraphQL.Defining field types in Gatsby using createSchemaCustomization API.Setting up Variable Types fields in Netlify CMS.
I have created a simplified repository based off of the gatsby-advanced-starter with a working example of this which might be helpful to refer to.
0 kommentar(er)
