前几期学习了布局,本期学习一下布局更多的用法,比如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 }}