The footer module allows you to manage and customize the footer section of your site. This document will guide you through the features and configuration options available in the footer module.
The footer module provides a universal footer section for HBStack sites, featuring configurable menus, social media links, copyright notices, and extensible hooks for custom content injection. It is the ideal location for placing donation buttons, affiliate disclaimers, newsletter signup links, and other monetization-related elements.
The footer module is a core component of the HBStack framework, automatically included when using the meta/recommended module set. It ships with built-in support for multi-level menus, social link generation, and several extension points via HugoPress hooks.
For monetization purposes, the footer serves as a persistent location across all pages to display donation links (Buy Me a Coffee, Ko-fi, PayPal), social proof indicators (GitHub stars, follower counts), and legal links (privacy policy, affiliate disclosure, terms of use).
The footer module is imported automatically through the meta/recommended package. However, to enable social links in the footer, the socials sub-module must be explicitly imported.
Add the following to config/_default/module.yaml:
1imports:
2 - path: github.com/hbstack/footer/modules/socials
Run the following command to download the module:
1hugo mod get -u github.com/hbstack/footer/modules/socials
After importing, run a Hugo build to confirm the module loads without errors:
1hugo --gc
The footer socials module is also available for the header (github.com/hbstack/header/modules/socials) and the blog sidebar profile.
The footer module supports several configuration parameters under hb.footer in your site parameters.
| Parameter | Type | Default | Description |
|---|---|---|---|
powered_by | boolean | true | Show or hide the powered by HBStack link |
site_title | string | — | Override the site title displayed in the footer |
site_description | string | — | Override the site description displayed in the footer |
site_copyright | string | — | Override the copyright notice in the footer |
1params:
2 hb:
3 footer:
4 powered_by: true
5 site_title: "Ghafoor's Blog"
6 site_description: "Tutorials on Hugo, AI, and Web Development"
The copyright field supports Markdown syntax and the {year} placeholder for dynamic year insertion:
1copyright: Copyright © 2022-{year} [Ghafoor's Blog](https://ghafoors-blog.com). All Rights Reserved.
The footer supports two-level nested menus using the standard Hugo menu system with the identifier footer.
| Parameter | Type | Description |
|---|---|---|
icon.vendor | string | Required. The icon vendor (e.g., bootstrap, font-awesome) |
icon.name | string | Required. The icon name from the vendor set |
icon.color | string | Optional. CSS color value for the icon |
icon.className | string | Optional. Additional CSS classes for the icon |
Configure footer menus in config/_default/menus.yaml or directly in the site config:
1menu:
2 footer:
3 - identifier: about
4 name: About
5 weight: 1
6 params:
7 icon:
8 vendor: bootstrap
9 name: info-circle
10 - name: Privacy Policy
11 parent: about
12 url: /about/privacy/
13 weight: 1
14 params:
15 icon:
16 vendor: bootstrap
17 name: file-text
18 - name: Contact
19 parent: about
20 url: /about/contact/
21 weight: 2
22 params:
23 icon:
24 vendor: bootstrap
25 name: envelope
26 - identifier: support
27 name: Support
28 weight: 2
29 - name: Buy Me a Coffee
30 parent: support
31 url: https://buymeacoffee.com/your-username
32 weight: 1
33 params:
34 icon:
35 vendor: bootstrap
36 name: cup-hot
The footer socials module generates a row of social media icons in the footer. This is the primary mechanism for adding donation and monetization links to the footer.
The socials module supports the following payment and donation platforms natively:
| Identifier | Platform | Use Case |
|---|---|---|
buymeacoffee | Buy Me a Coffee | Donation button |
kofi | Ko-fi | Donation button (no fees) |
paypal | PayPal | Direct payments |
githubsponsors | GitHub Sponsors | Developer sponsorships |
patreon | Patreon | Membership subscriptions |
liberapay | Liberapay | Recurring donations |
opencollective | Open Collective | Transparent funding |
Add social links to the footer by configuring hb.footer.socials in your params:
1params:
2 hb:
3 footer:
4 socials:
5 _color: false # Set to false for monochrome icons
6 buymeacoffee: your-username
7 github: your-username
8 githubsponsors: your-username
9 paypal: your-paypalme-username
10 rss: true # Enable RSS feed icon
The identifier can be either a username or a full URL. For email, use the mailto: prefix:
1socials:
2 email: mailto:user@example.com
Set _color: false to render all social icons in monochrome, matching the site theme:
1socials:
2 _color: false
The footer module exposes several HugoPress hooks for injecting custom content at specific positions.
| Hook Name | Position | Use Case |
|---|---|---|
hb-footer-begin | Before the footer element | Announcement bars, promotional banners |
hb-footer-end | After the footer element | Copyright extensions, secondary notices |
hb-footer-site-info-begin | Before site info (copyright, powered by) | Custom branding elements |
hb-footer-site-info-end | After site info | Affiliate disclaimers, legal text |
Create partial files under layouts/partials/hugopress/modules/hb-custom/hooks/:
1{{/* layouts/partials/hugopress/modules/hb-custom/hooks/hb-footer-end.html */}}
2<div class="container text-center text-muted small py-2">
3 Some of the links on this site are affiliate links.
4 <a href="/about/affiliate-disclosure">Learn more</a>.
5</div>
Then register the hook in your params if not already configured:
1hugopress:
2 modules:
3 hb-custom:
4 hooks:
5 hb-footer-end:
6 cacheable: true
1params:
2 hb:
3 footer:
4 powered_by: true
5 socials:
6 buymeacoffee: ghafoor
7 kofi: ghafoor
8 github: AbdulSayyed
9 rss: true
This configuration renders a footer with Buy Me a Coffee and Ko-fi donation icons alongside the GitHub profile and RSS feed links.
To add a newsletter signup form at the end of the footer, use the hb-footer-end hook:
1{{/* layouts/partials/hugopress/modules/hb-custom/hooks/hb-footer-end.html */}}
2<div class="bg-light py-4">
3 <div class="container text-center">
4 <h5>Stay Updated</h5>
5 <p class="small">Get weekly tutorials delivered to your inbox.</p>
6 <!-- Mailchimp embed code here -->
7 </div>
8</div>
The footer module is a versatile component that serves both structural and monetization purposes. By leveraging its socials configuration, menus, and hooks, site owners can integrate donation buttons, affiliate disclaimers, newsletter signups, and legal links without writing custom template overrides. The module integration with the HBStack socials system means that adding a Buy Me a Coffee or Ko-fi link requires nothing more than a few lines of YAML configuration.