主框架构建

简介

基础模版 baseof.html 和块结构可以定义网站页面结构的主框架
block 允许您定义页面一个或多个主模板的外壳，然后根据需要填写或覆盖部分

基础模版

以下在_default/baseof.html上定义了一个简单的基础模板。它定义了网站的基本结构和标题等共用元素。
其中 {{ block “main” . }}{{ end }} 是一个 Block，其他模板通过继承并重写覆盖它的区域。
{{- partial “head.html” . -}} 是嵌入了一个 Partial组件，该 Partial组件可以被其他模版多次使用
它定义了 head、header、main 和 footer 四个区域可以由子模板扩展。

 1<!DOCTYPE html>
 2<html>
 3    {{- partial "head.html" . -}}
 4    <body>
 5        {{- partial "header.html" . -}}
 6        <div id="main">
 7            {{- block "main" . }}
 8                <p>可被其他模版覆盖的内容</p>
 9            {{- end }}
10            {{block "main2"}}
11                <p>main2</p>
12            {{end}}
13        </div>
14        {{- partial "footer.html" . -}}
15    </body>
16</html>

Block 模块

Hugo 中的 Block 是一种在模板中定义可重用内容的方法。
它允许你在基础模版 baseof.html 中定义一个区域,然后在其他模板中继承重写该区域的内容。
不同的页面会根据 Kind 匹配不同的模版，

在基础模版中使用 {{ block “block_name” }} 和 {{ end }} 标签定义一个 block 区域

1<!-- baseof.html -->
2<!-- 这定义了一个名为 content 的 block,包含默认的 <p>默认内容</p> -->
3<body>
4    {{ block "content" }} 
5        <p>默认内容</p> 
6    {{ end }}
7</body>

在模板中使用 {{ define “block_name” }} 和 {{ end }} 重写这个 block 区域

1<!-- 这将把名为 content 的 block 内容设置为 <p>新内容</p>。 -->
2{{ define "content" }} 
3    <p>新内容</p>     
4{{ end }}

当该模板被渲染时,content block 的内容将被替换为子模板定义的内容
页面还会加载主框架baseof 除Block 内容外的其他内容，
这样页面就会保持整个网站主框架结构, 不用在每个模版中重复搭建主框架结构

1<body>  
2    <p>新内容</p> 
3</body>

在 baseof.html 中可以定义多个 Block，在模版中可以重写多个Block

Partial 组件

Partial 是 Hugo 中的组件功能，它允许你将模板分割为可重用的片段。这些片段可以在其他模板中嵌入和重用。

Partial 模版放在项目的 /layouts/partials/ 目录下,如果在主题中使用则位于 /theme/themeName/layouts/partials/ 目录下

1<!-- /layouts/partials/head.html -->
2<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在模版中使用 {{ partial “Partial_File_Name.html” . }} 将组件嵌入到当前模版中

1···
2<!-- '-' 是为了去除前后空格 -->
3{{- partial "head.html" . -}}
4···