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 isdefault
and the template is calleddefault.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>