Hugo 博客搭建日记 2

导航

        Hugo 博客搭建日记 1

本节将介绍 hugo.toml 文件的常用配置

主要目的就是学会怎么配置hugo.toml,

之后就可以直接照搬 hugo theme 里面默认自带的配置，添加自己的内容

1. 配置 hugo.toml

在上一节中，我们在 ~/hugo 目录下初始化了一个名为 hugo-notes 的网站配置

1.1 浏览默认配置

a. 打开配置文件

$ cd ~/hugo/hugo-notes
$ vi hugo.toml

b. 查看配置文件的默认设置

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

1.2 设置主题

a. 选择 FixIt 作为当前博客主题

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

#新增一行内容: 选择 FixIt 作为主题
theme = "FixIt"

b. 执行 hugo server 看看效果

$ cd ~/hugo/hugo-notes
$ hugo server
....
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 
Press Ctrl+C to stop

 c. 访问 http://localhost:1313/, 效果如下所示

1.3 设置菜单

1.3.1 设置多级菜单

• 标识符（identifier）：用于唯一标识该选项，确保它在系统中是唯一的，不能重复。
• 父级菜单（parent）：表示该选项属于哪个父级菜单，填入该父级菜单的标识符。
• 前缀/后缀（pre/post）：用于选项名称的前缀或后缀，可能是在界面上显示时使用的修饰符。

icon 代码查询网站

https://fontawesome.com/search

举例:

[[menu.main]]
  ...
  pre = "<i class="fa-brands fa-google"></i>"
  ...

• 选项名称（name）：该选项在界面上显示的名称。
• 路径（url）：该选项对应的路径或链接地址。
• 标题（title）：当鼠标悬停在该选项上时显示的标题。
• 比重（weight）：用于确定选项在菜单中的排序顺序，数值越小表示选项越靠前。

举例

例如: 要实现 以下效果
食物
   |--> 食物1
   |--> 食物2

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

theme = "FixIt"

# 新增多行内容: 配置主页菜单
# 菜单1
[[menu.main]]
  identifier = "foods_id"
  parent = ""
  pre = ""
  post = ""
  name = "食物"
  url = "/foods"
  title = ""
  weight = 1

# 菜单1 的子项A
[[menu.main]]
  identifier = "food_a"
  parent = "foods_id"
  pre = ""
  post = ""
  name = "食物1"
  url = "/foods/a"
  title = ""
  weight = 1

# 菜单1 的子项B
[[menu.main]]
  identifier = "food_b"
  parent = "foods_id"
  pre = ""
  post = ""
  name = "食物2"
  url = "/foods/b"
  title = ""
  weight = 2

实际效果

1.3.2 设置多语言菜单

举例

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

theme = "FixIt"

# 修改原有内容
# 新增多行内容: 配置多语言主页菜单

# 默认语言设置
defaultContentLanguage = "en"
languagesCode = "en"

# 多语言菜单设置
[languages]
  [languages.en]
    weight = 1
    title = "MY BLOG"
    languageCode = "en"
    languageName = "English"
    hasCJKLanguage = true
  [languages.zh-cn]
    weight = 2
    title = "我的博客"
    languageCode = "zh-CN"
    languageName = "简体中文"
    hasCJKLanguage = true

  # menu - Home
  [[languages.en.menu.main]]
    identifier = "home"
    parent = ""
    pre = "<i class='fa fa-home'></i>"
    post = ""
    name = "Home"
    url = "/"
    title = ""
    weight = 1
  [[languages.zh-cn.menu.main]]
    identifier = "home"
    parent = ""
    pre = "<i class='fa fa-home'></i>"
    post = ""
    name = "主页"
    url = "/"
    title = ""
    weight = 1

实际效果

1.4 设置主页

• 启用（enable）: 是否启用个人资料页面。
• 头像引用路径（avatarURL）: 头像的文件路径或 URL。
• 标题（title）: 页面显示的标题。
• 副标题（subtitle）: 页面显示的副标题。
• 打字机动画（typeit）: 是否启用打字机动画效果，副标题内容会以打字效果显示。
• 社交图标（social）: 是否显示常用的社交图标链接。

1.4.1 开启主页

•  设置方式1

[params.home.profile]
  enable = true

•  设置方式2

[languages.en.params.home.profile]
  enable = true

[languages.zh-cn.params.home.profile]
  enable = true

实际效果

默认会显示一个 RSS 图标

1.4.2 设置头像

在设置之前，我们可以先准备一个 宽高 1:1 头像 (jpg 或 png 格式)

1. 访问 https://www.bitbug.net 制作 ico 图标

制作 logo.ico

2. 然后将制作好的 logo.ico 放到 ~/hugo/hugo-notes/static

$ cp ~/Downloads/logo.ico ~/hugo/hugo-notes/static/

3. 设置图标

• 设置方式1

[home.profile]
  enable = true
  avatarURL = "/logo.ico"

• 设置方式2

[languages.en.params.home.profile]
  enable = true
  avatarURL = "/logo.ico"

[languages.zh-cn.params.home.profile]
  enable = true
  avatarURL = "/logo.ico"

实际效果

1.4.3. 设置标题 (设置打字机动画内容)

• 设置方式1

[params.home.profile]
  enable = true
  avatarURL = "/logo.ico"
  title = "Zack996 的博客"
  subtitle = "哈喽 👋, 整点甜甜圈吃吃吧"
  #social = false

• 设置方式2

[languages.en.params.home.profile]
  enable = true
  avatarURL = "/logo.ico"
  title = "Zack996's BLOG"
  subtitle = "Hello 👋, How about indulging in some donuts"
[languages.zh-cn.params.home.profile]
  enable = true
  avatarURL = "/logo.ico"
  title = "Zack996 的博客"
  subtitle = "哈喽 👋, 整点甜甜圈吃吃吧"

实际效果

1.4.4 设置社交账号

• 设置方式1

[params.social]
  GitHub = "Zack4396"
  Email = "Zack@github.com"

想要了解更多

1. 可以看 FixIt 官网 入门篇 (社交链接配置) | FixIt

2. 查看 ~/hugo/hugo-notes/themes/FixIt/hugo.toml 里面的例子

实际效果 

到这里，Hugo 的一些基础设置已经调整好, 接下来 就是介绍 Hugo 博客的新建/编辑, 以及 一些模板的介绍