Params Configurations

Example

[params]
  background = "#fff"
  backgroundImage = "/me/background.jpg"
  linkColor = "seagreen"
 
  # dark mode
  # defaultDark = true
  backgroundDark = "black"
  backgroundImageDark = "/me/background-dark.jpg"
  darkLinkColor = "darkseagreen"
  # darkNav = true
  # dark404 = true
 
  images = [""]
 
  author = "g1eny0ung"
  description = "g1eny0ung 的生活记录～"
  avatar = "/me/yy.jpg"
  headerTitle = "g1eny0ung 的博客"
  motto = "与其感慨路难行，不如马上出发。"
  # maxTags = 5
  # categoriesLimitInHeader = 6 # deprecated
  # headerBottomText = "" # deprecated
 
  # footerBottomText = ""
 
  rss = true
 
  utterancesRepo = "g1eny0ung/g1eny0ung.github.io"
 
  # valine = true
  # LEANCLOUD_APP_ID = ""
  # LEANCLOUD_APP_KEY = ""
  # VALINE_LANGUAGE = ""
 
  email = "[email protected]"
  twitter = "g1eny0ung"
  facebook = "g1eny0ung"
  instagram = "g1enyy0ung"
  # mastodon = ""
  linkedin = "钺杨g1eny0ung"
  github = "g1eny0ung"
  stackoverflow = "5676489/g1eny0ung"
  codepen = "g1eny0ung"
 
  siteStartYear = 2016
 
  favicon = "/favicon.ico"
 
  highlightjs = true
  # highlightjsCDN = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"
  highlightjsExtraLanguages = ["ocaml"]
  highlightjsTheme = "gruvbox-light"
  highlightjsThemeDark = "gruvbox-dark"
 
  # search
  enableSearch = true
 
  # options
  showSummaryCoverInPost = true
  # hasTwitterEmbed = true
  # reversePostAndAside = true
  # shareInAside = true
  fixedNav = true
  # collapsibleTags = true
  # collapseBySummary = true
 
  [params.advanced]
    customCSS = ["css/custom.css"]
    # customJSBefore = []
    # customJS = []
 
  [params.experimental]
    jsDate = true
    jsDateFormat = "yyyy年MM月dd日"

For more details with dark mode related params, see Dark Mode.

background = "#ccc"

The site's background.

This param can be used with backgroundImage, when the image has not been loaded yet, it will serve as the background color.

backgroundImage = "/me/background.jpg"

The site's background image. Will cover the background param.

linkColor = "seagreen"

The site's link color.

defaultDark = true

Set the default theme to dark.

Note: if you set the theme to light manually, this param will be overridden.

backgroundDark = "black"

The background in dark mode.

backgroundImageDark = "/me/background-dark.jpg"

The background image in dark mode. Will cover the backgroundDark param.

darkLinkColor = "darkseagreen"

The site's link color in dark mode.

darkNav = true

Set the dark top navbar, usually use with dark background or backgroundImage.

Note: if you already set backgroundDark or backgroundImageDark, the darkNav param will be ignored.

dark404 = true

Set the inverted color in 404 page, usually use with dark background or backgroundImage.

Note: if you already set backgroundDark or backgroundImageDark, the dark404 param will be ignored.

dark404Button = true

Note: after https://github.com/g1eny0ung/hugo-theme-dream/commit/b07d6e22183bad58a8498429bc49fca77082533c (opens in a new tab), this param is deprecated. If you are using the latest version of dream, you can safely ignore this param.

Set the dark button in 404 page, usually use with dark background or backgroundImage.

images = [""]

See https://gohugo.io/templates/internal/#open-graph (opens in a new tab).

author = "g1eny0ung"

The author field will be used as:

<meta name="author" content="g1eny0ung" />
Header
Post Summary

description = "g1eny0ung 的生活记录～"

The description field will be used as:

<meta name="description" content="g1eny0ung 的生活记录～" />

avatar = "/me/yy.jpg"

Used in Header.

headerTitle = "g1eny0ung 的博客"

Dream was originally intended to be used only as a blog theme. But with continuous development, people also use Dream in other places.

~~So this param aims to replace the legacy blogAlias in i18n files. If this param is set, the header title will use it rather than author + blogAlias (e.g. xxx's blog).~~ (blogAlias was deprecated and removed at 2021-05-06)

motto = "与其感慨路难行，不如马上出发。"

Used in Header.

maxTags = 5

Limit the number of labels displayed visually. The hidden tags will be displayed in the form of an Accordion (opens in a new tab).

categoriesLimitInHeader = 6

Deprecated. Only available before v2.0.0

Limit the number of categories displayed in the header, the default is 6.

headerBottomText = ""

Deprecated. Only available before v2.0.0

Add text at the bottom of the header, support html. This is usually used as a description of the website information.

footerBottomText = ""

Only available after v2.0.0

Add text at the bottom of the footer, support html. This is usually used as a description of the website information.

rss = true

Enable RSS.

utterancesRepo = "g1eny0ung/g1eny0ung.github.io"

Utterances is a lightweight comments widget built on GitHub Issues. By setting utterancesRepo, you can use it on every post page.

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

valine = true

Valine is a fast, simple & efficient Leancloud based no back end comment system.

In order to make it work, you still need to set first two parameters:

[params]
  LEANCLOUD_APP_ID = ""
  LEANCLOUD_APP_KEY = ""
  VALINE_LANGUAGE = ""

Default language param is "zh-CN" , other supported languages are "zh-TW" , "en" , "ja" .

View https://valine.js.org/en/quickstart (opens in a new tab) to get more details.

Social Links

Deprecated. Now you can do the rendering of socials with a custom data file. This file must be named socials.toml and must contain the array named socials.

Example: https://github.com/g1eny0ung/blog/blob/master/data/socials.toml (opens in a new tab).

email = "[email protected]"
twitter = "g1eny0ung"
facebook = "g1eny0ung"
instagram = "g1enyy0ung"
# mastodon = ""
linkedin = "钺杨g1eny0ung"
github = "g1eny0ung"
stackoverflow = "5676489/g1eny0ung"
codepen = "g1eny0ung"

All of these social links will be showed on about page layouts/partials/back.html.

You can open an issue or pull a request to add a social link.

Or add by yourself. Follow the template in layouts/partials/socials.html.

siteStartYear = 2016

Set your site's start year, then the header will show as siteStartYear - currentYear (eg: 2016 - 2020).

favicon = "/favicon.ico"

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

highlightjs = true

View Highlight.js for more details.

enableSearch = true

View Search for more details.

showSummaryCoverInPost = true

As the param said, show summary cover in the single post page.

hasTwitterEmbed = true

If you have embedded twitter components generated from https://publish.twitter.com/ (opens in a new tab), please set this param to true for better performance.

After setting this, you can safely remove the async script in the generated code.

reversePostAndAside = true

Reverse the position of the post content and its aside.

shareInAside = true

Display share buttons in aside, not under the post title.

fixedNav = true

Make navbar fixed when scrolling.

collapsibleTags = true

Make /tags page's tags collapsible.

collapseBySummary = true

If your posts contain duplicate titles, you can use this param to continue grouping the titles. The lowest level will use .Summary to render.

Advanced

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

customCSS = ["css/custom.css"]

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.

customJSBefore = []

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

customJS = []

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

Experimental

Note:

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 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, the date 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 Dark Mode