How to create a page that combines static content + posts

Developer help
1

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?

2

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

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

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

taxonomies:
  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}}

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

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
3

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?)

4

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
5

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