Content Set up

There are many flavors and ways to structure Storyblok content types. This documentation will explain how to structure Storyblok content types in a way that is compatible with Evolve.

Useful plugins

Advanced paths

This plugin allows you to overwrite the path of a story and all child stories in the Storyblok UI. We need this plugin to at least remove the Pages folder from the path of all pages. In other words, by default the path of a page would be /pages/contact, but with this plugin we can make it /contact.

Translatable slugs

As the name suggests, this allows you to translate the slug of a story.

SEO

This plugin allows you to add SEO meta tags to a story that show a preview of how the page will look like in Google. This is useful since it is advised by SEO experts to have conform to a maximum amount of pixel width for you meta title and description. The preview of this plugin will show you if you are within the limits.

This custom field is supported by default by the GraphQL codegen plugin.

Common folder and story structures

Scenario 1 - single site

A simple structure with only 1 (multilingual) site:

/
  Site # site config contains menu, footer, and other site global manageable data
  Pages/
    Home # index story
    About
    Contact
    Category/
      Category-1/
        Category-1 # index story
        SubCategory-1
      Category-2/
        Category-2 # index story
        SubCategory-2
        ...

Scenario 2 - multiple sites

If you need to support multiple sites that have different menus and different page contents, you could add a root folder for each site:

/
  Site-1/
    Site # site config contains menu, footer, and other site global manageable data
    Pages/
  Site-2/
    Site # site config contains menu, footer, and other site global manageable data
    Pages/

Scenario 3 - multiple sites with shared pages

Another scenario is where multiple sites would share the same pages, but have different menus and other site global manageable data.

/
  Site-1/
    Site # site 1 global config
    Pages/ # site 1 specific pages
      Home
  Site-2/
    Site # site 2 global config
    Pages/ # site 2 specific pages
      Home
  Shared Pages/
    Privacy Policy

Whatever setup you would have, make sure to update the pageResolver and the siteResolver inside the Storyblok service accordingly.

Fixing the paths of the stories

As described in Advanced Paths you should remove or edit the realpath for a container folder (e.g. the “Pages” folder). This way the live editing will correctly open the right page, since this is based on the path of the story.

Create alternate pages

Alternate pages are typically required in Scenario 3 described above.

Instead of just translating a Page Story, you could also create an entire new story and link them together. This is called an alternate page and can be done under the settings of a Story.

By linking a Story as alternate, it will properly resolve as alternates in the GraphQL resolver. Note that you still should handle the fetching of alternate case in the GraphQL resolver. You should update the pageResolver function so that it does an extra query once it finds the alternate.

Restrict content types

Good to know is that you can restrict certain content types per folder for the folder and all descendant folders. Therefore you can restrict the Pages folder to only contain Page content types.

If you would like to manage products or other types of content inside Storyblok as well, you could do something similar with a corresponding root folder.

/
  Pages/ # Content Page and Category Page only
    Category/ # Category Page only
  Products/ # Product only

It’s also good to know that you can restrict the content types on a Role level. For example you could create a role so users with that Blog authors role can only create Articles inside a Blog folder. This is managed in Settings/Roles.

Languages

Languages are set up at space level under Settings/Internationalization. It could be confusing how to configure this correctly, so this section will provide some guidelines.

Default language

It is advised to always choose English as the default language if you support multiple languages. This is because fields are not required by Storyblok to be translated and always will return the fallback language if empty. If you don’t support multiple languages, you can choose any language you want. However keep in mind that if you need to support multiple languages in the future, you probably also should choose English as the default language.

Locale vs languages

Should you use en (language) or en-US (locale) when configuring languages for the space? Even though there no use case is the same, it is often easier to go for the language only. This is because we often split up sites based on a country.

For example, we could have different texts for Belgian French and French French with the Scenario 2 setup even though we only have 1 French language.

For a Scenario 1 setup that should support both Belgian French and French French, you should configure locales on a space level.