Hugo添加归档页面

麦田3年前 (2019-09-04)工作笔记244

Hugo默认没有归档页面,,需要自己单独添加一个归档页面。以hugo主题rockrock为例,方法如下:


1、新建归档页面的模板;


到主题目录下的layouts文件夹内新建文件夹archives


到主题目录找到文件layouts/_default/single.html,把single.html文件复制到上面的文件夹archives内


2、打开archives文件内的文件single.html,替换里面的展现代码;


被替换内容是:


<div class="post-meta">

<p>{{ .Date.Format "2006年1月2日" }}</p>

</div> 

{{ .Content }}

</div>

新内容是:


<h2>

{{ range where .Site.Pages "Section" "post" }}

{{ range (.Pages.GroupByDate "2006") }}

<details class="menu" open>

<summary>{{ .Key }}</summary>

{{ range .Pages }}

<article><h4><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a></h4></article>

{{ end }}

</details>

{{ end }}

{{ end }}

</h2>

新代码解释:


A、归档目录

.Site.Pages “Section” “post” 归档目录设置为content/post/


如果去掉post,引号内留空,就会自动归档根目录下的文件,也就是content目录的文件。

B、可选归档时间

.Pages.GroupByDate “2006” 按年归档

.Pages.GroupByDate “2006-01” 按年月归档

C、折叠展开功能:通过details标签实现

3、新建归档页面


新建一个归档页面./content/archives.md,页头内容如下


title: "全部文章/归档 Archives"

type: archives 

name: 全部文章 Archives

说明:type,这是重点,必须和之前的新建文件相同,表示用那个文件解析;


原教程有一段内容是:weight: 1,这段会实现归档页面和普通页面一样出现在首页列表,应该删除


4、打开主题的layouts/partials/header.html文件,修改导航部分为:


<ul class="main-menu">

<li><a href="{{ .Site.BaseURL }}archives.html" title="全部文章">全部文章</a></li>

</ul>


感谢本文原教程:https://www.ariesme.com/post/2019/add_archive_page_for_hugo/

相关文章

Hugo使用经验和教程

Hugo是Go语言的静态网站生成器,也叫静态博客生成器,是建站利器!Hugo的优点:1、安装方便,使用简单;2、生成纯静态文件,适配电脑和移动端,速度快,安全性高,本地默认有备份,数据安全;3、可以添...

Hugo生成静态网页有大量空行怎么办

Hugo生成静态网页后,查看HTML网页源代码发现,里面有大量的空行,虽然前台显示正常,但是这些空行都应该被消灭掉!据说,不只是Hugo,Jekyell默认情况下也有同样的现象。这个问题一般是因为空元...

Hugo主题ivy的配置

Hugo主题ivy特别简洁,首页文章列表只有标题。主题文件也很简单,内容清晰,网站加载速度极快,这点比Hugo主题beautiful好很多!我在优化这个主题中遇到的问题如下:1、善用exampleSi...

Hugo主题nuo的配置

Hugo主题nuo简洁大方,电脑端界面分左右两栏,手机端界面和其他所有主题类似,我很喜欢!因为麦田喜欢生成.html文件,并直接放在网站根目录下,所以这个主题修改和配置的地方比较多:1、先设置网站根目...

Hugo主题maupassant的配置

编辑优化Hugo主题maupassant的经验因为在config.toml文件中添加了uglyurls = “true” ,生成的文件都是html格式,而不是默认的目录,所以就需要修改其他参数,比如标...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。