Troubles with routing

Using Ghost
1

Hi all,
I am using Ghost as a CMS rather than a blogging platform. As such I have created a “Features” page that will be a “landing” page for sub-pages that deal with each feature individually.
The current (incomplete) feature page looks like this

image
image1870×1966 186 KB

I also want the sub-pages to be under a /features/{slug} URL and have hence created the appropriate collection in my routes.yaml file e.g.

routes:

collections:
 /features/:
   permalink: /features/{slug}/
   filter: tag:hash-features

  /:
    permalink: /{slug}/
    template: index
    filter: tags:-hash-hidden

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

In the footer, I also have links that will be routing to the features using the above mentioned URL.

However when I turn the collection on then my index page loads for my features ‘landing’ page instead of my features page e.g.

image
image1490×1641 129 KB

to ‘correct’ this I thought that I should create a dynamic route to the features page template like so

routes:
   /features/: page-features

but now my features ‘landing page’ is empty e.g.

image
image1201×1117 13.6 KB

my page-features.hbs looks like this

{{!< default}}

{{!-- The tag above means: insert everything in this file
into the {body} tag of the default.hbs template --}}

{{#post}}
    <header class="post-card-header ">
        <div class="kg-card kg-header-card kg-v2 kg-width-full kg-content-wide" style="height:300px; background-image:url({{asset 'images/header-features.jpg'}}); background-size:100%; background-repeat:no-repeat; margin-bottom:30px;">
            <div class="kg-header-card-content">
                {{#match @page.show_title_and_feature_image}}
                    <h1 class="article-title" style="color:white;">Features</h1>
                    {{> convert_article_image}}
                {{/match}}
            </div>
        </div>
    </header>
    
    <main id="site-main" class="site-main outer">
        <section class="gh-container has-sidebar mt0">
            <div class="gh-container-inner inner">
                <main class="gh-main">
                    <article class="article {{post_class}} gh-content">
                        {{content}}
                    </article>
                </main>
                <aside class="gh-sidebar">
                    <section class="gh-about" style="margin-top:113px;">
                        {{> sidebar_more_features}}
                        {{> sidebar_cta_demo}}
                    </section>
                </aside>
            </div>
        </section>
    </main>
{{/post}}

I clearly have a routing issue but not sure where it is - any help appreciated!

2

I suspect that the issue may be the fact that I am using ‘features’ both in routes and collections. When I rename the collection to just ‘feature’ it works as expected.