Hugo教程#2布局

最新推荐文章于 2024-06-14 09:50:01 发布

Enaium

最新推荐文章于 2024-06-14 09:50:01 发布

阅读量486

点赞数 1

分类专栏： Hugo 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Enaium/article/details/128350864

版权

Hugo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首发于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>