Hugo中列表页模板概述
文章目录
列表页用于在单个页面中集中展示某一类的信息, 如: 某个section下的所有文章, 或者 列出所有的tags, 又或者列出某个标签下的所有文章.
hugo中的列表类页面包括: site homepage(首页), section page(文章目录页), taxonomy list(某一分类的文章列表), taxonomy terms list(所有的分类)
一切皆页面
在hugo 0.18 版中提出了 “everything in Hugo is a Page” 的概念, 这意味着列表页面可以有关联的content files, 即_index.md文件. content目录下的_index.md和首页相关, 各个子目录下的_index.md和对应的section page相关, taxonomy list 和 taxonomy terms list需要在content目录下面创建特定名称的目录(tags或categories)并在里面添加_index.md文件
示例
1 2 3 4 5 6 7 8 |
├── content | ├── posts | | ├── _index.md | | ├── post-01.md | | └── post-02.md | └── quote | | ├── quote-01.md | | └── quote-02.md |
假设content/posts/_index.md具有以下内容
1 2 3 4 5 6 7 |
--- title: 新的开始 date: 2019-11-02 --- 今天, 我开始了新的blog之旅 这得益于发现了hugo这么好的静态博客系统 |
现在可以在seciton模板中访问_index.md的内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 模板页的位置 layouts/_default/section.html {{ define "main" }} <main> <article> <header> <h1>{{.Title}}</h1> </header> <!-- "{{.Content}}" 从posts/_index.md中读取内容 --> {{.Content}} </article> <ul> <!-- 遍历content/posts/*.md --> {{ range .Pages }} <li> <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a> </li> {{ end }} </ul> </main> {{ end }} |
上面的代码输出以下html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<main> <article> <header> <h1>新的开始</h1> </header> <p>今天, 我开始了新的blog之旅</p> <p>这得益于发现了hugo这么好的静态博客系统</p> </article> <ul> <li><a href="/posts/post-01/">Post 1</a></li> <li><a href="/posts/post-02/">Post 2</a></li> </ul> </main> |
注意: _index.md不是必须的, 如果没有找到_index.md,hugo会使用一些默认值
默认列表模板
这些列表页在layouts/_default/
和themes/<THEME>/layouts/_default/
下都有自己专属的默认模板, 其中section page和taxonomy list还可以公用list.html
模板.
1 2 3 4 |
layouts/_default/index.html // site homepage layouts/_default/section.html // section page layouts/_default/taxonomy.html // taxonomy list layouts/_default/terms.html // taxonomy terms list |
内容排序
列表页是对某一类信息集中展示, hugo提供了一些排序的方法. 下面列出一些比较常用的方法.
优先级: Weight > Date > LinkTitle > FilePath
By Weight
根据优先级排序, weight的值越小排序越靠前
By Date
更具创建日期排序, 最新创建的内容排在前面.
Reverse Order
倒序
|
|
文章作者 Suroppo
上次更新 2019-11-02