Configuring the theme
Contents
Lucid theme can be configured with the config.toml
of your Hugo project. Here are a few options you should be aware of.
Theme options
The following are the default options. You do not have to copy-paste this into the config unless you want to change something.
[Params.Lucid]
defaultDisplayMode = "auto"
displayModeSwitcher = false
# plausibleAnalytics = true
# plausibleDomain = "example.com"
defaultDisplayMode
auto
(default value) - uses light or dark mode based on user’s display preferenceslight
- Uses light mode for sitedark
- Uses dark mode for site
displayModeSwitcher
true
(default value) - Allow users to toggle light or dark modesfalse
- Do not allow users to toggle light or dark mode
plausibleAnalytics
Enables Plausible Analytics for your site. For your convenience, this option is only applied when your site is built for deployment. Not when a local Hugo server is running.
The related option plausibleDomain
allows you to set the domain for reporting analytics to Plausible. Read below on how this is useful.
- If your blog is at “example.com” and your domain on Plausible is also “example.com”, then you have nothing to do
- If your blog is at “www.example.com” and your domain on Plausible is “example.com”, then set the value of
plausibleDomain
option towww.example.com
Setup navigation links
- To configure links for the site navigation, specify items using the
[[Params.Lucid.NavLinks]]
key in yourconfig.yml
. - Links show up in the same order they are specified in the
config.yml
file.
Add a navigation link to another page
[[Params.Lucid.NavLinks]]
name = "About"
link = "/about"
Add a navigation link to another website
[[Params.Lucid.NavLinks]]
name = "Podcast"
link = "https://example.com/podcast"
Add links to social networks
The them supports navigation links to social networks. These are displayed using icons of the social networks. Use one of the following keys:
twitter
github
instagram
youtube
Examples below
[[Params.Lucid.NavLinks]]
twitter = "https://twitter.com/example"
[[Params.Lucid.NavLinks]]
github = "https://github.com/example"
[[Params.Lucid.NavLinks]]
instagram = "https://instagram.com/example"
[[Params.Lucid.NavLinks]]
youtube = "https://youtube.com/example"
Example config for navigation links
The following config will display 2 links for “About” and “Podcast” and then followed by Twitter and GitHub links.
[[Params.Lucid.NavLinks]]
name = "About"
link = "/about"
[[Params.Lucid.NavLinks]]
name = "Podcast"
link = "https://example.com/podcast"
[[Params.Lucid.NavLinks]]
twitter = "https://twitter.com/example"
[[Params.Lucid.NavLinks]]
github = "https://github.com/example"
Enabling any other analytics
To insert the snippets for any other analytics, checkout this page on how to include custom content into the head
tag of pages on the site.