Params Configurations

This doc introduces all the parameters that can be configured in the [params].

Example

[params]
# zenMode = true
 
lightTheme = "emerald"
darkTheme = "forest"
 
# backgroundImage = "me/background.jpg"
# backgroundImageDark = ""
 
images = ["me/background.jpg"]
 
author = "g1eny0ung"
description = "g1eny0ung 的生活记录～"
avatar = "me/yy.jpg"
headerTitle = "g1eny0ung 的博客"
motto = "与其感慨路难行，不如马上出发。"
 
# footerBottomText = ""
 
rss = true
 
utterancesRepo = "g1eny0ung/g1eny0ung.github.io"
 
# valine = true
# LEANCLOUD_APP_ID = ""
# LEANCLOUD_APP_KEY = ""
 
# waline = true
# walineServer = ""
 
email = "[email protected]"
 
siteStartYear = 2016
 
favicon = "favicon.ico"
 
# Syntax highlighting
customSyntaxHighlighting = true
 
# options
stickyNav = true
# reorderNavItems = ["search", "rss", "posts", "categories", "tags"]
# collapseNavItems = ["posts", "categories", "tags"]
# noDefaultSummaryCover = true
showTableOfContents = true
showSummaryCoverInPost = true
showPrevNextPost = true
# reorderShares = ["x", "facebook", "whatsapp"]
 
[params.advanced]
# customCSS = ["css/custom.css"]
# customJS = []
 
[params.experimental]
jsDate = true
jsDateFormat = "yyyy年MM月dd日"

Basic

zenMode

Zen mode is a simple layout that allows you to concentrate on reading and writing. It uses a simple and clean interface rather than the default masonry layout.

👉 View Zen Mode for more details.

Light and Dark Mode

Required.

You can first add these two parameters to the [params], they are default themes for light and dark mode.

lightTheme = "emerald"
darkTheme = "forest"

For using other themes, view Light and Dark Mode for more details.

backgroundImage

Define a global background image.

backgroundImageDark

Define a global background image in dark mode.

images

View https://gohugo.io/templates/internal/#open-graph (opens in a new tab) for more details.

Use the first one of site images as the fallback image for Open Graph.

author

The author field will be used as:

<meta name="author" content="g1eny0ung" />
In the summary of post cards

description

The description field will be used as <meta name="description" content="g1eny0ung 的生活记录～" />

avatar

Your personal avatar.

headerTitle

The global title of the website.

motto

A motto that will be displayed below the headerTitle. This field is optional.

footerBottomText

Used to display text at the bottom of the site footer, below the siteStartYear field. This field supports HTML.

If this field is not specified, the default text will be displayed as:

🌱 Powered by Hugo with theme Dream.

rss

Enable RSS.

utterancesRepo

Utterances is a lightweight comments widget built on GitHub Issues. By setting utterancesRepo, each post will have a comment section powered by GitHub Issues.

View https://utteranc.es (opens in a new tab) for more details.

valine

Valine is a fast, simple & efficient LeanCloud based no backend comment system. You can view https://valine.js.org/en/index.html (opens in a new tab) for more details.

To make it work, you still need to set these two parameters:

[params]
LEANCLOUD_APP_ID = ""
LEANCLOUD_APP_KEY = ""

To customize Valine, you can create a partial file named valine.html in the layouts/partials folder. Here is an example (opens in a new tab).

You still need to set the valine parameter to true to enable Valine when using a custom partial file.

Other related parameters will be ingored.

waline

Waline is a simple comment system with backend support fork from Valine. You can view https://waline.js.org/en/ (opens in a new tab) for more details.

To enable Waline, you need to set the waline parameter to true and set the walineServer parameter to your Waline server address:

waline = true
walineServer = "https://your-waline-server.com"

If you want to customize Waline, you can create a partial file named waline.html in the layouts/partials folder. Here is an example (opens in a new tab).

You still need to set the waline parameter to true to enable Waline when using a custom partial file.

Other related parameters will be ingored.

siteStartYear

Set the start year of your site, it will be displayed as siteStartYear - currentYear (eg: 2016 - 2020) in the site footer.

favicon

Custom the favicon (opens in a new tab), place it in the static folder.

customSyntaxHighlighting

View Syntax highlighting for more details.

stickyNav

Make navbar sticky when scrolling.

reorderNavItems

Reorder the navigation items.

This parameter is an array of strings, the default value is:

reorderNavItems = ["search", "rss", "posts", "categories", "tags"]

The names of these default items are fixed, and they are the navigation items provided by the Dream theme by default.

This parameter also allows you to remove the default navigation items. For example, if you don't want to show the rss item, you can set the value as:

reorderNavItems = ["search", "posts", "categories", "tags"]

For reordering custom navigation items, see Custom Navbar Items.

collapseNavItems

💡

In mobile, this parameter will not take effect because all navigation items will be collapsed into a dropdown menu.

Collapse specific navigation items to a dropdown menu.

For example, if you want to collapse the posts, categories, and tags items, you can set the value as:

collapseNavItems = ["posts", "categories", "tags"]

For collapsing custom navigation items, see Custom Navbar Items.

noDefaultSummaryCover

If you are not specify the cover field in the front matter of your posts, a default cover image will be displayed in the summary cards.

If you don't want this behavior, you can set this param to true.

showTableOfContents

Show table of contents in the single post page.

showSummaryCoverInPost

Show summary cover image in the single post page.

showPrevNextPost

Show previous and next post links in the single post page.

reorderShares

Same as reorderNavItems, reorder the share buttons in the single post page.

This parameter is an array of strings, the default value is:

reorderShares = ["x", "facebook", "whatsapp"]

This parameter also allows you to remove the default share items. For example, if you don't want to show the whatsapp item, you can set the value as:

reorderShares = ["x", "facebook"]

Advanced

💡

Generally, the following advanced parameters are not necessary to be set. Their main purpose is to further customize the entire theme.

customCSS

Add your custom CSS files after the theme CSS files.

For example, create a folder named css under static, then add custom.css into it.

View Custom Theme for more details.

customJS

Like customCSS, add your custom JS files after the theme JS files.

View Custom Theme for more details.

Experimental

⚠️

The experimental parameters are often not perfect. They have advantages as well as certain disadvantages.

jsDate

Use Luxon (opens in a new tab) to replace the Hugo built-in .Format (opens in a new tab) function. This allows you to define the time format more flexibly.

You may not want to use this param if you want the final date is generated at compile time. After setting this param, all dates will output as an RFC3339 (opens in a new tab) format and all rest format operations will be executed after the page is loaded.

For how to define the format, see below.

jsDateFormat

Refer to this page (https://moment.github.io/luxon/docs/manual/formatting.html (opens in a new tab)) to define your date format.

For example, yyyy-MM-dd represents a date format like 2021-04-17.

Base Configurations Zen Mode