When I first got started on Micro.blog, one thing I wasn’t satisfied with was that my long posts appeared in full on my blog’s homepage. Really, I wanted to give people a way to quickly check out what I’d recently posted, and having to scroll the whole way through long entries that may not have interested them (considering I blog about an eclectic mix of things) wasn’t exactly ideal. Micro.blog Help has a guide to showing truncated posts on your front page , but for me this option was even worse: the truncated text shown is stripped of HTML, so my front page was left with link posts with no links in them, and photo posts with no photos in them. There had to be a better way!
And of course, there is! At least for my set-up, where all the long posts that I want truncated have titles, and all my posts without titles are things I don’t mind appearing in full. Your mileage may vary if this description doesn’t apply to you. The solution is to use an if-statement to display posts one way if they have a title, and a different way if they don’t have one. This change will apply to the homepage as well as your category pages. For this quick guide, I’ll provide examples from Micro.blog’s Default theme, but of course the principles can be applied to any other theme as well.
As with Micro.blog’s original truncation guide , you will need to create a custom theme (click through for more detailed instructions on that). You’ll also need to find and edit the layouts/_default/list.html file in your newly created custom theme. Look for the part of it that says this:
<div class="e-content">
{{ .Content }}
</div>Replace that with this:
{{ if .Title }}
<div class="e-summary">
{{ .Summary }}
{{ if .Truncated }}
<p><a href="{{ .RelPermalink }}">Read More</a></p>
{{ end }}
</div>
{{ else }}
<div class="e-content">
{{ .Content }}
</div>
{{ end }}The code is fairly self-explanatory, but if you’re not familiar with if/else statements at all and want a little extra explanation:
- Everything between
{{ if .Title }}and{{ else }}states what is to be displayed if a post does have a title. - Everything between
{{ else }}and the final{{ end }}states what’s to be done in the “else” case, if a post does not have a title. - The class on the
<div>changes if the post has a title, frome-contenttoe-summary. This isn’t strictly necessary, but it’ll tell any semantic parser of your front page that they’re not seeing the full post, just a summary of it. - In the case that a post has a title,
{{ .Content }}changes to{{ .Summary }}, to display the summary (in this case, the beginning of the post) instead of the full post. - Under the summary, you’ll see another if-statement:
{{ if .Truncated }}. This states what is to be done in the event that the post has been truncated – in this case, that is to display a “read more” link to the post’s permalink. If the post has not been truncated then we don’t need anything to be displayed here, which is why the if-statement has no{{ else }}and goes straight to{{ end }}.
If you want more control over where your post is truncated, you can insert a special comment tag between paragraphs to tell Micro.blog where that should be done. That special code is <!‐‐more‐‐>, as mentioned in the original truncation guide. You can technically insert it into the middle of a paragraph, but Micro.blog will interpret that as two separate paragraphs, one either side of the “more” tag, and display it as such. To avoid unexpected behaviour, just put it between paragraphs.
There is one other big advantage to inserting this break point manually: where by default, Micro.blog will strip HTML and Markdown formatting out of the summaries it displays, it will not strip formatting out of your summary if you use this “more” tag. This means that if you have a titled post with formatting (like links or photos, or even simple bold or italic) that you want to display on your home or category pages, you can make that happen by manually inserting this “more” tag. Make sure that any formatting is closed before the “more” tag though; don’t put it in the middle of a list or a multi-paragraph blockquote.
And that just about brings this tutorial to a close. For anyone else who’s wanted to learn how to truncate titled (long) posts while displaying untitled (short) ones in full, I hope this has helped you out!
