Hugo Notice screenshot

Hugo Notice

Author Avatar Theme by Martignoni
Updated: 15 Jan 2026
272 Stars

A Hugo theme component to display nice notices

Overview

The Hugo Notice theme component is designed to provide a shortcode that allows users to display attractive notices on their Hugo websites. The component supports dark mode and offers four notice types: warning, info, note, and tip. It also includes localization in 17 languages, making it accessible to a wide range of users.

Features

  • Notice Shortcode: Provides a shortcode to display notices on Hugo websites.
  • Dark Mode Support: Notices can be displayed in dark mode for an enhanced user experience.
  • Four Notice Types: Users can choose from warning, info, note, and tip notice types to suit their needs.
  • Localization: The component offers localization in 17 languages, including English, French, German, Italian, Portuguese, Spanish, Chinese, Russian, Turkish, Arabic, Polish, Finnish, Korean, Vietnamese, Swahili, Japanese, and Chinese (Taiwan).

Installation

There are two ways to install the Hugo Notice theme component:

  1. Hugo Module:

    • Initialize your existing site as a Hugo module.
    • Add the Hugo Notice module and your currently used theme as modules in your site or theme configuration file (hugo.yaml or hugo.toml).
    • Example (hugo.yaml):
      module:
        imports:
          - path: github.com/martignoni/hugo-notice
          - path: <your-theme-module>
      
    • Example (hugo.toml):
      [[module.imports]]
      path = "github.com/martignoni/hugo-notice"
      
      [[module.imports]]
      path = "<your-theme-module>"
      
  2. Git Submodule:

    • Add the Hugo Notice as a submodule to be able to get upstream changes later.
    • Use the command: git submodule add https://github.com/martignoni/hugo-notice.git themes/hugo-notice.
    • Add Hugo Notice as the left-most element of the theme list variable in your site or theme configuration file (hugo.yaml or hugo.toml).
    • Example (hugo.yaml):
      theme:
        - hugo-notice
        - <your-other-themes>
      
    • Example (hugo.toml):
      theme = ["hugo-notice", "<your-other-themes>"]
      

Summary

The Hugo Notice theme component provides a shortcode that allows users to display attractive notices on their Hugo websites. It offers dark mode support and includes four notice types: warning, info, note, and tip. The component also offers localization in 17 languages, making it a versatile and accessible option for Hugo users. Installation can be done either using Hugo module or Git submodule methods.