作为普通的作者如果知道文章内容如何转化成网站页面的, 会有利于更好的使用hugo. 如果还想修改一下页面布局样式, 那就更有必要知道hugo的工作原理了.

基本概念

文章, 页面, 模板

文章

文章就是作者需要撰写的内容, 他以markdown格式的文件存放在content目录下面. 我们既可以通过命令行的方式创建文章 hugo new about.md, 也可以通过手工的方式在content创建. 通常我们把单独的文章内容放在content目录下面, 同一类型的文章内容放在content的子目录下面, 这样做hugo会根据子目录下的内容自动生成列表内容.

页面

页面就是通过hugo 最终生成的静态网站中的html页面. 页面是由两部内容合成的, 即: 页面 = 文章 + 模板. hugo会根据一定的规制去寻找文章对应的模板页面, 从而生成页面.

模板

模板页面存放在两个地方

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

├── layouts
└── themes
    └── mytheme
        └── layouts
            ├── 404.html             // 404页面模板
            ├── _default
            │   ├── baseof.html      // 默认的基础模板页, 使用的方式是'拼接', 而不是'继承'.
            │   ├── list.html        // 列表模板  
            │   └── single.html      // 单页模板
            ├── index.html           // 首页模板
            └── partials             // 局部模板, 通过partial引入
                ├── footer.html
                ├── header.html
                └── head.html

layouts目录中默认为空, 但layouts目录的优先级高于themes/`THEME`/layouts目录, 所以我们可以在layouts目录下创建相同结构的文件来覆盖themes/`THEME`/layouts下面的设置

mytheme为模板名称, 可以通过config.toml文件设置要使用的模板 theme = "mytheme". 通过hugo new theme 模板名称来创建新的模板.

content目录结构和URL的对应关系

其实也可以叫文章和页面的对应关系.

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

└── content
    ├── _index.md          // [home]            <- https://example.com/ **
    ├── about.md           // [page]            <- https://example.com/about/
    ├── posts               
    |   ├── _index.md      // [section]         <- https://example.com/posts/ **         
    |   ├── firstpost.md   // [page]            <- https://example.com/posts/firstpost/
    |   ├── happy           
    |   |   ├── _index.md  // [section]         <- https://example.com/posts/happy/ **
    |   |   └── ness.md    // [page]            <- https://example.com/posts/happy/ness/
    |   └── secondpost.md  // [page]            <- https://example.com/posts/secondpost/
    └── quote   
        ├── _index.md      // [section]         <- https://example.com/quote/ **           
        ├── first.md       // [page]            <- https://example.com/quote/first/
        └── second.md      // [page]            <- https://example.com/quote/second/

// hugo默认生成的页面, 没有对应的markdown文章
分类列表页面               // [taxonomyTerm]    <- https://example.com/categories/  **
某个分类下的所有文章的列表  // [taxonomy]        <- https://example.com/categories/one-category  **
标签列表页面               // [taxonomyTerm]    <- https://example.com/tags/  **
某个标签下的所有文章的列表  // [taxonomy]        <- https://example.com/tags/one-tag  **

从对应关系来看作者创建的文章路径, 会一一对应的转化成网站的URL,也就是页面. 所以作者应以反映所呈现网站结构的方式进行组织content的目录结构.

中括号[]中标注的是页面的kind属性, 他们整体上分为两类: single(单页面 - page) 和 list(列表页 - home, section, taxonomyTerm, taxonomy).

content目录下的所有_index.md可以用来生成对应的列表页面, 如果没有这些markdown文件, hugo也会默认生成对应的页面. 有这些markdown文件的话, hugo会根据文件里面的FrontMatter的设置生成更个性的页面.

页面和模板的对应关系

页面和模板的应对关系是根据页面的一系列的属性决定的, 这些属性有: Kind, Output Format, Language, Layout, Type, Section. 他们不是同时起作用, 其中kind, layout, type, section用的比较多.

  • kind: 用于确定页面的类型, 单页面使用single.html为默认模板页, 列表页使用list.html为默认模板页, 值不能被修改
  • section: 用于确定section tree下面的文章的模板. section tree的结构是由content目录结构生成的, 不能被修改, content目录下的一级目录自动成为root section, 二级及以下的目录, 需要在目录下添加_index.md文件才能成为section tree的一部分. 如果页面不在section tree下section的值为空
  • type: 可以在Front Matter中设置, 用户指定模板的类型. 如果没设定type的值, type的值等于section的值 或 等于page(section为空的时候)
  • layout: 可以在Front Matter中设置, 用户指定具体的模板名称.

可以使用模板属性来查看这些属性的具体值

1
2
3

{{.Kind}}
{{.Section}}
{{.Type}}

从层次上hugo中的模板分为三个级别的, hugo依据从上到下的顺序一次查找模板,直到找到为止.

  • 特定页面的模板
  • 应对某一类页面的模板
  • 应对全站的模板: 存放在_default目录下面的list.html 和 single.html页面

后面会根据kind属性的值, 分别介绍各种模板.