Much like how Tiny Theme’s micro-hooks system works, the sidebar can be customised using Micro.blog’s template designer. To customise the sidebar, you’ll need to create a custom theme for your blog. For anyone that hasn’t done this before, the instructions below will show you how to do this. Further help can be found within Micro.blog help guide about themes. Those that have done this before, or already have a custom theme, can skip to the next section.

To create a custom theme:

  1. In the sidebar of Micro.blog’s website, click on Design.
  2. Click on Edit Themes.
  3. Click New Theme. You’ll be asked for a name for your theme. I tend to go with a name that matches the site, such as “Theme for lmika.org”, but use whatever makes sense for you.
  4. After creating a new theme, you’ll be brought into the theme designer for the theme you’ve just created.

At this point, it’s probably easier to click on Design in the sidebar and select the theme you just created as the Custom Theme for your blog. Be sure to click Update Blog Settings to apply the change. Your blog shouldn’t look any different, but you now have a theme for which you can create templates.

Modifying The Sidebar Template

To customise the sidebar, within the Design section:

  1. Click on Edit Themes then select the custom theme your blog is currently using.
  2. Click New Template.
  3. Set the filename to layouts/partials/sidebar.html while leaving the template blank, then click Update Template.

Once the blog has finished updating, you should see the sidebar go blank. Seeing this indicates that the custom theme has properly picked up the template, and that the content of this template will be used for the sidebar.

At this point, any HTML or Go template constructs you add to this template will be used as the content of the sidebar.

The Sidebar Design System

There exists a very loose design system for the sidebar content which, along with the styling, will make a sidebar that looks somewhat uniform. You are not bound by this design system — you can use whatever makes sense for your blog. But if you choose to do so, this section briefly discusses the concepts.

A sidebar consists of one or more “items”. Each item should be wrapped in a <div class="sidebar-item"> element, which will apply spacing and add the rule dividing each element.

The plugin also supports pre-made items available as partials. These can be added to the sidebar using the partial directive and do not need to be wrapped in a <div class="sidebar-item">. The set of pre-made items are described below.

The sidebar can accomodate as many items as you want, although it’s usually a good idea to limit them to a handful or so. Note that the sidebar will be hidden on small screens, so it’s recommended to only include elements that are not strictly necessary to make the site usable.

As an example, the sidebar on this site was configured using the following template:

<!-- Some normal HTML -->
<div class="sidebar-item">
  <p>Put a sidebar on your site, like this.</p>
</div>

<!-- Your blogroll recommendations -->
{{ partial "sidebar-for-tiny-theme/recommendations.html" . }}

<!-- Another blogroll lists, this one for other links -->
{{ partial "sidebar-for-tiny-theme/links.html" (dict
    "title" "Links"
    "links" (index .Site.Data.blogrolls "other-links"))}}

Pre-made Items

The following are the available pre-made items that can be used within the sidebar.

Recommendations Blog-roll

Displays your recommendations blog-roll, styled in a similar way to Manton.org.

{{ partial "sidebar-for-tiny-theme/recommendations.html" . }}

The order of recommendations are preserved and links will be added to download the blog-roll as an OPML or JSON file.

Displays a simple list of links.

{{ partial "sidebar-for-tiny-theme/links.html" <props> }}

Where props is a dict with the following properties:

  • title: the item title, which will appear as a heading above the links
  • links: a list of dict with the following properties:
    • name: the link name, which will be used as the content of the anchor tag
    • url: the link URL

This can be used to include additional blog-rolls or predefined a set of links that will appear on the sidebar.