导航
本节将介绍 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 博客的新建/编辑, 以及 一些模板的介绍