Community forum for knowledge and support

Updated 2 weeks ago

Best Practice for Dynamically Generating Pages from a Cms

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