Hugo Clarity

A technology-minded theme for Hugo based on VMware's open-source Clarity Design System featuring rich code support, dark/light mode, mobile support, and much more. See a live demo at neonmirrors.net.

Preview on Desktop

| Light Mode | Dark Mode | |---| --- | | | |

Preview on Mobile

| Light Mode | Dark Mode | |---| --- | | | |

Table of Contents

• Features
• Prerequisites
• Getting up and running
• Configuration
  • Global Parameters
  • Page Parameters
  • Menus
  • Main Menu
  • Social media
  • Search Engine
  • Blog directory
  • Mobile menu positioning
  • Tags and taxonomies
  • Images
  • Code
  • Table of contents
  • Notices
  • Custom CSS and JS
  • Forcing light or dark mode
  • Internationalization - I18N
  • Hooks
  • Comments
  • Math notation

Features

• Blog with tagging and category options
• Deeplinks
• Native Image Lazy Loading
• Customizable (see config)
• Dark Mode (with UI controls for user preference setting)
• Toggleable table of contents
• Flexible image configuration
• Logo alignment
• Mobile support with configurable menu alignment
• Syntax Highlighting

• Rich code block functions including:

  1. Copy to clipboard
  2. Toggle line wrap (dynamic)
  3. Toggle line numbers
  4. Language label
  5. Toggle block expansion/contraction (dynamic)

  To put it all in context, here is a preview showing all functionality.

  

Prerequisites

Firstly, ensure you have installed the extended version of Hugo. See installation steps from Hugo's official docs.

Getting up and running

Read the prerequisites above and verify you're using the extended version of Hugo. There are at least two ways of quickly getting started with Hugo and the VMware Clarity theme:

Option 1 (recommended)

Generate a new Hugo site and add this theme as a Git submodule inside your themes folder:

