文章中的源码: https://github.com/Suroppo/hugo-theme-demo

准备工作

创建网站骨架和主题目录

1
2
3
hugo new site study-hugo  # 创建网站骨架
cd study-hugo  
hugo new theme study-theme  # 创建主题目录

在config.toml文件中配置study-theme主题

1
theme = "study-theme"

添加第一篇博文

1
2
3
hugo new post/page1.md
# hugo new的命令格式
# hugo new [path]

这时content目录会变成下面这样

1
2
3
└── content
    └── post
        └── page1.md

我们打开page1.md文件, 发现文件本身并不是空的, 而是有一些默认的内容.

1
2
3
4
5
---
title: "Page1"  
date: 2019-11-11T09:53:40+08:00
draft: true
---

这些内容是由/archetypes目录中的内容原型决定的.

--- 包裹的内容为”Front Matter”, FrontMatter中包含了一些预定义的变量, 这些变量的值可以在模板文件通过模板中的变量取得. ---一下的内容为博文的实际内容.

title: 页面的标题 date: 页面的时间 draft: true表示当前页面是草稿页

我们给博文添加一些内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
---
title: "我们的第一篇博客"
date: 2019-12-05T09:53:40+08:00
draft: false
---
;博文正文
## 大家好!
新博客, 新气象, 愿大家有个好的开始.

.....

Good Luck!

为博文设计模板

/themes/study-theme/layouts/_default/single.html文件是所有内容页面默认的模板页面

single.html文件默认为空, 修改内容如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{.Title}}</title>
</head>

<body>
    <div id="post" class="post">
        <article>
            <header>
                <h1 class="post-title">{{ .Title }}</h1>
            </header>
            {{.Content}}
        </article>
    </div>
</body>

</html>

模板中的{{.Title}}和{{.Content}}都是模板页面级的变量, 他们的值来至内容页中”Front Matter”中对应的字段. 具体本示例中就是/content/post/page1.md中的内容

预览网站

1
2
hugo server -D 
# Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

服务器的默认地址是http://localhost:1313/, 端口号可以通过 -p 自定义端口 来修改.

content目录的结构就是网站的结构, 所以我们刚才添加的第一篇博客的url地址就是: http://localhost:1313/post/page1/

Front Matter中常用的变量

  • title: 内容标题
  • date: 该页面的时间, 一般用来存放页面的创建时间.
  • draft: 如果true, 表示页面为草稿页, 内容不会呈现在网站中, 除非添加 –buildDrafts 给hugo命令.
  • keywords: 页面的关键字
  • description: 内容描述, 主要用于SEO优化.
  • weight: 列表页的文章排序, 值越小越靠前, 默认是按时间先后排序的, 也就是date中的值

模板页中常用的变量

  • .Title: 获取Front Matter中title的值
  • .Content: 获取文章的内容
  • .Date: 获取Front Matter中date的值
  • .Description: 获取Front Matter中description的值, 一般用于meta中的description字段
  • .Keywords: 获取Front Matter中keywords的值, 用于meta中的keyword字段
  • .Permalink: 获取页面的链接地址(URL)
  • .Next: 下一个页面
  • .Prev: 上一个页面
  • .WordCount: 内容的字数
  • .ReadingTime: 阅读内容的预估时间
  • .Pages: 当前列表页面下的内容页面的集合, 该变量在内容页模板的上下文中值为nil
  • .Site: 站点变量, 该变量下包含很多站点级别的属性和方法.

这些变量可以在官网找到 https://gohugo.io/variables/page/ 具体的含义可以逐步去试一下.