目录

Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章

前言

本博客使用的是Hugo的LoveIt主题,本文也是基于该主题而写的,不过Hugo的美化步骤应该大同小异,版本如下:

1
2
3
4
5
hexo: 3.8.0

hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10

请注意,本文的所有功能都离不开两个新增加的文件:_custom.scsscustom.js,部分功能还需要jquery,在第一章中会提及如何引入。

另外本文篇幅太长,阅读体验不好,将其进行分章如下:

显示最近更新的十篇文章

在归档页面只能看到所有以创建时间递减排序的文章列表,可以用下面的方法在归档页面开头增添十篇最近更新的文章。

/themes/LoveIt/layouts/_default/section.html拷贝到/layouts/_default/section.html,打开拷贝后的文件,找到如下:

1
{{- /* Paginate */ -}}

在这行代码上方插入下面的代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{{- /* Last Modified */ -}}
{{- if .Pages -}}
    {{- $pages := .Pages.ByLastmod.Reverse -}}
    <h3 class="group-title">最近更新 <sup>10</sup></h3>
    {{- range first 10 $pages -}}
		<article class="archive-item">
			<a href="{{ .RelPermalink }}" class="archive-item-link">
				{{- .Title -}}
			</a>
			<span class="archive-item-date2">
				{{- "2006-01-02" | .Lastmod.Format -}}
			</span>
		</article>
    {{- end -}}
{{- end -}}

然后在/assets/css/_custom.scss中添加如下样式代码:

1
2
3
.archive-item-date2 {
    color: #a9a9b3;
}

同时为了方便区分开创建时间和最近更新时间,在每篇文章中也新增了最近更新时间这个meta。将/themes/LoveIt/layouts/posts/single.html拷贝到/layouts/posts/single.html,打开拷贝后的文件,找到如下:

1
2
3
{{- with .Site.Params.dateformat | default "2006-01-02" | .PublishDate.Format -}}
    <i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="{{ . }}">{{ . }}</time>&nbsp;
{{- end -}}

将上面的代码改为如下:

1
2
3
4
5
6
{{- with .Site.Params.dateformat | default "2006-01-02" | .PublishDate.Format -}}
    <i class="far fa-calendar fa-fw"></i>&nbsp;<time datetime="{{ . }}">{{ . }}</time>&nbsp;
{{- end -}}
{{- with .Site.Params.dateformat | default "2006-01-02" | .Lastmod.Format -}}
    <i class="far fa-calendar-plus fa-fw"></i>&nbsp;<time datetime="{{ . }}">{{ . }}</time>&nbsp;
{{- end -}}

参考链接