Sidebar For Bayou

Sidebar for Bayou works in a similar way to Sidebar for Tiny Theme in that the sidebar uses some hooks that Matt has graciously added to the Bayou theme itself. This means any of the documented micro-hooks will be untouched.

By default the sidebar will only consist of your blog recommendations, although this can be changed (see below).

The sidebar adopts the theming of your blog so there shouldn’t be a need to modify the CSS. It will slightly increase the width of any page it’s placed on, so as to avoid making the main body too narrow. To avoid this from happing on small screens, such as phones in the portrait orientation, the sidebar will be completely hidden. Pages without the sidebar will not change.

Sidebar for Bayou comes with the following properties:

• Show sidebar on posts: When enabled, the sidebar will appear on the individual pages of blog posts.

• Show sidebar on other pages: When enabled, the sidebar will appear on all pages other than blog posts. This includes the Archive, Photos, and any other page added to the site.

Turning on both options will show the sidebar on all pages of the site. Turning both off will only show the sidebar on the home and entry list page.

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.

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

<!-- Your blogroll recommendations -->
{{ partial "sidebar-widgets/recommendations.html" . }}

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

Widgets are the available pre-made sidebar items that can be used alongside any custom HTML. They use the Sidebar Design System in that each item is wrapped in a <div class="sidebar-item"> element.

Recommendations Blog-roll

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

{{ partial "sidebar-widgets/recommendations.html" . }}

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

Links List

Displays a simple list of links.

{{ partial "sidebar-widgets/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.