hugo-notice icon indicating copy to clipboard operation
hugo-notice copied to clipboard

A Hugo theme component to display nice notices

hugo-notice

Awesome

About

A Hugo theme component providing a shortcode: notice to display nice notices. Dark mode supported!

Four notice types are provided: warning, info, note and tip.

This component comes with localization in 15 languages: English, French, German, Italian, Portuguese, Spanish, Chinese, Russian, Turkish, Arabic, Polish, Finnish, Korean, Vietnamese and Swahili.

Other languages welcome! Send your pull request.

Screenshot

Usage

  1. Add the hugo-notice as a submodule to be able to get upstream changes later git submodule add https://github.com/martignoni/hugo-notice.git themes/hugo-notice
  2. Add hugo-notice as the left-most element of the theme list variable in your site's or theme's configuration file config.yaml or config.toml. Example, with config.yaml:
    theme: ["hugo-notice", "my-theme"]
    
    or, with config.toml,
    theme = ["hugo-notice", "my-theme"]
    
  3. In your site, use the shortcode, this way:
    {{< notice warning >}}
    This is a warning notice. Be warned!
    {{< /notice >}}
    
    or
    {{< notice tip >}}
    This is a very good tip.
    {{< /notice >}}
    

Credits

Copyright © 2019 onwards, Nicolas Martignoni [email protected].

Thanks to