首發(fā)于Enaium的個人博客
引言
前幾期學(xué)習(xí)了布局,本期學(xué)習(xí)一下布局更多的用法,比如partial和block,其中partial可以吧每個布局引用,block可作為布局的擴(kuò)展
布局
layouts/_default里有一個baseof.html布局,初始內(nèi)容是
<!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可以將對應(yīng)的布局引用過來
block可以讓這個部分被擴(kuò)展,對應(yīng)的子布局需要使用define來進(jìn)行擴(kuò)展
首先來看partial
在static中寫一個css
static
└── css
└── style.css
.red {
color: red;
}
在layouts/partials/head.html的布局中引入css,需要注意的是static是在根目錄下,所以不用寫,直接從static里的路徑開始引用就行了,其實(shí)partials就相當(dāng)于把部分文件內(nèi)容給放到另一個文件中了,然后使用partial來引用這個文件的內(nèi)容
<head>
<link rel="stylesheet" href="/css/style.css">
</head>
現(xiàn)在將single.html中的內(nèi)容改為,別忘了要使用define來擴(kuò)展baseof.html里的block,不然使用的就是single.html這個布局,而不是使用了擴(kuò)展了baseof.html布局的single.html布局
{{ define "main" }}
<div class="red">
{{ .Content }}
</div>
{{ end }}
