首发于Enaium的个人博客
引言
从本集开始,就开始和布局打交道了,所以我们需要学习Hugo的模板语法,其实也刚开始一步一步来,不需要一次学一堆
那如何知道布局的模板是什么呢,其实hugo内置了一个功能,可以创建一个空白主题
创建主题
hugo new theme default 其中default就是主题名
创建好后我们发目录结构基本上和创建一个site(页面项目)的结构一样,只不过layouts里面有一堆html文件,这个就是默认的模板
检查一些主题的theme.toml文件内容,发现友好多内容,其实都是字面意思,没必要太多纠结
再来看layouts里的index.html文件
像平常写html一样写一些基本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is a home page</h1>
</body>
</html>
之后在项目的配置文件中使用这个主题
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'default' # 添加的主题
项目运行后可以正常显示我们写的内容
其实也可以直接将主题default中的layouts内容全部复制到site的layouts中
default
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ ├── header.html
│ └── head.html
├── LICENSE
├── static
│ ├── css
│ └── js
└── theme.toml
.
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── home.md
├── data
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ ├── header.html
│ └── head.html
然后删掉项目配置中的theme和项目的themes目录
现在来学习一下简单的模板语法,现在从从页面中获取标题,{
{ .Title }}使用这个即可获取页面的标题,默认会从项目的配置文件中获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{
{ .Title }}</title>
</head>
<body>
<h1>This is a home page</h1>
</body>
</html>
哪怎么从markdown获取呢,主页这个比较特殊需要,需要创建一个 _index.md文件注意前面的下划线,使用huogo new _index.md来创建,别忘了把draft删掉或设置为非ture值,或者使用hugo server -D来忽略草稿就可以了
使用{
{ .Content }},可以在html中呈现_index.md里面的内容,不过要注意的是应在index.html这个布局里写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{
{ .Title }}</title>
</head>
<body>
{
{ .Content }}
</body>
</html>
