Hugo教程#4基础布局

引言

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