Hugo添加归档页面

麦田4年前 (2019-09-04)工作笔记1101

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/

相关文章

Win10系统安装Hugo详细教程

Hugo是主流的静态网站生成器,也叫静态博客生成器。hugo是在本地运行的软件,在本地电脑按照规定格式写好文章,然后通过hugo可以一键生成一个优秀的网站!Hugo生成的网站是目前最新的自适应性网站,...

Hugo主题rockrock的配置

rockrock主题很干净,我很喜欢,但是这些主题都需要配置和优化:1、Hugo实现猜你喜欢功能(相关文章,或者相关内容功能)使用dw打开模板文件:themes/主题rockrock/layouts/...

Hugo主题nuo的配置

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

Hugo主题kiss的配置

Hugo主题kiss的颜色只有黑白,没有配色,没有修饰的图片,非常简洁。在优化这个主题遇到的问题如下:1、首页不显示网站名字;解决:打开主题内的exampleSite文件夹,里面的网站配置文件有一段:...

Hugo主题LeaveIt优化

感谢作者liuzhichao.com提供的主题LeaveIt,这个主题可以选择不同的首页展示模式,还可以点击网站名称左侧的爱心按钮,切换黑白界面!这个主题已经比较完美,优化工作比较少:1、加入归档页面...

发表评论

访客

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