终于走到了这一步,要重新去审视hugo生成的每个东西都是来干什么的了——只有这样才能去customize自己的style——这也是我接下来想做的。 hugo

目录结构

在执行完hugo new site命令后你会得到一个包含以下文件的目录。

1
2
3
4
5
6
7
8
.
├── archetypes/
├── config.toml
├── content/
├── data/
├── layouts/
├── static/
└── themes/
  • archetypes: 储存.md的模板文件,类似于hexoscaffolds,该文件夹的优先级高于主题下的/archetypes文件夹
  • config.toml: 配置文件
  • content: 储存网站的所有内容,类似于hexosource
  • data: 储存数据文件供模板调用,类似于hexosource/_data
  • layouts: 储存.html模板,该文件夹的优先级高于主题下的/layouts文件夹
  • static: 储存图片,css,js等静态文件,该目录下的文件会直接拷贝到/public,该文件夹的优先级高于主题下的/static文件夹
  • themes: 储存主题
  • public: 执行hugo命令后,储存生成的静态文件

以上是olowolo小姐姐在她的博文里的介绍,时间有点长还是怎么样,和下面我用blogdown生成的目录文件不一样。

1
2
3
4
5
6
.
├── config.toml
├── content/
├── public/
├── static/
└── themes/

content 结构

1
2
3
4
5
6
7
8
├── _index.md
├── about.md
├── vitae.md
├── post/
│   ├── 2017-01-01-foo.md
│   ├── 2017-01-02-bar.md
│   └── ...
└── ...

YAML metadata

这是用来定义文章的东西。比如weight,从小到大依次是文章在同一天中的文章中的排序顺序。也比如我这篇文章“肢解hugo”的YAML metadata:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
---
title: 肢解hugo
author: Hoas
date: '2019-01-30'
weight: 1
slug: 肢解hugo
categories:
  - fragmentray
tags:
  - hugo
lastmod: '2019-01-30T20:27:52+08:00'
keywords: []
description: ''
comment: yes
toc: yes
autoCollapseToc: no
postMetaInFooter: yes
hiddenFromHomePage: no
contentCopyright: no
reward: no
mathjax: yes
mathjaxEnableSingleDollar: yes
mathjaxEnableAutoNumber: yes
hideHeaderAndFooter: no
flowchartDiagrams:
  enable: no
  options: ''
sequenceDiagrams:
  enable: no
  options: ''
---

shortcode

Hugo本身提供很多shortcode,你在文章的body中插入,它也会生成一个HTML小片段。比如下面就是一个Twitter小片段,这里可能大概是因为没有梯子所以样式没有变。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Anyone know of an R package for
    interfacing with Alexa Skills?
    <a href="https://twitter.com/thosjleeper">@thosjleeper</a>
    <a href="https://twitter.com/xieyihui">@xieyihui</a>
    <a href="https://twitter.com/drob">@drob</a>
    <a href="https://twitter.com/JennyBryan">@JennyBryan</a>
    <a href="https://twitter.com/HoloMarkeD">@HoloMarkeD</a> ?
  </p>
  &mdash; Jeff Leek (@jtleek)
  <a href="https://twitter.com/jtleek/status/852205086956818432">
    April 12, 2017
  </a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

除此之外还有很多shortcode:https://gohugo.io/content-management/shortcodes/ 。但是据我观察只要有翻墙的就会以另一种样式生成(比如说上面的)或者是直接让hugo卡死……我不知道为什么……

hugo内建代码引用标记,这种标记可以很简单地实现高亮,但是不能被三个backtick引用,只能在源文章看源代码:

1
 HUGO by GO. 
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see http://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    tc := transform.NewTitleConverter(transform.ChicagoStyle)
    return tc.Title
  default:
    tc := transform.NewTitleConverter(transform.APStyle)
    return tc.Title
  }
}

templates

以hugo-theme-even主题为例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  hugo-theme-even/
├── LICENSE.md
├── README.md
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
|   ├── index.html
|   ├── robots.txt
|   ├── sitemap,xml
│   ├── _default
│   │   ├── list.html
│   │   ├── single.html
│   │   └── terms.html
│   └── partials
│       ├── foot_custom.html
│       ├── footer.html
│       ├── head_custom.html
│       └── header.html
├── static
│   └── css
│       ├── fonts.css
│       └── style.css
└── exampleSite
    ├── config.toml
    ├── content
    │   ├── _index.md
    │   ├── about.md
    │   ├── note
    │   │   ├── 2017-06-13-a-quick-note.md
    │   │   └── 2017-06-14-another-note.md
    │   └── post
    │       ├── 2015-07-23-lorem-ipsum.md
    │       └── 2016-02-14-hello-markdown.md
    ├── layouts
    │   └── partials
    │       └── foot_custom.html
    └── public
        └── ...

archetypes/default.md定义了每篇文章初始的YAML metadata。

layouts/里面存放了HTML模板。这里面有很多双大括号,这是hugo用来编译模板的变量和方程

  • _default/放的是你网页的默认模板。

    • single.html是单页的加载模板,和content/文件夹下的posts对应。

    • list.html是在一个category或者tag中加载一系列网页的模板。

    • terms.html为主页分类的模板。

  • partials/放的是一些可以用partial function通过其他模板来放置多次使用的HTML片段的地方。

    • header.html主要定义了<tag>标签和在这个标签内的菜单导航。

    • footer.html定义了页脚区域和HTML文件的结束形式。

exampleSite/里面存放了初始的config.toml以及初始的content/文件夹,里面包含了初始博文们。

i18n/存放着网站在不同语言下的不同显示,都是.yaml文件。

image/文件夹里放着的是作者GitHub里面的showcase图片集。

static/里面存放了assets。

static

当hugo render一个站点的时候,static/目录被复制到public/中,比如图像、CSS、JS文件都可以引用。并且可以覆盖themes/hugo-theme-even/static/的文件,如果content/static/文件中有同一个文章,那么后者会覆盖掉前者。