How to create a page that combines static content + posts

I want to create a page that has a bunch of static content at the top, followed by posts from a specific tag. I want to be able to edit the static content using the static page editor on the admin page.

There seem to be three ways to do that:

  1. Use dynamic routing with the “data” and “template” options plus a custom .hbs file, as described in Creating a custom home page.
  2. Create a custom-:slug.hbs page and select it as the template for a static page.
  3. Create a page-:slug.hbs page and set the URL of a page to the same :slug value, as described in the API Reference page titled Page.

I’m confused about the relationship between these three methods. Are there any pros or cons?

Playing off of 1, here’s what I’m thinking:

  1. Upload this routes.yml:
        template: custom-page

    permalink: /{slug}/
    template: index
    filter: tag:-hash-no-index # this will exclude the #no-index tag from the known list of posts

  tag: /tag/{slug}/
  author: /author/{slug}/
  1. Create a page for your static content in ghost. Make sure to add the #no-index tag.
  2. custom-page.hbs example:
{{#get "pages" limit="1" filter="slug:"}}
    {{!-- output static content --}}

{{#get "posts" filter="tag:special-tag" limit="5"}}
    {{!-- loop your posts here --}}

Your 2) choice would also work well (now that I think about it, probably a bit easier to manage)). In the end, there are multiple ways to achieve the same thing. All 3 of your ideas are valid and have around the same difficulty of managing

1 Like

Thanks, Vikaspotluri123.

I ended up using (2) because it does seem simpler than (1) and works well.

I tried (3) but I couldn’t get Ghost to use the custom page-:slug.hbs file. (I’m a little puzzled about “page:-slug.hbs” versus “custom:-slug.hbs”. Does Ghost support both? Or is there a doc error?)

custom-{{name}} are custom templates that can be used in a post or page - for example, if you have special posts that require different layouts.

page-{{slug}} (or post-{{slug}}) is a custom template for a specific page / post slug. This only applies to the single object. Also, you have to make sure that a page or post with the slug exists in your list.

I noticed that you put a : in your file names - these won’t match with ghost.

1 Like

Thanks again.

(I showed the : because these file names are documented that way. I realized that they are not intended for actual file names.)

1 Like