Dawn theme - issue with customizing home page

I want to embed the contents of a page on the home page and be able to edit the embedded page within Ghost admin. I found these instructions which seemed to accomplish what I want but I’m having some issues with the result. If there’s an easier way of doing this please let me know.

As I’m only in the planning stages and so far am just testing different blog platforms I don’t have a production environment, I’m only running in a local development mode, so I can’t link to the blog.

Ghost version: 4.1.0
Theme version: 1.0.0

The short version of what I’ve done is this (long version further below). I edit the file \partials\cover.hbs and routes.yaml according to the instructions but in my case I use the slug default and default.hbs instead of home as there is no home in the Dawn theme. In the screenshots below you can see what I have, want and get. The issue is that the list of recent posts disappears and I can’t figure out why.

What I have

What I want

What I get

Long version

  • I create page and set the slug to default since that’s the name of the theme’s home page.

  • In the page i write:

    “Welcome…
    …to my corner of the web. Blah blah blah…”

  • …and publish the page.

  • I download the theme, rename the ZIP file to dawn-master-mod.zip and unzip the contents.

  • Since I want to remove the Login and Subscribe buttons, the publication icon and site description and add my own text I edit the file \partials\cover.hbs from this:

<div class="cover container">
    <div class="cover-content">
        {{#if @site.icon}}
            <div class="cover-icon">
                <img class="cover-icon-image" src="{{@site.icon}}" alt="{{@site.title}}">
            </div>
        {{/if}}

        {{#if @site.description}}
            <div class="cover-description">{{@site.description}}</div>
        {{/if}}

        {{#unless @member}}
            <div class="cover-cta">
                <button class="button members-subscribe" data-portal="signup">Subscribe now</button>
                <button class="button button-secondary members-login" data-portal="signin">Login</button>
            </div>
        {{/unless}}
    </div>
</div>
  • to this:
<div class="cover container">
	<div class="content-area">
		{{#page}}
            <div>
                <h2>{{title}}</h2>
                {{content}}
            </div>
        {{/page}}
	</div>
</div>
  • I download routes.yaml and since my slug is default and the template is called default.hbs I edit it from this:
routes:

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

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
  • to this:
routes:
 /:
   data: page.default
   template: default

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

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
  • I upload the modified theme and routes.yaml and refresh the site and get the result in the screenshot below. As you can see, the list of recent posts disappeared, which is not what I want.

As far as I can tell it’s the \partials\modal.hbs that contains the code for the list of recent posts and that is still referenced in default.hbs as you can see in the excerpt below. So why does it drop the post list after my changes described above?

<div class="site">
        {{> header}}
        {{#is "home"}}
            {{> cover}}
            {{> featured}}
        {{/is}}
        <div class="site-content">
            {{{body}}}
        </div>
        {{> footer}}
        {{> modal}}
        {{> pswp}}
</div>

Seems like you can’t edit a post after a certain time so I’ll just reply here instead. I noticed in other threads that some add the information below at the top of the post, so I’ll add this here and see if it does any good.

  • What’s your URL? Local dev environment
  • What version of Ghost are you using? 4.1.0
  • How was Ghost installed and configured? How to install Ghost locally on Mac, PC or Linux
  • What Node version, database, OS & browser are you using? Node 12.19.0, SQLite3, Windows, Firefox

After further troubleshooting I’ve also realized that I was wrong about \partials\modal.hbs being the file to look at. Instead it’s the index.hbs and \partials\loop that are being used to produce the list of recent posts. The index.hbs looks like below. I’m guessing I should do something with this part; {{!< default}} and I’ve tried modifying it in multiple ways but still haven’t managed to get the list to appear. Any help in getting this to work would be much appreciated.

{{!< default}}

<div class="content-area">
    <main class="site-main">
        <div class="post-feed container medium">
            {{#foreach posts}}
                {{> "loop"}}
            {{/foreach}}
        </div>
        {{pagination}}
    </main>
</div>