Hugo

SUMMARY

use themes as your own repositories
insert and resize images
center images
add emoji
add travel map
Why my local website doesn't update after I update my markdown files?
link pages and tiles
Add Giscus comment in Hugo-book theme

Remove git in themes, and use themes as your own repositories.

 git rm --cached hugo-book -f

So that, we could modify, git add, and git push the theme repository as our own.

How to insert images and resize images?

The file tree is like

    ├─content
    │  │  _index.md
    │  └─posts
    │      │  hugo.md
    │      │  _index.md
    │      └─images
    │           Nice.png

In hugo.md file, we add Nice.png and scale it by

{{< figure src="../images/Nice.png" width="400" alt=" ">}}

Why we need to add `../` in front of `images` folder, altough `hugo.md` file and `images` folder are at the same level?

Because Hugo system sees hugo.md as a foler too. However, Hugo system sees _index.md as a file! Therefore, If we want to insert iamges in _index.md file, the command will be like:

{{< figure src="../images/Nice.png" width="400" alt=" " >}}

Center the image?

<center>{{<figure src="../images/Nice.png" width="400" alt=" ">}}</center>

At the same time, in hugo.toml, add

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

How to add emoji?

Directly copy emoji icon 👋 and paste to .md file, instead of using :wave:.

Emoji Copy&Paste: https://emojidb.org/number-emojis

How to add a travel map in Hugo?

Refer to this article

In {{< openstreetmap mapName="<your map name>" >}}, the <your map name> is not the name you give to your map, but the name in the website link of your map. For example, I created a map whose name is Travel, I need to use travel_1036974 in the hugo shortcode. {{< figure src="../images/map.jpeg" width="400" alt="umap">}}

Why my local website doesn't update after I update my markdown files?

It works well if I Press Ctrl+C to stop the local host, and hugo server again, I can see the updated website in http://localhost:1313/.

How to link pages and tiles?

I am in now.md file now, and there is another page.md which has #Title I want to link. I want to link to page.md and link to #Title I want to link. In page.md file, add an anchor:

# Title I want to link {#anchor}

In now.md file, add commands:

[text]({{< ref "./pages.md" >}}) # link to one page
[text]({{< ref "./pages.md#anchor" >}}) # link to the title

Add Giscus comment in Hugo-book theme

Create a new public github repository, e.g. site-comment.
Enable the discussions feature.
Install the giscus app

For example,

Configure giscus codeblock. Go to Giscus App, and get the anable Giscus.

Add the script to themes\hugo-book\layouts\partials\docs\comments.html, like this

6. `bookComments: false` controls whether you want to display comment in this page.

Huilin's Book