Help with {{body}} tag on homepage

Developer help
1

So I’m trying to build a homepage using the Dawn theme with limited success. This is my first time building a website so I might be making some very basic mistakes (sorry if I am). My issue is making a custom feed on the homepage. I’m not sure exactly how to describe the issues so I’ll post some screenshots and try and explain the issue with some code that might be causing the problems.

So on my homepage I want to have a “recent articles” section and a “choose a topic” section. The recent article section seems to be prebuilt into the theme shown below:

<article class="feed {{post_class}}">
    {{!-- <div class="feed-calendar">
        <div class="feed-calendar-month">
            {{date published_at format="MMM"}}
        </div>
        <div class="feed-calendar-day">
            {{date published_at format="DD"}}
        </div>
    </div> --}}
    <h2 class="feed-title">{{title}}</h2>
    {{#is "home"}}
    <div class="feed-right">
        <svg class="icon feed-visibility feed-visibility-{{visibility}}">
            <use xlink:href="#star"></use>
        </svg>
        <div class="feed-length">
            {{reading_time}}
        </div>
    </div>
    <svg class="icon feed-icon">
        <use xlink:href="#chevron-right"></use>
    </svg>
    <a class="u-permalink" href="{{url}}" aria-label="{{title}}"></a>
    {{/is}}
</article>

I then built the “choose a topic” section using html (since I’m not sure how to do it with JavaScript). So the code for the whole front page from the default.hbs folder is:

    <div class="site">
        {{> header}}
        {{#is "home"}}
            {{> cover}}
            {{> featured}}
                    <div class="homepage">
                        <div class="topics">
                            <div class="homepage-topics-title">
                                Explore some topics:
                            </div>
                            <div class="individual-topics">
                                <a href="/productivity" class="topic1">Productivity</a>
                                <a href="/orginisation" class="topic2">Orginisation</a>
                                <a href="/time-management" class="topic3">Time-Management</a>
                            </div>
                        </div>
                        <div class="recent">
                            <div class="homepage-recent-title">
                                Recent articles
                            </div>
                            <div class="hompage-recent-articles">
                                {{{body}}}
                            </div>
                        </div>
                    </div>
        {{/is}}
        <div class="site-content">
            {{{body}}}
        </div>

This causes the following problem: The recent articles feature appears twice.

image
image2140×1404 210 KB

The conclusion I’ve made is that this happens because there are two {{body}} tags in the code, but removing either of them either 1. Removes the body from every other page on the website or 2.Removes the “Recent article” part of the grid. Here’s a layout of how I’d like it to look if it makes it easier to understand:

image
image2880×1406 100 KB

If needed here’s the CSS used:

site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex-grow: 1;
    padding: 6rem 0;
}

@media (max-width: 767px) {
    .site-content {
        padding: 3rem 0;
    }
}

/* Homepage code */
.homepage{
    margin:auto;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 3rem;
    min-height: 280px;
    align-content: center;
    justify-content: center;
    margin-bottom: 3rem;
}
.topics{
    justify-self: stretch;
    min-width: 500px;
    position: relative;
}
.recent{
    position: relative;
}
.homepage-recent-title{
    font-size: 3rem;
    position: relative;
    overflow: hidden;
    margin: auto;
    line-height: 1;
    margin-left: 3rem;
}

.homepage-topics-title{
    font-size: 3rem;
    position: relative;
    align-self: center;
    overflow: hidden;
    margin-left: 3rem;
    line-height: 1;
}

.individual-topics{
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 5rem;
    padding-right: 50%;
    font-size: 1.6rem;
    font-weight: 400;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 3;
}
2

So when you use {{{body}}} in default.hbs, Ghost will automatically insert the right content depending on what route (URL) you go to.

By default, index.hbs will be used for the home page of your site. This is where Dawn lists through the recent posts. Therefore, you want to add your code in the <main> tag shown below:

-- index.hbs --

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

If you do it in default.hbs, the recent topics will be shown for every page on your site and as you have seen, it can get messy!

I’d strongly suggest checking out the structure docs just to get an idea on the conventions. I found them very helpful when I was learning.

1 Like