Skip to content

A Hugo theme component to display nice notices

License

Notifications You must be signed in to change notification settings

TeamBlackCrystal/hugo-notice

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

hugo-notice

Awesome

About

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

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

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

Other languages welcome! Send your pull request.

Screenshot

Installation

As a Hugo module

  1. Initialize your existing site as hugo module

    hugo mod init github.com/USERNAME/REPO
  2. Add the hugo-notice as a hugo module to be able to get upstream changes later

    hugo mod get github.com/martignoni/hugo-notice
  3. In your site's or theme's configuration file hugo.yaml or hugo.toml, add a new module section and define both hugo-notice and your currently used theme as modules to be imported.

    Example, with hugo.yaml:

    module:
      imports:
        - path: github.com/martignoni/hugo-notice
        - path: my-theme

    or, with hugo.toml,

    [module]
      [[module.imports]]
        path = "github.com/martignoni/hugo-notice"
      [[module.imports]]
        path = "my-theme"

As a Git submodule

  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 hugo.yaml or hugo.toml.

    Example, with hugo.yaml:

    theme: ["hugo-notice", "my-theme"]

    or, with hugo.toml,

    theme = ["hugo-notice", "my-theme"]

Usage

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 >}}

Enabling dark mode

We recommend that you use the standard prefers-color-scheme CSS media feature to detect if a user has requested light or dark color themes. In this case, dark mode will work automatically. The prefers-color-scheme media feature is fully supported by all modern browsers.

Another way to make it work is to inject (e.g. via Javascript) the class dark into the body element of your pages when dark mode is needed.

Credits

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

Thanks to

About

A Hugo theme component to display nice notices

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%