Hugo Toss Record: From 0 to 1
Develop·
This article is currently only available in Chinese. You can useImmersive TranslateWebsite Extension for automatic translation.
OPEN TO NEW OPPORTUNITIES
官网针对不同系统都有详尽的安装教程介绍:https://gohugo.io/installation/
如果您是 Mac 用户,可以使用brew
命令来安装。
brew install hugo
注意: 这种安装方式可能安装的不是最新版本的 hugo,如果要使用最新版的 hugo,请使用其他方式安装。
作为一个小白,配置文件格式是选 yaml、toml、json 就成为了我第一个疑问。
TOML
YAML
JSON
任何格式都支持 Strings,但 JSON 不支持多行字符串,还不支持注释。
# TOMLkey = "String Value"multiline = """\ The quick brown \ fox jumps over \ the lazy dog.\ """
# YAMLkey : String ValuemultilinePreservedLinebreaks:| 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
作为配置文件格式,我也可以自由进行缩进,方便我查看。
:=
是 Python 语言中的赋值运算符(主要称为海象运算符),海象操作符压缩了我们的代码以使其更短。var a; //定义a = 1; //赋值
layout/baseof.html
是所有页面的基础layout/partials
文件夹中可以分部分 header
、footer
等content
中添加一个 .md
文件layouts/_default
中增加同名页面active
状态代码: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 }}
position
功能小知识点!.outer { position: relative;}
.inner { position: absolute; top: 0px; left: 0px;}
Shortcode
可以简短代码,写一些方法。类似 function
,具体参照写法:Hugo-basic