3. Hugo Site Customization

Getting started? Wowchemy has a collection of beautiful templates for you to choose from.

Want to personalize the template? No problem, a Wowchemy template is fully customizable. In fact, you can change so many elements, it would be difficult to find the original template it was made from.

This page explains some common site customizations. You might also be interested in customizing the homepage.

Check out the Guides for details on each feature and for more advanced customization by extending Wowchemy.

Table of Contents

Personalise your URL

View the Custom Domain guide →

Hide Published With Wowchemy

Want to hide or customize the Published with Wowchemy notice in the footer?

The notice can be automatically removed whilst ❤️ sponsoring ❤️ on the Creator tier or above.

Otherwise, please leave the attribution to this open source initiative that you benefit from intact. If the notice is not already translated for your language, refer to the Language guide to translate it.

Website icon

Are you looking to customize the desktop and mobile icon (aka favicon) which appears in your site’s Progressive Web App (PWA) and web browser tab?

Save your icon as a square 512x512 pixel image named icon.png and place the image in your root assets/media/ folder, creating the folders if they don’t already exist.

Appearance

The following options in config/_default/params.yaml can be set to personalise the appearance of your site:

# Your choice of color theme
theme: minimal
# Automatically change light/dark mode based on user's preference?
day_night: true
# Your choice of font
font: ''  # No value = inherit font from color theme pack (e.g. minimal)
# Your choice of font size
font_size: L

Light and Dark Modes

Setting day_night to true will automatically change the theme mode according to the user’s preference.

To force either a light or dark theme, set this option to false.

The light and dark themes can be configured in your theme pack.

Color Themes

Wowchemy comes bundled with a variety of popular themes built-in including:

To choose a theme, set the theme option in config/_default/params.yaml.

Alternatively, you can create your own theme.

Fonts

Your theme comes with a font set to style your titles and text, but you may choose to override it by specifying one of the following built-in font sets or creating your own font set:

  • Minimal (modern)
  • Classic (original Academic v1 style)
  • Rose (traditional serif)
  • Mr Robot (futuristic)
  • Native: use device fonts for maximum performance

To choose a font set, set the font option in config/_default/params.yaml.

Font Sizes

The font size can be changed all the way from extra-small to extra large using the font_size option in config/_default/params.yaml. Supported font sizes are xs, s, m, l, xl.

Community Themes

In this section, we will curate themes submitted by users. To create your own theme and request it to be added to this section, follow these steps:

Custom theme

Both the colour theme and font set can be customized.

To customize a color theme:

  1. Copy a color theme such as minimal.toml to data/themes/my_theme.toml at the root of your site, creating the data/themes/ folders if they do not already exist. Note: avoid using spaces in filenames.
  2. Adjust the colors within your theme file using HTML color codes
  3. Tell Wowchemy to use your new theme by setting theme: my_theme in config/_default/params.yaml

Custom font

To customize the font set:

  1. Copy a font set such as minimal.toml to data/fonts/my_font_set.toml at the root of your site, creating the data/fonts/ folders if they do not already exist. Note: avoid using spaces in filenames.
  2. Adjust the font family, choosing from the library of Google Fonts if you wish - refer to the Google Font guide below
  3. Tell Wowchemy to use your new font set by setting font: my_font_set in config/_default/params.yaml

To select a free web-font available from Google Fonts:

  1. Visit Google Fonts
  2. Click on each font you wish to use
  3. For each font, click + Select this style for each style you wish to use
  4. Click on the icon at the top right (View your selected families) to open the dialog box on the right
  5. Click on Embed
  6. Under <link>, copy the part of the URL starting from family= to &display=swap... (not included) and paste it as the google_fonts option in your new font theme
    • For example, if Google gives you <link href="https://fonts.googleapis.com/css2?family=B612+Mono&family=Open+Sans&display=swap" rel="stylesheet">, set google_fonts = "family=B612+Mono&family=Open+Sans"
  7. Under CSS rules to specify families in Google Font’s dialog, copy the font name and paste it as one of the fonts in your font theme
    • For example, given font-family: 'B612 Mono', monospace;, copy B612 Mono

Change font size

You can modify the font size all the way from extra-small to extra large using the font_size option in config/_default/params.yaml.

Choose from XS (extra small), S (small), M (medium), L (large - DEFAULT), and XL (extra large).

Share your theme

If you create your own theme, consider giving it a unique name and sharing your new theme or font set with the community or following the guide below so that it can be considered for curation.

