Long form blogging - HomePage layout

Hello Micro-bloggers

I am exploring Micro.blog for my blog - merecivilian.com

I noticed most blogs hosted on Micro.blog appears to be micro-blogs. I kindly request the community to share examples of blogs that are doing long-form writing on the Micro.blog platform, so I can get an idea on how that works.

For my homepage, I prefer not to have the entire blogpost. I prefer the homepage to have a list of articles (with description), please see image below as an example. How can I do this using Micro.blog

Many thanks :pray:

You can achieve this by using a summery instead of all the content.

Something similar to

 <div class="e-content">
    {{ .Summary }}
    {{ if .Truncated }}
      <p><a href="{{ .RelPermalink }}">Read More</a></p>
    {{ end }}
  </div>
1 Like

thanks Greg

I also found this:
https://help.micro.blog/t/truncated-posts-on-your-microblog/60

Thats where I got the code I was using from I think.

Me. moondeer.blog

To see what I did you can browse my modified marfa theme theme-moondeer

The trick to making the truncation pretty is the inclusion of <!--more-->

To jump straight to long form examples hit perspectives or personal-favorites

1 Like

Thanks @moondeer

I checked out your persona-favourite page and I like what I see. It sure does look nice and pretty.

I kindly request you to please advice which file I need to edit for the Marfa theme for me to get it like you have setup. What would be the exact code so I can copy paste it?

Let me get back to you tomorrow when I have some Adderall onboard;)

Actually, I will add a bit at a time via updating this post.

I will go through the structural stuff first and then double check config settings.

In layouts/partials/post-list.html it appears the only modification I made was to change the two appearances (lines 7 and 12) from

{{ partial "post-item.html" . }}

to

{{ partial "truncated-post-item.html" . }}

which is a new file we will create (and making reversing the truncation as simple as changing this back).

This a modified version of layouts/partials/post-item.html.

You’ll hit new template, set the path to layouts/partials/truncated-post-item.html and paste this code into the body.

<li>
<article>
  {{ if .Title }}
  <section class="post-body">
  <header>
	<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
  </header>
  <section class="post-body">
	{{ .Summary }}
    {{ if .Truncated }}
      <p><a href="{{ .RelPermalink }}">Read More</a></p>
    {{ end }}
  </section>
  </section>
  {{ else }}
	{{ .Content }}
  {{ end }}
  <a href="{{ .Permalink }}" class="u-url">
	<aside class="dates">
	  <time datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}" class="dt-published">→ {{ .Date.Format "3:04 PM, Jan 2" }}</time>
	</aside>
  </a>
</article>
</li>
<span class="separator"><span class="divider"></span></span>

The modification is using the presence of a title to determine whether there should be truncation.

The super huge important thing to remember when creating a post you want to be truncated is to include the following where you want the summary to end (or at the end if it is short enough to show all the text).

<!--more-->

Be on the lookout for editors trying to turn the two minus signs into a dash. If you find yourself in such a situation, enter - - and then go back to delete the space.

Including this bit of code basically tells Hugo to format exactly like it normally would instead of just tossing the first 70 characters (by default) together without formatting or images.

The code above takes care of the category pages, I will now go over getting a homepage looking the same way.

(I should probably mention CSS changes like font, size, etc. but this will be superficial stuff that can be held until last).

The way to wrangle what goes into your home page is to create a new template with the path layouts/index.html

The following is the current contents of this file in my theme. I oughta modify that hardcoded 10 on line 6 to respect the setting in config.json as well as respect the setting for whether to paginate at all (as manton does in layouts/partials/post-list.html).

If you definitely want to paginate, for now you can copy paste and just set the 10 to however many posts you want per page.

You can also include or ignore line 42, that sticks the profile at the bottom so the landing page has a complete h-card.

{{/* Created for more control over the home page */}}
{{ define "main" }}
<ul id="post-list">

{{/* Pagination currently ignoring the setting in config.json */}}
{{ $paginator := .Paginate (where .Pages "Type" "post") 10 }}
{{ range $paginator.Pages  }}

  <li>
    <article>
    {{/* Truncate posts with titles */}}
      {{ if .Title }}
      <section class="post-body">
        <header>
          <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
        </header>
        <section class="post-body">
          {{ .Summary }}
            {{ if .Truncated }}
              <p><a href="{{ .RelPermalink }}">Read More</a></p>
            {{ end }}
        </section>
      </section>
      {{ else }}
        {{ .Content }}
      {{ end }}
      <a href="{{ .Permalink }}" class="u-url">
        <aside class="dates">
          <time datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}" class="dt-published">→ {{ .Date.Format "3:04 PM, Jan 2" }}</time>
        </aside>
      </a>
    </article>
  </li>
  <span class="separator"><span class="divider"></span></span>

{{ end }}

</ul>

{{ partial "pagination.html" . }}
{{/* Include bio so there is an h-card on the home page. */}}
{{ partial "profile.html" . }}
{{ end }}

Probably a good point to stop and see how that goes, and what you still want to tweak, etc.

I finally stuck my whole theme into a repository and made it public, so you can refer to it as well here

And someone holler if I forgot anything.

2 Likes

Wholeheartedly thanking you @moondeer

Following the first part of your instructions, I have uploaded the theme and now my blog looks a closer to what I was hoping:
https://merecivilian.micro.blog

It seems I need to learn a few things. Its not as easy as it is with Ghost. However, learning is part of the fun and definitely makes the journey enjoyable.

I will now be subscribing to see if I can import all my posts from my ghost blog: merecivilian.com

Glad to hear it. Just holler as things come up. I didn’t know anything about Hugo until last November and I hadn’t messed with web stuff in a decade, so it is certainly something anyone can pick up with a bit of reading and some old fashioned trial and error.