Modules

In this section

• Modules Overview
  This article shows how to install, uninstall, upgrade, clean and tidy modules.
• Core Module
  • Core Module Overview
    The core module of HB Framework.
  • Core Module Configuration
    Site parameters and page parameters of HB core module.
  • Core Module HugoPress Definitions
    List of HB core module's custom HugoPress attributes and hooks.
  • Modules Principle
    This article describes the structure of the module, its principles and some development conventions.
• Header Module
  Universal header module.
  • Header Overview
    The header module is a universal top app bar that ships with some useful sub modules, such as search form, social links, light/dark mode toggle and language picker.
  • Header Menus

    This article describes how to configure the header’s menus.

  • Header Search Module

    The header’s search module displays a search form and button to open the search modal.

  • HB Header Git Repository Module
    This module shows information about the Git repository on the header, such as latest release, number of stars and number of forks
  • HB Header Git Organization Module
    This module shows information about the Git organization on the header, such as avatar, number of followers, number of repositories and total number of stars.
  • Header News Module
    The HB header news module is an alternative to the announcement bar, the recent news will be shown automatically.
  • Header Google Custom Search Engine Module
    Add Google custom search engine on the header.
  • Header Banner
    Show a image or a video on the header.
  • Header Themes
    This article shows the available header themes.
  • Header DocSearch Module

    DocSearch is a free online search service for open source documentation sites.

  • Header Socials Module

    The header’s socials generates social links.

  • Header Theme Toggle Module

    The header’s theme toggle module for switching light, dark or auto (follow system) color mode.

  • Header's Language Picker Module

    The header’s language picker module for users to switch supported languages, it’s useful for multilingual sites.

• Footer Module
  Universal footer module.
  • Footer Overview

    This module is a universal footer, which ships with menus and some useful sub modules, i.e. social links.

  • Footer Menus

    This article describes how to configure the footer’s menus.

  • Footer Beian Module

    Beian (备案 in pinyin), it was designed for Chinese sites that display links about ICP records.

  • Footer Hooks

    The list of footer’s custom hooks.

  • Footer Socials

    The footer’s socials generates social links.

• Base Module

  The base module provides several basic layouts and templates for other modules, such as a landing page, a custom 404 page, a header and a footer module.

• Blog Module
  Universal blog module.
  • Blog Overview

    The blog module provides the basic layouts and templates for blog site.

  • Blog Authors

    The blog module supports multiple authors by default.

  • Blog Revision Module
    Show revision information below the post content.
  • Blog Social Share Buttons Module
    Display social share buttons below the blog post content.
  • Blog Sidebar
    • Blog Sidebar Overview

      The blog module supports an optional sidebar layout.

    • HB Blog Profile Sidebar Module
      Introduce yourself or your company with title, description, location, social media and so on.
    • Blog Sidebar Posts Module

      This module shows the recent and featured posts on the blog’s sidebar.

    • Blog Taxonomies Sidebar Module

      This module shows the taxonomies on the blog’s sidebar.

  • Blog Breadcrumb

    This module display the breadcrumb for blog layouts.

  • Blog Content Panel

    This module integrates content panel with blog module.

  • Blog Hooks

    The list of blog’s custom hooks.

  • Blog Post Authors Module
    This module display the post's authors on the top or bottom of content.
  • Blog Post Navigation

    The post nav module generates the menus below the post content, to navigate to previous and next posts of same sections.

  • Blog Sticky Till The End Module
    By default, the sidebar and ToC (table of contents) will sticky until reach the footer, with this module, they can be sticky all the time.
  • Blog ToC Scrollspy Module

    Automatically update table of content navigation to indicate which heading is currently active in the viewport.

  • Comments Engine
    • Blog Staticman Comments Module

      This module integrate the Staticman comments module with blog layout.

    • Blog Giscus Comments Engine

      This module adds support for the Giscus comments engine, which powered by GitHub Discussions.

    • Blog Twikoo Module

      This module add support for the Twikoo, a simple, safe and free comments system.

    • Blog Utterances Comments Engine

      This module adds support for the Utterances comments engine, which built on top of GitHub issues.

    • Disqus

      This module adds support for the Disqus comments engine.

    • Emote

      This module adds support for the Emote comments engine.

  • Featured Image

    This module shows the featured image above the post content if present.

  • Heading Sign

    The heading sign module shows the section sign (anchor link) when hovering on headings.

  • Related Posts

    This module shows the related posts below the post content.