hugo new site yourSiteName
cd yourSiteName
git init
git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity
cp -a themes/hugo-clarity/exampleSite/* .

Then run

hugo server

Hurray!

Option 2 (Great for testing quickly)

You can run your site directly from the

exampleSite

git clone https://github.com/chipzoller/hugo-clarity
cd hugo-clarity/exampleSite/
hugo server --themesDir ../..

Although, option 2 is great for quick testing, it is somewhat problematic when you want to update your theme. You would need to be careful not to overwrite your changes.

Option 3 (The new, most fun & painless approach)

This option enables you to load this theme as a hugo module. It arguably requires the least effort to run and maintain your website.

Ensure you have

go

brew install go

git clone https://github.com/chipzoller/hugo-clarity.git clarity
cd clarity/exampleSite/
hugo mod init my-site
cd ..
cp -a exampleSite/* .

Open config.toml file in your code editor, replace

theme = "hugo-clarity"

theme = ["github.com/chipzoller/hugo-clarity"]

theme = "github.com/chipzoller/hugo-clarity"

Hurray you can now run

hugo server

To pull in theme updates, run

hugo mod get -u ./...

There is more you could do with hugo modules, but this will suffice for our use case here.

Configuration

If set, jump over to the

config.toml

This section will mainly cover settings that are unique to this theme. If something is not covered here (or elsewhere in this file), there's a good chance it is covered in this Hugo docs page.

Global Parameters

These options set global values that some pages or all pages in the site use by default.

| Parameter | Value Type | Overridable on Page | |:---- | ---- | ---- | | author | map / string | no | | twitter | string | no | | largeTwitterCard | boolean | no | | gaanalytics | string | no | | baiduanalytics | string | no | | plausibleanalytics | boolean | no | | matomoanalytics | boolean | no | | description | string | yes | | introDescription | string | no | | introURL | string/false | no | | numberOfTagsShown | integer | no | | fallBackOgImage | file path (string) | no | | codeMaxLines | integer | yes | | codeLineNumbers | boolean | yes | | mainSections | array/string | no | | centerLogo | boolean | no | | logo | file path (string) | no | | iconsDir | dir path (string) | no | | mobileNavigation | string | no | | figurePositionShow | boolean | yes | | figurePositionLabel | string | no | | customCSS | array of file path (string) | no | | customJS | array of file path (string) | no | | enforceLightMode | boolean | N/A | | enforceDarkMode | boolean | N/A | | titleSeparator| string | no | | showShare | boolean | yes | | comments | boolean | yes | | numberOfRecentPosts | integer | no | | numberOfFeaturedPosts | integer | no | | dateFormat | string | no | | enableMathNotation | boolean | yes | | customFonts | boolean | no | | since | integer | N/A | | rsssummary | boolean | N/A | | rsssummaryreadmore_link | boolean | N/A | | footerLogo | string | N/A |

Page Parameters

These options can be set from a page frontmatter or via archetypes.

| Parameter | Value Type | Overrides Global | |:---- | ---- | ---- | | title | string | N/A | | date | date | N/A | | description | string | N/A | | draft | boolean | N/A | | featured | boolean | N/A | | tags | array/string | N/A | | categories | array/string | N/A | | toc | boolean | N/A | | thumbnail | file path (string) | N/A | | featureImage | file path (string) | N/A | | shareImage | file path (string) | N/A | | codeMaxLines | integer | yes | | codeLineNumbers | boolean | yes | | figurePositionShow | boolean | yes | | figurePositionLabel | string | no | | comments | boolean | yes | | enableMathNotation | boolean | yes | | showDate | boolean | N/A | | showShare | boolean | N/A | | showReadTime | boolean | N/A | | sidebar | boolean | N/A | | singleColumn | boolean | N/A |

Modify Menus

Main Menu

To add, remove, or reorganize top menu items, edit the files here. Specifically look for items with

[[main]]

If you prefer the more traditional approach, delete

content\config

config.toml

Social media

To edit your social media profile links, edit the files referenced above. Specifically, look for items with

[[social]]

If you wish to globally use a large Twitter summary card when sharing posts, set the global parameter

largeTwitterCard

true

Web site analytics

If using Google Analytics, configure the

ga_analytics

If using Baidu Analytics, configure the

baidu_analytics

If using Plausible Analytics, configure the

plausible_analytics

enable

true

websiteDomain

plausibleDomain

scriptName

If using Matomo Analytics, configure the

matomo_analytics

enable

true

websiteDomain

matomoDomain

matomoSiteID

Blog directory

Edit

config.toml

mainSections

[params]
...
mainSections = ["posts", "docs", "blogs"]
...

For more info, see the Hugo docs.

Mobile menu positioning

The navigation menu when mobile browsing can be configured in

config.toml

[params]
...
mobileNavigation = "left" # Mobile nav menu will open to the left of the screen.
...

Tags and Taxonomies

Show number of tags

The number of tags and taxonomies (including categories) that should be shown can be configured so that any more than this value will only be accessible when clicking the All Tags button. This is to ensure a large number of tags or categories can be easily managed without consuming excess screen real estate. Edit the

numberOfTagsShown

[params]
...
numberOfTagsShown = 14 # Applies for all other default & custom taxonomies. e.g categories, brands see https://gohugo.io/content-management/taxonomies#what-is-a-taxonomy
...

Number of tags example

Images

Image figure captions

You have the option of adding captions to images in blog posts and automatically prepending a desired string such as "Figure N" to the alt text. This is controlled via two global settings.

figurePositionLabel

figurePositionShow

figurePositionShow

The number will be automatically calculated and assigned after the

figurePositionLabel

Image figure captions example

In this example,

figurePositionLabel

config.toml

![Antrea Kubernetes nodes prepared](./images/image-figure.png)

NOTE: Alt text with double quotes will produce broken HTML per limitations with Markdown. It is recommended to omit any quotations from your alt text.

Inline images

To make a blog image inline, append

:inline

Inline images example

![:inline](someImageUrl)

Float images to the left

To align a blog image to the left, append

:left

Float images left example

![:left](someImageUrl)

Round borders for images

To make the image borders round, append

::round

Round borders for images example

![::round](someImageUrl)

Add classes to images

To add a class image to the left, append

::

:: 

Image class example

![::img-medium](someImageUrl)

Article thumbnail image

Blog articles can specify a thumbnail image which will be displayed to the left of the card on the home page. Thumbnails should be square (height:width ratio of

1:1

...
thumbnail: "images/2020-04/capv-overview/thumbnail.jpg"
...

The thumbnail image will take precedence on opengraph share tags if the shareImage parameter is not specified.

Article featured image

Each article can specify an image that appears at the top of the content. When sharing the blog article on social media, if a thumbnail is not specified, the featured image will be used as a fallback on opengraph share tags.

...
featureImage: "images/2020-04/capv-overview/featured.jpg"
...

Share Image

Sometimes, you want to explicitly set the image that will be used in the preview when you share an article on social media. You can do so in the front matter.

...
shareImage = "images/theImageToBeUsedOnShare.png"
...

Note that if a share image is not specified, the order of precedence that will be used to determine which image applies is

thumbnail

featureImage

fallbackOgImage

fallbackOgImage

Align logo

You can left align or center your site's logo.

...
centerLogo = true # Change to false to align left
...

If no logo is specified, the title of the site will appear in its place.

Code

Display line numbers

Choose whether to display line numbers within a code block globally with the parameter

codeLineNumbers

true

false

[params]
...
codeLineNumbers = true # Shows line numbers for all code blocks globally.
...

Limit code block height

You can globally control the number of lines which are displayed by default for your code blocks. Code which has the number of lines exceed this value will dynamically cause two code block expansion buttons to appear, allowing the user to expand to full length and contract. This is useful when sharing code or scripts with tens or hundreds of lines where you wish to control how many are displayed. Under params in

config.toml

[params]
...
codeMaxLines = 10 # Maximum number of lines to be shown by default across all articles.
...

If the value already exists, change it to the desired number. This will apply globally.

If you need more granular control, this parameter can be overridden at the blog article level. Add the same value to your article frontmatter as follows:

...
codeMaxLines = 15 # Maximum number of lines to be shown in code blocks in this blog post.
...

If

codeMaxLines

config.toml

10

15

If

codeMaxLines

100

Table of contents

Each article can optionally have a table of contents (TOC) generated for it based on top-level links. By configuring the

toc

true

Table of contents (TOC) example

Custom CSS and JS

To minimize HTTP requests per page, we would recommend loading CSS styles and JavaScript helpers in single bundles. That is to say, one CSS file and one JavaScript file. Using Hugo minify functions, these files will be minified to optimize the size.

Going by the above 👆🏻 reason, we recommend adding custom CSS and JS via these files:

1. _override.sass

   . This file should only be used to override sass & css variables e.g theme colors

2. _custom.sass

   . This file should only be used to override everything else except sass & css variables.

3. custom.js

   .

Pro Tip: Ensure that your changes are git trackable by creating these files outside the theme directory. That is, at the root level of your site's directory. See tree below.

├── yourSite
│   ├── archetypes
│   │   └── post.md
│   ├── assets
│   │   ├── js
│   │   │   └── custom.js
│   │   └── sass
│   │       ├── _custom.sass
│   │       └── _override.sass
│   ├── config
│   │   └── _default
│   │       ├── config.toml
│   │       ├── configTaxo.toml
│   │       ├── languages.toml
│   │       ├── markup.toml
│   │       ├── menus
│   │       │   ├── menu.en.toml
│   │       │   └── menu.pt.toml
│   │       └── params.toml
│   ├── content
│   │   ├── _index.md

However, sometimes you may need to load additional style or script files. In such cases, you can add custom

.css

.js

config.toml

static

[params]
...
customCSS = ["css/custom.css"] # Include custom CSS files
customJS = ["js/custom.js"] # Include custom JS files
...

Notices

This theme includes functionality to display some "hightlight blocks" - called "notices" using a shortcode.

For example, see the shortcode markup below will render as a notice:

{{% notice note "Note Title" */%}}
This will be the content of the note.
{{% /notice %}}

