Hugo Themes

Prev/Next: All Themes

Hugo Material Blog

Download
Hugo Material Blog

Hugo Material Blog

Clean Material Design blog theme for Hugo.

Demo

You can find a demo here.

Screenshots

preview preview

Configuration

Check exampleSite/config.toml for an example configuration.

Cover image

You can use the cover_image param in the frontmatter of a post to include a cover image:

cover_image: "images/image1.jpeg"

Brand

The brand can be overriden by adding your own layout layouts/partials/brand.html. Check exampleSite/layouts/partials/brand.html for an example.

Footer content

The footer content can be overriden by adding your own layout in layouts/partials/footer-content.html. Check exampleSite/layouts/partials/footer-content.html for an example.

The navbar displays the main menus by default. You can find more details about how to configure it here, as well as in the exampleSite/config.toml.

You can include menus in the footer by setting them in the footer_menus array:

[params]
  [[params.footer_menus]]
    name = "Services"
    menu = "services"
  [[params.footer_menus]]
    name = "Links"
    menu = "other"

This also supports localization:

[languages.en]
  languageName = "English"
  [[languages.en.params.footer_menus]]
    name = "Services"
    menu = "footer1"
  [[languages.en.params.footer_menus]]
    name = "Other"
    menu = "footer2"

[languages.fr]
  languageName = "Français"
  [[languages.fr.params.footer_menus]]
    name = "Services"
    menu = "footer1"
  [[languages.fr.params.footer_menus]]
    name = "Autre"
    menu = "footer2"

Check exampleSite/config.toml for more examples.

Additional content in <head>

You can add your own content in the <head> by overriding partials/head-custom.html.

License

Open sourced under the MIT license.

See Also