You can choose from the following options to customise the site header containing the navigation bar:

main_menu:
  # Display the navigation bar?
  enable: true
  # Align menu links: left (l), center (c), or right (r)
  align: l
  # Display your site title or `assets/media/logo*` image in the nav bar?
  show_logo: true
  # Show a language chooser (if you have translated your site content)?
  show_translations: true
  # If `show_translations` is enabled, do you wish to display the current language name?
  show_language: false
  # Let the user override the default light/dark mode of your theme?
  show_day_night: true
  # Let the user search from the nav bar?
  show_search: true
  # Attempt to automatically highlight the active menu link? Can be disabled for complex sites.
  highlight_active_link: true

Add your own message to the footer of a site using the copyright text field in config/_default/config.yaml.

Optionally, you can choose a Creative Commons copyright license in config/_default/params.yaml:

copyright_license:
  enable: false
  allow_derivatives: false
  share_alike: true
  allow_commercial: false
  notice: >-
    Except as otherwise noted, this work is licensed under {license}, and code
    samples are licensed under the MIT License.

A copyright_license can also be displayed on a per-page basis by adding the option directly to a page’s front matter.

You can also display a language chooser in the footer:

footer:
  show_translations: true

Localization

The date, time, and address formats can be localized in config/_default/params.yaml. For example,

date_format: 'Jan 2, 2006'
time_format: '3:04 PM'
address_format: en-us

Date/time options

Hugo uses the following constants to format dates and times:

Type Options
Year 06 2006
Month 01 1 Jan January
Day 02 2 _2 (width two, right justified)
Weekday Mon Monday
Hours 03 3 15
Minutes 04 4
Seconds 05 5
AM/PM PM pm
Timezone MST
Offset -0700 -07 -07:00 Z0700 Z07:00

To modify the format, edit date_format and time_format in config/_default/params.yaml using the above constants. For example, some common formats are:

Format Type
January 2, 2006 Date
01/02/06
Jan-02-06
Mon, 02 Jan 2006
Monday, 02 Jan 2006
15:04 Time
3:04 PM
15:04 MST

Address formats

If you display addresses on your site, such as for events or contact sections, you can choose an address format.

Don’t see the format you want? Contribute one or override the linked file to add your own.

Interface language

Personalise the interface text or choose a translation

Site Features

Refer to the Guides for the main features such as SEO, page sharing, and commenting.

Additional site features that can be customized in params.yaml are covered below.

SEO

View the SEO guide →

Commenting

View the Commenting guide →

Analytics

View the Analytics guide →

Social sharing

View the Social Sharing guide →

Code syntax highlighting

highlight: true
# Add any additional languages here that are not included by default in Highlight.js
highlight_languages:
- r

Latex math

math: true

Diagrams

Draw diagrams on pages using the Markdown-like Mermaid syntax:

diagram: true

Privacy

When the privacy pack is activated, a cookie consent message will be shown to visitors (linking to your Privacy Policy) and visitor IPs anonymized in Google Analytics (if enabled).

Enabling the privacy pack in params.yaml:

privacy_pack: true

To add a Privacy Policy, create a privacy.md file in your content folder and remove any draft option from the front matter to publish it.

Similarly, to add Legal Terms, create a terms.md file. Links to these documents will automatically appear in your site footer.

Link to edit page

Let your users suggest improvements to pages. A link will be added to the page footer for each page type under editable.

edit_page:
  repo_url: ''
  content_dir: ''
  repo_branch: main
  editable:
    page: false
    post: true
    book: true

Recommendations

Recommend similar content to your readers at the end of pages.

Set the page types to enable recommendations on:

show_related:
  book: true
  page: false
  post: true
  project: true
  publication: true
  event: true

View the Search guide →

Security

View the Security guide →

Maps

Choose a map provider in order to display a map in the Contact widget.

The following map providers are supported: '' (no map), google, mapnik, or mapbox. Some map providers provide an api_key to set.

For example, to use Mapnik’s map service:

map:
  provider: 'mapnik'
  api_key: ''
  zoom: 15

After choosing a provider, set your map coordinates (also in params.yaml):

coordinates:
  latitude: '37.4275'
  longitude: '-122.1697'

If you do not know your coordinates, you can retrieve them from Google Maps after searching for a location, or from alternative apps.

Previous
Next

Last updated on 6 Oct, 2021