你的第一个主题

2020-03-29 磨延城 1035 字 ~3分钟
hugo主题 

[文章作者：磨延城 转载请注明原文出处： http://notes.mo2g.com/hugo/create-a-new-theme/start/ ]

创建一个hugo项目

我们先用命令行创建一个基础的hugo项目

1
2

hugo new site site_example
cd site_example

目录结构注释

使用tree命令可以清晰的看到hugo核心的目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

tree ../site_example/
../site_example/
├── archetypes
│   └── default.md  命令行基于此模版创建文章
├── config.toml 主要配置
├── content     Markdown默认存储目录
├── data
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes  主题默认存储目录

创建一篇文章

我们先尝试写一篇文章，hugo默认是以md(Markdown)作为内容载体，所以hugo支持通过命令行创建md。接下来我试试hugo内置的创建命令。

1
2

hugo new hello.md
xxx/site_example/content/hello.md created

命令行自动创建的md文件是基于 archetypes/default.md 生成的，内容如下

1
2
3
4
5

---
title: "Hello"
date: 2020-03-29T20:42:29+08:00
draft: true
---

当draft设置为ture,hugo默认将不会显示该md中的内容。让我们试着修改一下内容。

1
2
3
4
5

---
title: "Hello"
date: 2020-03-29T20:42:29+08:00
---
hello world

启动web server

hugo是基于golang开发的1，所以我们可以很轻易的启动内置的web server.

1
2
3

hugo server
...
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

此时我们虽然可以访问 http://localhost:1313/ ，但因为该hugo项目缺少主题的缘故，所以看不到任何内容。别着急，接下来就让我们一起从零开始创建主题，把hello world展示出来。

新建一个主题

执行如下命令新建一个主题，theme_example为本示例的主题名称，可以自行更名。

1

hugo new theme theme_example

记得在 site_example/config.toml 配置文件中指定的主题名称

1

theme = "theme_example"

主题结构注释

我们可以大概了解一下命令行创建的基础主题结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

tree themes/
themes  主题默认存储目录
└── theme_example   通过命令行创建的主题
    ├── archetypes
    │   └── default.md
    ├── layouts     主题模版目录
    │   ├── 404.html
    │   ├── _default
    │   │   ├── baseof.html 基础模版
    │   │   ├── list.html   列表模版
    │   │   └── single.html 详情页模版
    │   ├── index.html      首页模版
    │   └── partials
    │       ├── footer.html 页脚模版
    │       ├── header.html 页眉模版
    │       └── head.html   head模版
    ├── LICENSE
    ├── static              资源存储路径
    │   ├── css
    │   └── js
    └── theme.toml          主题配置

展示列表

打开连接 http://localhost:1313/ 访问的是首页，所以我们需要修改一下主题的入口模版文件 themes/theme_example/layouts/index.html,添加如下内容后刷新浏览器就能看到标题为 Hello 的文章了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{- define "main" -}}
<ul>
    {{ $paginator := .Paginate (.Site.RegularPages) }}
    {{ range $paginator.Pages }}
    <li>
        <a href="{{.Permalink}}">{{.Title}}</a>
    </li>
    {{ end }}
</ul>
{{- end -}}

展示内容

现在点击文章链接会404，接下来我们编辑详情页模版 themes/theme_example/layouts/_default/single.html

1

{{.Content}}

再次刷新浏览器，就能看到 hello world 了。

现在我们对hugo的主题有了一定的了解，下一篇我们将介绍其他功能。

查看本文最终代码

示例代码下载

  1. golang 提供的 net/http 包非常完善,可以很方便的实现 web服务. [return]

上一篇: 为什么我选择Hugo