Social Comments

Currently, Dream supports these comment systems:

• Disqus (opens in a new tab)
• utterances (opens in a new tab)
• Valine (opens in a new tab)
• Waline (opens in a new tab)

Disqus

In hugo.toml, set:

[services]
[services.disqus]
shortname = "..."

Disqus comments will be showed on the Single Post Page and About Page.

Compatible with oklch colors

Disqus will detect the color scheme of the website and change the color of the comments accordingly. However, Disqus does not support oklch colors (opens in a new tab) which is used in Dream.

To make Disqus work with Dream, we need to make an extra hack.

First, create a custom css file in static/css/custom.css:

[data-theme="emerald"] #disqus_thread {
  color-scheme: none;
  background-color: #fff;
  color: #333c4d;
}
 
[data-theme="forest"] #disqus_thread {
  color-scheme: none;
  background-color: #171213;
  color: #cbc9ca;
}

The background-color and color can be obtained by inspecting the website in the browser. Follow below steps:

1. Open the devtools in the browser (press F12).
2. Click the html tag in the Elements tab.
3. Then search for background in the Styles tab.
4. Open the color picker and transfrom the oklch format to hex format.
5. Copy them to the custom css file.

After finishing above steps, remember to include this custom css file in customCSS in hugo.toml:

[params]
[params.advanced]
customCSS = ["css/custom.css"]

You may want to change the default themes emerald and forest to other themes. Refer to light-and-dark-mode and update background-color and color accordingly.

utterances

See: utterancesRepo

The utterances only takes effect on the Single Post Page.

Valine

See: valine

Valine only takes effect on the Single Post Page.

Waline

See: waline

Waline only takes effect on the Single Post Page.