Making post title automatically link to standalone post

Themes
1

I’m creating a classic-style blog theme, where full content of all posts is shown on the homepage, but I’d like visitors to be able to click the title of each post and reach a permalink/standalone version of that post.

In my index.hbs I have the following code which renders the full content of all posts on the homepage:

 {{#foreach posts}} 
     {{> content }}
 {{/foreach}}

I know that it’s also possible to create a link to the standalone version of each post using:

{{#foreach posts}}
  {{#link href=(url) class="post-link" activeClass="active"}}
    {{title}}
  {{/link}}
{{/foreach}}

However, the issue is that this then doubles the post title, showing it once as {{title}} and then again through {{content}}, and also causes other formatting issues

What I’d like is a way to alter the {{title}} element that is already outputted as part of {{content}} for each post, so that the title always links to the permalink for that post. Does anyone know the best way to do this? Thank you!

2

The cool thing about partials is you can use them like Components in common frameworks!

So you could do something like this:

# index
{{ > content titleLink=(url) }} 

# partials/content
<h2>
{{#if titleLink}}
  {{#link other_attributes href=titleLink}}{{title}}{{/link}}
{{else}}
  {{title}}
{{/if}}
</h2>
1 Like
3

Wow, amazing, I didn’t know this – thank you so much!

1 Like
4

Sorry, one more question: in this setup, how do I then generate all the rest of {{content}} minus the title? It still seems to be doubling the title, though I may have messed up something else as well!

5

Are you able to share a snippet of your content partial?

The {{content}} will only output post content (since it’s actually a wrapper around the content variable), while {{> content}} will render the content partial, which is whatever is in partials/content.hbs

1 Like
6

Thanks again, sorry for late replies! Following your advice, my code now looks like this – I’m working on a fork of the standard Edition theme, if that helps at all

index

    <div class="post-feed expanded container medium">
             {{#foreach posts}} 
                    {{ > content titleLink=(url) }}
                    {{> content }}
            {{/foreach}}
    </div>

partials/conent

    <h1 class="single-title">
        {{#if titleLink}}
            {{#link other_attributes href=titleLink}}{{title}}{{/link}}
        {{else}}
            {{title}}
        {{/if}}
    </h1>
1 Like
7

ok, I’ve got it! for my purposes the best solution was just adding {{#link href=(url)}}{{title}}{{/link}} – thanks so much for leading me here Vikas!

partials/content

    <h1 class="single-title">
        {{#link href=(url)}}{{title}}{{/link}}
    </h1>