New - Tiny Theme 2.0 with Microhooks
I’ve been very happy with the success and development of Tiny Theme since its inception. However, there has always been one big obstacle I’ve had trouble over-coming. Basic CSS customization has always been possible, but I wanted to create a way for more advanced customizations without requiring users to over-write major elements of the theme (and thus missing out on future updates).
Introducing Microhooks
I’m calling this new feature Microhooks. It allows users to add (or modify) elements without having to over-write critical parts of Tiny Theme. For example, previously, if you wanted to add an email subscription box to the bottom of each post, you’d either have to code that in to every post OR completely over-write the single post implementation of Tiny…and if the single post implementation of Tiny ever got updated, well…good luck. Now, there’s another way.
Due to the growing popularity of Tiny Theme, I have created a documentation site that has information more current than this post.
Version 2.2 of Tiny Theme includes these Microhooks:
- microhook-head.html
- microhook-profile-photo.html
- microhook-title.html
- microhook-description.html
- microhook-navigation.html
- microhook-post-list.html
- microhook-before-post-list.html
- microhook-after-post-list.html
- microhook-after-post.html
- microhook-categories.html
- microhook-share-button.html
- microhook-after-comments.html
- microhook-after-page-content.html
- microhook-footer.html
- microhook-before-closing-body.html
- microhook-archive-lead.html
- microhook-uncss.html
How to Enable a Microhook (Initial Setup)
First, this requires Tiny Theme on your Micro.blog. Make sure it’s installed and active. Next, you’ll need to create a Custom Theme in the Micro.blog dashboard (go to Design page) and activate it. At this point, nothing will have changed on your theme, you’ve just laid the ground work for your modifications.
(See the first section entitled Getting Started with Themes on this post.)
Activating Microhooks
You’ll need to edit your newly created custom theme. Here’s where the magic happens. You’ll create a new template in that theme with the name of the appropriate path and microhook.
Examples:
layouts/partials/microhook-after-post.html
layouts/partials/microhook-footer.html
The layouts/partials/
portion is REQUIRED for all microhooks.
By doing that you’ve activated that particular microhook. Now, whatever you add to that new template will be reflected in your theme.
Details of Each Microhook
Due to the growing popularity of Tiny Theme, I have created a documentation site that has information more current than this post.
Of course, you’ll need to know what each Microhook does and any limitations they might have. Let’s go through them one by one.
microhook-head.html
This hook enables you to add anything between the <head></head>
tags of your document. For example, certain scripts and meta tags might go here. If you previously used the Tiny Theme Add-On: Browser Color plugin, this is where you’d place your browser color meta tags.
microhook-profile-photo.html
Replace the image/logo at the top of your site. While you can put any content here (even text), the standard is an image wrapped in <a href=""></a>
.
microhook-title.html
Modify the “title” area of your site. For reference, here is the default implementation.
<h1><a class="site-title p-name u-url" href="/">{{ .Site.Title }}</a></h1>
microhook-description.html
By default, Tiny Theme uses your account description below your site title. However, you may want to build that out further. If you activate this Microhook, the default description area will be completely removed. It will be replaced with whatever you add here. You can go wild.
microhook-navigation.html
This one will completely remove the default navigation panel of Tiny Theme. It will be replaced with your custom content. Want a hamburger menu or something more complex? Have at it!
microhook-post-list.html
Be Careful! This one requires advanced knowledge of Hugo and Micro.blog. By activating and using this microhook, you will completely remove the built-in list of posts and pagination from your blog’s main page. This should only be used for reconstructing the post list and pagination in full. Potential use-cases for this microhook are displaying posts based on category or changing posts to reverse chronological order.
If you use this microhook, you will also be over-riding any use of the microhook-post-summary.html',
microhook-before-post-list.htmland
microhook-after-post-list.html` microhooks. Additionally, the Summary Posts plugin for Tiny will no longer work.
Don’t be too scared. If you do break things, you can simply delete this microhook from your installation and all will return to as it was. It is advanced, but not irreversible.
microhook-before-post-list.html
This will apply only to your main blog page. Anything added here will appear before the first post on your main blog page. You could use it for a call-to-action box, add a news alert, or anything your heart desires.
microhook-after-post-list.html
Use this microhook to add content below the post list on your main blog page.
microhook-after-post.html
Add content here that will display at the bottom of every individual post you create. The most common reasons to use this box would be for an author description or an email subscription box.
microhook-categories.html
Activating this microhook will remove the list of categories from single posts and replace it with your content. The primary use of this microhook would simply be re-working how categories are pulled in and displayed or placing some other content in its place.
microhook-share-button.html
Many people have buttons at the bottom of their posts. Examples might be a Tinylytics Kudos button, a Reply on Micro.blog button, or a Reply on Mastodon button. You can use this microhook to add additional links/buttons here. Whatever you add here will be wrapped in the same <ul></ul>
tags as the other buttons. You’ll need to format this microhook as such:
<li><a href="link here">Text here</a></li>
These links (you can add multiple in one hook) will fall inline with the other links. You’ll need to style them in Custom CSS as well.
microhook-after-comments.html
Want to add content after the comments on an individual post? Perhaps a disclaimer for affiliate links?
microhook-after-page-content.html
Add whatever you’d like after the content of all PAGES (not posts) on your site.
microhook-footer.html
This will completely remove the Tiny Theme default footer INCLUDING Micro.blog’s Custom Footer functionality. If you want a complex footer design that doesn’t seem possible with current Tiny and Micro.blog options, you can go fully custom here.
microhook-before-closing-body.html
If you need to add scripts that load after the page content, this is the best place for them. Google Analytics, Font Providers, etc.
microhook-archive-lead.html
Add content below the “Archive” title and above the list of categories/posts on the main archives page. Often used to help readers understand your categorization strategy or provide RSS links.
microhook-pagination.html
Activating this microhook will override the main blog page pagination in full (it will NOT disable pagination). The most obvious use of this is to re-work the pagination design/layout of Tiny Theme. This microhook requires advanced knowledge of Hugo and Micro.blog.
microhook-uncss.html
Are you a web designer who likes to handle your own CSS? This microhook is for you. Activating it will remove ALL default styling (main.css
) for your site, enabling you to style it from scratch. Once enabled, you have 3 options for adding your own styling.
- Add your own stylesheet using
<link rel="stylesheet" href="your-styles.css">
- Create an internal stylesheet within the microhook by utilizing
<style></style>
- Leave the microhook blank and use Micro.blog’s built-in Custom CSS feature
If at any point, you’d like to return to Micro.blog’s default styling, you can just delete this microhook and rebuild the site.
How it Works
Tiny Theme checks to see if you’ve enabled any microhooks. If you have, it’ll pull in any that you’ve added and incorporate it into the theme automatically. Since these microhooks are exclusive to your custom theme and are not supplied by Tiny, you aren’t over-writing a single file. When Tiny is updated, you’re not blocking any updates from going through with your files. And your changes will stay live through the update.
I’d love to see what you manage to make using Microhooks. And I plan to add a few more soon.
Due to the growing popularity of Tiny Theme, I have created a documentation site that has information more current than this post.