理解Hugo中的single.html和list.html

hugo主要有四种布局:single、list、index、404。index就是主页,404就是url找不到时的错误页面,这两个都挺好理解的。

至于single和list,我目前是这么理解的,如下为content中的内容:

2021-07-12-17-13-53

如果我们的url为localhost:1313/contact,则hugo会使用single布局,因为contact.md在content中是一个文件(叶子),如果我们的url为localhost:1313/blogs,则hugo会使用list布局,因为blogs在content中是一个文件夹(分支)。

为此我做了一个小小的实验:

我创建了如下sigle.html和list.html文件(因为我目前正在做内容类型相关的实验,所以我就在此基础上进行我新的实验了):


{{/* layouts/acme/sigle.html */}}

{{define "body"}}
<h1>sigle.html</h1>
{{end}}

{{/* layouts/acme/list.html */}}

{{define "body"}}
<h1>list.html</h1>
{{end}}

此时我重启hugo server是不会看到任何变化的,然后访问markdown和news资源,是不会有任何变化的。我需要怎么做?因为我的sigle和list定义在了acme目录下,所以我需要修改markdow.md文件的type和news文件夹下_index.md的type,将其值改为acme。

完成上面的步骤后,重启hugo,有如下页面:

2021-07-12-17-27-31

2021-07-12-17-27-43

非常棒,和我猜想的一样。

小结

我学习hugo是为了开发一款我自己的主题,我希望我的主题能呈现gitbook的风格。我掌握了list.html和single.html后,我已经可以完成我想要的效果了(我仅仅只需要开发一个single.html,将css调成gitbook的那种即可)。

不过,我还是决定再多学习一些,哈哈,感觉hugo真的非常的强大,很喜欢。