ℹ️ Recommendations

Documentation
1

Micro.blog has a feature to let you create a list (or “blogroll”) of recommended blogs. You can include this list on your home page, or as a separate page, and Micro.blog will also link to it from your profile page.

The interface for managing recommendations is available under Design → Edit Recommendations. You can add new recommendations, remove them, or drag the icon on the right side to re-order them.

image
image2046×1078 167 KB

For another introduction to this feature, see Manton’s blog post about it.

Shortcode

To add your recommendations to a separate page on your blog, create a new page and add a reference to the new shortcode. Hugo will replace this with your list of blogs:

{{< blogroll >}}

By default, the blogroll will use the default blogroll which is named “Recommendations”. If you have multiple blogrolls, you can specify one by passing the name:

{{< blogroll name="Favorite Authors" >}}

When using the shortcode, Micro.blog will also include a new <link> tag so that other apps can discover the blogroll. It looks like this in your HTML:

<link rel="blogroll" type="text/xml" href="/.well-known/recommendations.opml">

Files and Hugo

Recommendations are stored primarily in two new files on your blog:

  • /.well-known/recommendations.opml
  • /.well-known/recommendations.json

(This location was chosen to match a similar implementation from Ghost.)

Blogrolls can also be manually imported or exported as OPML.

Micro.blog will also save the recommendations to separate data files available to Hugo. Usually there will only be one named “recommendations”, but you could have multiple like:

  • .Site.Data.blogrolls.recommendations
  • .Site.Data.blogrolls.favorite_authors

This data is an array of recommendations with fields like name and url. For example, to loop through the data and show the name:

{{ range .Site.Data.blogrolls.recommendations }}
   <p>{{ .name }}</p>
{{ end }}

The fields available are:

  • name
  • url
  • feed_url (RSS)
  • about
  • created_at
  • updated_at

Styling recommendations

The blogroll shortcode plug-in uses a simple HTML list. If you’d like to style it, you can use something like this in Design → Edit CSS:

ul.blogroll li {
  list-style-type: none !important;
}

ul.blogroll li a {
  text-decoration: none;
  color: black;
}

ul.blogroll li a span {
  color: gray;
}

@media (prefers-color-scheme: dark) {
  ul.blogroll li a {
    color: white;
  }
}

Webmention

Inspired by Ghost’s implementation for recommendation notifications, Micro.blog will send a webmention to any site you link to in a blogroll. It does this once, a few minutes after the first time you add a blog to a blogroll. If you want to receive this request, expect it to look something like this:

POST /webmention
Content-Type: application/x-www-form-urlencoded

target=https://myfavoriteblog.com/&source=https://myblog.com/.well-known/recommendations.json
4 Likes