• Docs Module
  Universal documentation module.
  • Docs Overview

    The docs module provides the basic layouts and templates for docs site, it’s useful for writing project documentation, digital garden, users guides and tutorials.

  • Docs Social Share Buttons Module
    Display social share buttons below the docs content.
  • Docs Revision Module
    Show revision information below the post content.
  • Comments Engine
    • Docs Staticman Comments Module

      This module integrate the Staticman comments module with docs layout.

    • Docs Disqus

      This module adds support for the Disqus comments engine.

    • Docs Giscus Comments Engine

      This module adds support for the Giscus comments engine, which powered by GitHub Discussions.

    • Docs Twikoo Module

      This module add support for the Twikoo, a simple, safe and free comments system.

    • Emote

      This module adds support for the Emote comments engine.

    • Utterances

      This module adds support for the Utterances comments engine, which built on top of GitHub issues.

  • Doc Navigation

    The doc nav module generates the menus for navigating to previous and next docs of same sections.

  • Docs Breadcrumb

    This module display the breadcrumb for docs layout.

  • Docs Content Panel

    This module integrates content panel with blog module.

  • Docs Featured Image Module

    This module shows the featured image above the doc content if present.

  • Docs Heading Sign

    The heading sign module shows the section sign when hovering on headings.

  • Docs Hooks

    The list of docs’s custom hooks.

  • Docs Sticky Till The End Module
    By default, the sidebar and ToC (table of contents) will sticky until reach the footer, with this module, they can be sticky all the time.
  • Docs ToC Scrollspy Module

    Automatically update table of content navigation to indicate which heading is currently active in the viewport.

• Gallery Module
  • Gallery Overview

    The gallery module provides a simple layout for images.

  • Gallery Breadcrumb

    This module display the breadcrumb for gallery layout.

  • Gallery Hooks

    The list of gallery’s custom hooks.

• Meta Modules

  The meta modules do not provide any functionalities, they are just a set of modules, to simplify the installation and uninstallation of the modules.

• Content Modules
  • Inline Frame Module

    This module ships with an universal inline frame shortcode.

  • Blockquote Alerts Module
    Module to generate alerts via blockquote, which is much simpler than using shortcodes.
  • Bootstrap Module

    This module ports Bootstrap module to HB, to add missing components.

  • Mermaid Module

    Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.

• Enhancement Modules
  • Contact Module

    The contact module ships with a layout and shortcode for generating contact forms, which are designed to be compatible with mosts of form backends.

  • Announcement Bar

    The announcement bar module makes important thing stand out, such as news and project’s releases.

  • Bigger Picture Module

    When clicking any non-linkable image, the bigger picture module shows the original size of the the clicked image.

  • HB PWA Installer
    HB PWA installer module shows a button on the bottom to add the site to home screen.
  • PWA Module

    This module integrates the Hugo PWA module with HB, to customize the offline page and tweak some parameters.

• Look and Feel
  • Bootstrap Tooltip for Abbreviations
    Replace built-in abbreviations tooltip with Bootstrap Tooltip.
  • Google Fonts Module
    This module integrates Google fonts with HB framework, which allow specifying multiple fonts and their axises.
  • Background Image Module

    As literally, this module sets the background image for pages.

  • Code Block Panel

    The code block panel provides abilities to expand code, copy code, wrap code and toggle code line numbers.

  • Progress Bar Module

    A progress bar will be shown when opening a new page in the current tab and window.

  • Scrollbar Module

    The scrollbar module changes the default browser scrollbar style.

  • Syntax Highlighting Modules

    HB provides various of syntax highlighting modules, this article lists the supported styles.

• User Experience
  • Back to Top Module

    AKA return to top, a button to back to top.

  • No Script Module

    The noscript module display a alert message if the user browser doesn’t support JavaScript.

  • Preferred Language Module

    When the defaultContentLanguageInSubdir is enabled, Hugo will redirect the home page to the default language site, e.g. / -> /en/. This module will attempt to redirect the site based on the user’s preferred language.

• Components
  • HB ToC Scollspy Module
    Automatically update table of content navigation to indicate which heading is currently active in the viewport.
  • Bootstrap Tooltip Module
    This module adds Bootstrap Tooltip support for HB Framework.
  • HB Heading Sign Module
    This module shows an anchor link next the the heading when users hovering.
  • HB Revision Module
    Describe page with extra info, such as the create date, modified date and so on.
  • HB Social Share Buttons Module
    This module allows users sharing your pages to popular social media.
  • HB Breadcrumb Component
    HB breadcrumb component for indicating the current page’s location.
  • Staticman Comments Module

    The staticman comments module ships with flexible template for other modules, to generate comment form and show the nested comments.

  • Content Panel Module

    This module display a content panel on single pages, which includes translations, comments and repo buttons.

  • Pagination

    This module ships with an universal pagination template, which allows configuring by parameters, such as alignment, size and the number of siblings.

  • Search Module

    The search module integrates HB with the Hugo Search Module, a powerful, flexible and responsive Hugo client side fuzzy search module.

  • Slide Module

    The module implements a simple slide, the blog related posts module was built on top of it.

  • Socials Module
    Module to generate social links.
• Shortcodes
  Extended Shortcodes for HB Framework.
  • HB Spoiler Tag Shortcode
    Spoiler tags allow you to write text that some users may not want to see and hide until the reader chooses to see it.