Change Hugo Theme to LoveIt

1 Motivation

After using hugo-clarity theme, I change my mind to use the other theme. I like:

• Admonition in post
• Technical friendly view
• Dynamic table of content in right-side bar
• Comment function

All above is supported by LoveIt theme.

2 (Not recommend) buckup and create new Gitlab repository

I wanted to backup hugo-clarity theme based content as switching hugo theme is not easy. Beyond specifying theme by theme = "LoveIt" at config.toml or hugo --theme command, I needed to setup many at config.toml and fixed other sources that depends on the themes.

I changed gitlab repository name and path by:

• Settings > General > name (“site” to “site_clarity”)
• Settings > General > Advanced > Change path (“site” to “site_clarity”)

Then set url for git at local by:

1
2
3

mv site site_clarity
cd site_clarity
git remote set-url origin git@gitlab.com:tatoflam/site_clarity.git

After this, I could open Hugo server on http://localhost:1313/site_clarity by hugo serve.

3 Setup LoveIt

Newly setting up Hugo site and LoveIt theme. It’s the same with when I did hugo-setup

Create project and install theme

Create project name as “site” and install LoveIt as submodule.

1
2
3
4

hugo new site site
cd site
git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

Basic configuration

Configured config.toml. minimally. What I changed from LoveIt documentation - basic configuration are highlighted below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

baseURL = "https://tatoflam.gitlab.io/site/"
# [en, zh-cn, fr, ...] determines default content language
defaultContentLanguage = "en"
# language code
languageCode = "en"
title = "My New Hugo Site"

# Change the default theme to be use when building the site with Hugo
theme = "LoveIt"

[params]
  # LoveIt theme version
  version = "0.2.X"

[menu]
  [[menu.main]]
    identifier = "posts"
    # you can add extra information before the name (HTML format is supported), such as icons
    pre = ""
    # you can add extra information after the name (HTML format is supported), such as icons
    post = ""
    name = "Posts"
    url = "posts/"
    # title will be shown when you hover on this menu link
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "categories/"
    title = ""
    weight = 3

# Markup related configuration in Hugo
[markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false

4 Fix LoveIt and configuration

After setting like above I run hugo server, however it failed. I needed to do:

• Change layouts/shortcodes/instagram.html as I did hugo-setup - add App ID and Client code for getJson from Instagram API].

• Fix themes/LoveIt/layouts/partials/function/content.html. It’s because an error is raised on hugo server.

  Failure

  execute of template failed: template: partials/function/content.html:17:15: executing "partials/function/content.html" at <partial "function/escape.html" $content>: error calling partial: partials that returns a value needs a non-zero argument.
  

  I fixed high-lighted below at themes/LoveIt/layouts/partials/function/content.html.

  11 12 13 14 15 16 17 18 19 20 21 22 23 24

  {{- if .Fontawesome -}} {{- $content = partial "function/fontawesome.html" $content -}} {{- end -}} {{- if .Checkbox -}} {{- $content = partial "function/checkbox.html" $content -}} {{- end -}} {{- if .Escape -}} {{- $content = partial "function/escape.html" $content -}} {{- end -}} {{- return $content -}}

  • ToDo: pull requext to LoveIt.
  • Ref. Hugo - Error with partials in 0.75.0

Then I could run:

1

hugo server

After confirming minimal configuration for LoveIt, I checked themes/LoveIt/exampleSite/config.toml and copied/tweaked what worth trying.

Finally, I launched this site 😄

References

• LoveIt documentation
• ブログをFirebase+Hugo+LoveItに移行した
• Hugo + LoveItでWebサイトを作る
• Hugo Host on Gitlab
• Hugo Configuration markup
• Hugo Shortcodes
• Hugo Inline Shortcodes
• Hugo LoveIt Emoji Support
• goldmark
• Goldmarkの設定
• emoji-cheat-sheet

ToDo

• Pull request to LoveIt.
• Write about themes/LoveIt as submodule update
• Check out emoji on LoveIt ➡️ 🙆‍♂️
• Check goldmark
• Check CDN related stuff
• Adjust font-size at admonition.