麦田的博客

Hugo添加归档页面

2019-07-20


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/


相关内容

  • GitBook介绍安装和使用教程
  • Hugo升级方法和遇到的问题
  • Markdown软件推荐
  • 静态博客生成器大全和简评
  • Win10系统安装Jekyll详细教程
  • Hugo生成静态网页有大量空行怎么办
  • Hugo主题beautiful的优化
  • Hugo主题beg的配置
  • Hugo主题LeaveIt优化
  • Hugo主题hyde的配置
  • 标签

    归档页面hugo主题静态网站生成器hugo