前言
本博客使用的是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.scss和custom.js，部分功能还需要jquery，在第一章中会提及如何引入。
另外本文篇幅太长，阅读体验不好，将其进行分章如下：
显示最近更新的十篇文章
在归档页面只能看到所有以创建时间递减排序的文章列表，可以用下面的方法在归档页面开头增添十篇最近更新的文章。
首先在配置文件config.toml中添加新的变量：
1
2
3
|
[params.section]
# 显示最近更新文章的数量
lastUpdatedSize = 15
|
接着将/themes/LoveIt/layouts/_default/section.html拷贝到/layouts/_default/section.html，打开拷贝后的文件，找到如下：
在这行代码的上方位置插入下面的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
{{- /* Last Modified */ -}}
{{- $lastUpdatedSize := .Site.Params.section.lastUpdatedSize -}}
{{- if $lastUpdatedSize -}}
{{- if .Pages -}}
{{- $pages := .Pages.ByLastmod.Reverse -}}
<h3 class="group-title">最近更新 <sup>{{- $lastUpdatedSize -}}</sup></h3>
{{- range first $lastUpdatedSize $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 -}}
{{- 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> <time datetime="{{ . }}">{{ . }}</time>
{{- 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> <time datetime="{{ . }}">{{ . }}</time>
{{- end -}}
{{- with .Site.Params.dateformat | default "2006-01-02" | .Lastmod.Format -}}
<i class="far fa-calendar-plus fa-fw"></i> <time datetime="{{ . }}">{{ . }}</time>
{{- end -}}
|
参考链接