Blog
Post

Hugo 折腾记录:从 0 到 1

Develop ·

Hugo 安装

官方文档教程

官网针对不同系统都有详尽的安装教程介绍:https://gohugo.io/installation/

Brew

如果您是 Mac 用户,可以使用brew命令来安装。

Terminal window
brew install hugo

注意: 这种安装方式可能安装的不是最新版本的 hugo,如果要使用最新版的 hugo,请使用其他方式安装。

配置文件格式

作为一个小白,配置文件格式是选 yaml、toml、json 就成为了我第一个疑问。

TOML

  1. 区分大小写
  2. 文件只能包含 UTF-8 编码的 Unicode 字符
  3. 对缩进不敏感

YAML

  1. 文件以’ - ‘开头,标记文档的开始
  2. 键值对由冒号分隔
  3. 列表以连字符开头
  4. 使用具有一个或多个空格的缩进来描述嵌套集合

JSON

  1. 数据存储在名称/值对中
  2. 记录用逗号分隔 没有以下属性的尾随逗号是不允许的
  3. 双引号包装属性名称和字符串
  4. 单引号是不允许的

字符串差异

任何格式都支持 Strings,但 JSON 不支持多行字符串,还不支持注释。

# TOML
key = "String Value"
multiline = """\
The quick brown \
fox jumps over \
the lazy dog.\
"""
# YAML
key : String Value
multilinePreservedLinebreaks:
|
L1 - The quick brown
L2 - fox jumps over
L3 - the lazy dog.
multilineReplaceLinebreaksWithWhitespace:
>
This sentence ist just too long to keep it
on the same line.
// JSON
{
"key": "String Value"
}

由于JSON较为麻烦的注释形式,YAML严格的缩进形式,我最终选择TOML作为配置文件格式,我也可以自由进行缩进,方便我查看。

零零散散的知识点

  1. 此符号:=是 Python 语言中的赋值运算符(主要称为海象运算符),海象操作符压缩了我们的代码以使其更短。
var a; //定义
a = 1; //赋值
  1. layout/baseof.html 是所有页面的基础
  2. layout/partials 文件夹中可以分部分 headerfooter
  3. 新增页面步骤:
  4. 需要在 content 中添加一个 .md 文件
  5. layouts/_default 中增加同名页面
  6. 菜单激活 active 状态代码:
  7. 根据官网说明的方式并不能成功添加 active 状态,因此寻找了其他方式来判断 active
{{ range .Site.Menus.main }}
{{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
{{- $page_url:= $currentPage.Permalink | absLangURL }}
<li>
<a {{- if eq $menu_item_url $page_url }} class="active" {{- end }} href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
  1. css 中 position 功能小知识点!
.outer {
position: relative;
}
.inner {
position: absolute;
top: 0px;
left: 0px;
}
  1. Shortcode 可以简短代码,写一些方法。类似 function ,具体参照写法:Hugo-basic

参考资料

Built with Cloudflare Pages

© 2024 yikZero - All rights reserved