For more examples see the "Notices" page in the

exampleSite

Forcing light or dark mode

By default, sites authored using Clarity will load in the browser with the user's system-wide settings. I.e., if the underlying OS is set to dark mode, the site will automatically load in dark mode. Regardless of the default mode, a UI control switch exists to override the theme mode at the user's discretion.

In order to override this behavior and force one mode or another, add either

enforceLightMode

enforceDarkMode

config.toml

To enforce Light Mode by default, turn

enforceLightMode

true

To enforce Dark Mode by default, turn

enforceDarkMode

true

[params]
...
enforceLightMode = true # Force the site to always load in light mode.
...

Please note that you cannot enforce both modes at the same time. It wouldn't make sense, would it?

⚠️ Please also note that the mode toggle UI will remain in place. That way, if a user prefers dark mode, they can have their way. The best of both worlds.

I18N

This theme supports Multilingual (i18n / internationalization / translations)

The

exampleSite

Things to consider in multilingual:

• supported languages are configured in config/_default/languages.toml
• add new language support by creating a new file inside i18n directory. Check for missing translations using

  hugo server --i18n-warnings

• taxonomy names (tags, categories, etc...) are translated in i18n as well (translate the key)
• menus are translated manually in the config files config/_default/menus/menu.xx.toml
• menu's languages list are semi-hardcoded. You may chose another text for the menu entry with languageMenuName. Please, do better and create a PR for that.
• content must be translated individually. Read the official documentation for information on how to do it.

note: if you do NOT want any translations (thus removing the translations menu entry), then you must not have any translations. In the exampleSite that's as easy as removing the extra translations from the

config/_default/...

sed '/^\[pt]$/,$d' -i config/_default/languages.toml && rm config/_default/menus/menu.pt.toml

To change the values of translatable text, such as

read_more

copyright

i18n

Hooks

Clarity provides some hooks for adding code on a page.

If you need to add some code (CSS import, HTML meta or similar) to the head section on every page, add a partial to your project:

layouts/partials/hooks/head-end.html

Similar, if you want to add some code right before the body end (e.g fonts' links), create your own version of the following file:

layouts/partials/hooks/body-end.html

Comments

Clarity supports Hugo built-in Disqus partial. You can enable Disqus simply by setting

disqusShortname

You can also override layouts/partials/comments.html to take advantage of disqus comments Alternatives for details.

Please leave

#disqusShortname = ""

commented out if you decide to use other comments tools

You can disable them site-wide by setting

comments = false

[params]

You can override these setting from each post individually. For example, you may want to disable/enable comments on specific posts. Use the same syntax used on the config.toml file.

please use

comments

and not

comment

Math notation

Clarity uses KaTeX for math type setting if

enableMathNotation

true

Also see supported TeX commands in KaTeX.

If you want chemical typesetting provided by the

mhchem

[site]/themes/clarity/layouts/partials/math.html

[site]/layouts/partials/math.html

# cd /path/to/site
mkdir -p layouts/partials && cp themes/clarity/layouts/partials/math.html layouts/partials/math.html

Then add the corresponding line as its README suggested (without the

+

The added line should be before

auto-render.min.js

katex.min.js

MathJax

The new version of MathJax has comparable performance to KaTeX and better support for TeX commands.

If you prefer MathJax, create a blank

[site]/layouts/partials/math.html

This file will take precedence over the one Clarity provides and the site will load MathJax instead of KaTeX.