Community forum for knowledge and support

Updated last month

Best Practice for Dynamically Generating Pages from a Cms

At a glance
The community member is trying to find the best practice for generating pages dynamically from a CMS, where the client can build and edit the pages, but not the design. They are currently generating navigation elements from the CMS for the navbar and footer, but the separate pages are not unique, and props in components are not working as a separate change affects all the pages. The community member doesn't want to create a robust CMS where every text and image is bound to dynamic elements on the pages, so they assume they have to use static pages, but that seems odd since there is already a generated link, and they would need to add a link field to be used as the page link. The community member is open to suggestions on the best approach. The comments provide some additional context, where the community member has created a CMS for the navigation elements, allowing the user to add new elements that are displayed in both the navbar and footer. They have found that CMS-generated pages can only be unique if the whole page is supplied with CMS data, so they have ended up generating the links from the CMS and allowing marketers to create static pages from templates, with the requirement to add the static page's relative path to the CMS element. They have implemented a custom script to replace the links' href attributes with the value from the data-path attribute. The community member is unsure if this is the best approach and is open to suggestions. There is no

What's the best practice if I want to generate pages dynamically from CMS? I want the client do everything from build and edit mode, not design mode. So currently I'm generating nav elements from CMS both for navbar and footer. However even if I add slots in the collection page template, the separate pages not going to be unique. Props in Components not working as a separate change, it changes all across those pages.

However I don't want to create a robust CMS where every text and image etc.. data is binded to dynamic elements on these pages. So I assume I have to use static pages, but that's seems a bit odd since there is a link which already generated, but I add a link field which is going to be used as a page link?

I'm now a bit confused what's the best way to do this

M
Á
5 comments

do you have any more context as to what kind of pages would be generated? Whats the core reasoning behind wanting to manage everything via the CMS?

I created CMS for the nav elements like Product, Docs, About Us and many more. Where the user can add new elements which will be displayed both on the navbar and the footer. Previously that was an issue. Sometimes it was easy to forget add links both of these elements.

Now I understand CMS generated pages can be only unique if the whole page supplied with CMS data.

So I ended up generating the links from cms and for more flexibility for marketers, they can create static pages from templates. The only catch they have to add this static page's relative path to the CMS element. This field is only a text input and it's translated into page links through a custom attribute and a custom script I wrote with chatgpt:

 // Replace links' href attributes with the value from data-path
  document.querySelectorAll('[data-path]').forEach(link => {
      const relativePath = link.getAttribute('data-path'); // Get the data-path value
      if (relativePath) {
          link.setAttribute('href', relativePath); // Replace href with data-path value
      }
  });

I'm not sure if that's a good approach, however I want the best. So I'm open for any suggestions 🙂

I'll be sending you a reply soon - its a bit involved. Just wanted to acknowledge this message.

before I dive into this - 1) can you provide a read-only link 2) where did you end up with this? I'm assuming you've made some progress in the last 3 weeks or so and don't want to spend 30-60 mins diving in only to find out you found a working solution.

Overall the problem seems a bit over-engineered but I'd love to poke around before I make that my final opinion.

Add a reply
Sign up and join the conversation on Slack