Content Collections Help


#1

I have just got up and running with Ghost, for a new website idea. I wanted to order my posts chronologically, which I did by following this tutorial. routes.yaml file:

routes:

collections:
  /:
    permalink: /{slug}/
    template: index
    order: asc
  
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

What I would actually like to do now, is to replicate the / route entirely and put it under /new which would show the same posts but in reverse chronological order. Something like this:

routes:

collections:
  /:
    permalink: /{slug}/
    template: index
    order: asc
  
  /new/:
    permalink: /new/{slug}/
    template: index
    order: desc

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

However it looks like this isn’t possible, according to this articles because of the following:

The order that collections are listed in routes.yaml is important. Posts will only exist in one collection , which is always the first filter it matches with. Be mindful of this when creating three or more collections for your site.

Is there a way of doing this?


#2

Hey! The thing you are looking for might be “channels”.

Take a look at https://docs.ghost.org/tutorials/building-a-content-hub/


#3

Hey @Kate! Thanks for replying so quickly. So that sort of works, but I imagine I’m doing something wrong.

I changed my routes.yaml file to the following:

routes:

/new/:
  controller: channel
  template: index
  order: desc

collections:
  /:
    permalink: /{slug}/
    template: index
    order: asc

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

Which does indeed let me navigate to my /new endpoint - and the posts are displayed in reverse chronological order, but it’s displaying a 404 error instead of the index theme I was expecting.

/new page:


#4

I wasn’t allowed to add multiple images (due to being a new user) - this was the theme I was expecting:

/ page:


#5

OK - so the 404 seems to have been happening because I didn’t have a page set-up with the url /new/ so I set one up but then the posts don’t actually show up. Is it not possible to replicate my homepage, into the new route, just with a different ordering of stories?


#6

Can you please your current state of routes.yaml?


#7

Hi @Kate

I actually got it sort of working (below), but it looks like you’ve got some CSS that is only in effect for the home page; and I’m not sure exactly what is different so I can’t get it to the look the same as the home page.

I don’t suppose you know what classes or styles I need to add to get the overlay effect, like the homepage has (second screenshot)? The homepage has a margin-top of -70px and padding-top of 0 but then that renders the nav element unreadable.


#8

@omisnomis are you looking for the home-template class on the <body> tag? You’ll need to add that manually as it only gets added to the / route automatically


#9

Hi @Kevin - Yes, it looks like I am! How can I get that class to be added to the <body> tag on my /new route as well? I don’t think I have access to the Body tag when I’m creating a page… Do I?


#10

There are a couple of options:

  1. Have a completely separate layout file for this route based off default.hbs

  2. Modify your default.hbs layout so that other templates can specify other body classes, eg

    default.hbs:

    <body class="{{body_class}} {{block "custom_body_class"}}">
    

    new.hbs:

    {{contentFor "custom_body_class"}}home-template{{/contentFor}}
    

#11

@Kevin - That was exactly what I was looking for, thank you. I guess I’m going to have to learn Handlebars if I want to really get into Ghost :slight_smile:

Just in case anybody comes across this, looking to do what I was trying to achieve, the handlebars tag needs a hashtag at the beginning:

{{#contentFor "custom_body_class"}}home-template{{/contentFor}}