Dynamic routing for static pages

#1

Hey All !

I am wondering if there is a way to handle dynamic routing for static pages in Ghost ?

I have multiple static pages that I’d like to group under the same base url.
example :
https://www.mywebsite/glossary/first-definition
https://www.mywebsite/glossary/second-definition
https://www.mywebsite/glossary/third-definition

In the above example, I have 3 static pages : “first-definition” ; “second-definition” and “third-definition”.
I would like all of them to have the same base url : “https://www.mywebsite/glossary/”.

I know I can do this with normal posts using collection, or channels (https://docs.ghost.org/api/handlebars-themes/routing/channels/). However I can’t manage to do it with static pages …
Any idea on how to do it ?

Ben

#3

@benoitD this is absolutely possible :smile: You can configure it using the routes section of your routes.yaml file. Full docs are here:

1 Like
#4

@Kevin is right. I removed my comment because it was wrong. I found something that is a little strange. I created routes.yaml:

routes:
  /glossary/first-definition/:
    template: first-definition
    data: page.first-definition

I created a page with slug first-definition.
I duplicated page.hbs and rename it to first-definition.hbs.
Restarted Ghost.

The strange part was that I had to replace {{#post}} with {{#page}} to get the actual content from admin.

1 Like
#5

Thank you very much for your help !

The solution from @HauntedThemes works great :+1:

I’m now trying to make it scalable because I may have many pages in my glossary.
Following this solution, I would have to create :

  • first-definition.hbs
  • second-definition.hbs
  • …
  • nth-definition.hbs

And routes.yaml would look like :

routes:
      /glossary/first-definition/: 
        template: first-definition
        data: page.first-definition
      /glossary/second-definition/:
        template: second-definition
        data: page.second-definition
      ...
      /glossary/nth-definition/:
        template: nth-definition
        data: page.nth-definition

I’ll dig deeper into the documentation to find a way to do this with a single .hbs file and a single generic route (using {slug}).

I’ll come back here if I find a solution :wink:

#6

I finally choose to create 2 collections in routes.yaml.
Here is my file :

routes:

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: tag:-glossary

  /glossary/:
    permalink: /glossary/{slug}/
    template: index-glossary
    filter: tag:glossary

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

I do not create definitions as static pages anymore. They are now posts with tag: glossary. This allows me to filter out definitions from first collection.

I also created 2 new files : index-glossary.hbs (custom page for https://mywebsite/glossary) and custom-post-glossary.hbs (custom template for all definitions : https://mywebsite/glossary/first-definition, https://mywebsite/glossary/second-definition, …).

I think this is a good option for anyone that would want to create a glossary using Ghost :slight_smile:

Thank you all for your help, it helped me a lot :+1: !

1 Like
closed #7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.