前几期学习了布局,本期学习一下布局更多的用法,比如partial
和block
,其中partial
可以吧每个布局引用,block
可作为布局的扩展
layouts/_default
里有一个baseof.html
布局,初始内容是
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div id="content">
{{- block "main" . }}{{- end }}
</div>
{{- partial "footer.html" . -}}
</body>
</html>
除了基本的html代码,还有一些使用{{}}
包起来的东西,这些都是hugo
的模板语法
partial
可以将对应的布局引用过来
block
可以让这个部分被扩展,对应的子布局需要使用define
来进行扩展
首先来看partial
在static
中写一个css
static
└── css
└── style.css
.red {
color: red;
}
在layouts/partials/head.html
的布局中引入css,需要注意的是static是在根目录下,所以不用写,直接从static里的路径开始引用就行了,其实partials就相当于把部分文件内容给放到另一个文件中了,然后使用partial来引用这个文件的内容
<head>
<link rel="stylesheet" href="/css/style.css">
</head>
现在将single.html
中的内容改为,别忘了要使用define
来扩展baseof.html
里的block
,不然使用的就是single.html
这个布局,而不是使用了扩展了baseof.html
布局的single.html
布局
{{ define "main" }}
<div class="red">
{{ .Content }}
</div>
{{ end }}