当我的博客有了 logo 和网站图标后，总还是感觉少了点什么，所以逛了逛别的大佬建的站，发现了许多好玩的玩意儿，在这里记录一下，本篇为第二篇。
由于内容比较多，目前暂时分为四个部分，链接如下：
Hugo 的 LoveIt 主题修改及增强（一）
Hugo 的 LoveIt 主题修改及增强（二）
Hugo 的 LoveIt 主题修改及增强（三）
Hugo 的 LoveIt 主题修改及增强（四）
添加_custom.scss以自定义 css
正如之前 Hugo 的 LoveIt 主题修改及增强（一）所说，Hugo 会优先读取博客根目录下的同名目录和文件，所以我们在博客根目录下添加文件your_site\assets\css\_custom.scss
提示
我们要使用hugo_extended版本的 Hugo 才可使_custom.scss文件生效
添加custom.js以自定义 JavaScript
我们要创建一个.js文件来自定义 JavaScript，但是由于 LoveIt 主题本身并没有提供这样的一个文件，所以除了创建文件，我们还要修改一下 LoveIt 主题的模版。
创建custom.js文件
在博客根目录添加文件your_site\static\js\custom.js，之后我们自定义 JavaScript 的修改就都是在这个文件中进行的。
修改 LoveIt 模版
把your_site\themes\LoveIt\layouts\partials\assets.html文件复制到your_site\layouts\partials\路径下。
在your_site\layouts\partials\assets.html文件内容的最尾部找到{{- partial "plugin/analytics.html" . -}}，并在其上一行中添加如下内容：
1
2
|
{{- /* 自定义 js 文件 */ -}}
<script type="text/javascript" src="/js/custom.js"></script>
|
由于本系列文章的部分功能会用到 jQuery（如网站运行时间和背景图片），因此强烈建议与自定义的 js 文件一起引入，即在刚才添加的内容的上一行再添加如下的内容：
1
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script>
|
添加网站运行时间
把your_site\themes\LoveIt\layouts\partials\footer.html复制到your_site\layouts\partials\路径下。
打开文件your_site\layouts\partials\footer.html，在其中找到<div class="footer-container">，并在其下方添加如下内容：
1
2
3
|
<div class="footer-line">
<span id="run-time"></span>
</div>
|
之后，在我们刚刚新建的your_site\static\js\custom.js文件中添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/* 站点运行时间 */
function runtime() {
window.setTimeout("runtime()", 1000);
/* 请修把这里的建站时间换为你自己的 */
let startTime = new Date('05/23/2023 08:00:00');
let endTime = new Date();
let usedTime = endTime - startTime;
let days = Math.floor(usedTime / (24 * 3600 * 1000));
let leavel = usedTime % (24 * 3600 * 1000);
let hours = Math.floor(leavel / (3600 * 1000));
let leavel2 = leavel % (3600 * 1000);
let minutes = Math.floor(leavel2 / (60 * 1000));
let leavel3 = leavel2 % (60 * 1000);
let seconds = Math.floor(leavel3 / (1000));
let runbox = document.getElementById('run-time');
runbox.innerHTML = '本站已运行<i class="far fa-clock fa-fw"></i> '
+ ((days < 10) ? '0' : '') + days + ' 天 '
+ ((hours < 10) ? '0' : '') + hours + ' 时 '
+ ((minutes < 10) ? '0' : '') + minutes + ' 分 '
+ ((seconds < 10) ? '0' : '') + seconds + ' 秒 ';
}
runtime();
|
lightgallery 图片相册功能的改进
lightgallery 是 LoveIt 支持的图片相册功能（就是点击图片能放大观察的功能）。如果要开启，则先要在your_site/config.toml配置文件中，令参数lightgallery为 true。
但是若要真正的启用这个功能，那么我们要对每个图片起一个标题（引入图片的形式为![图片说明](https://picture.com"图片标题")），但是懒惰的我一般不会给图片起标题（因为要打两个双引号），所以要是图片说明能当图片标题就好了。
为了达到上面的效果，我们只需要创建your_site/layouts/_default/_markup/render-image.html文件，并在该文件中添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{{ $figcap := or .Title .Text }}
{{ $caption := or .Text " " }}
{{- if eq $figcap $caption -}}
{{ $caption = " " }}
{{- end -}}
{{- if $figcap -}}
<figure>
{{- dict "Src" .Destination "Title" $figcap "Caption" $caption "Linked" true "Resources" .Page.Resources | partial "plugin/image.html" -}}
<figcaption class="image-caption">
{{- $figcap | safeHTML -}}
</figcaption>
</figure>
{{- else -}}
{{- dict "Src" .Destination "Title" (path.Base .Destination) "Resources" .Page.Resources | partial "plugin/image.html" -}}
{{- end -}}
|
但是如果你真的不需要标题，而且嫌标题很丑的话，那么可以在your_site\assets\css\_custom.scss文件中添加如下内容：
1
2
3
4
|
/* 图片 */
figcaption {
display: none !important;
}
|
然后标题就可以消失了。
文章过期提醒
像这种科技博文，一般都有时效性，所以添加一个文章过期提醒就显得很有必要了。
修改配置及模版文件
在your_site/config.toml配置文件中，添加如下内容：
1
2
3
4
5
6
|
# Display a message at the beginning of an article to warn the readers that it's content may be outdated.
# 在文章末尾显示提示信息，提醒读者文章内容可能过时。
[params.outdatedInfoWarning]
enable = true
hint = 90 # Display hint if the last modified time is more than these days ago. # 如果文章最后更新于这天数之前，显示提醒
warn = 180 # Display warning if the last modified time is more than these days ago. # 如果文章最后更新于这天数之前，显示警告
|
但是我们总不可能每一篇都是这种有时效性的科技博客，所以我们要添加一个参数来控制其是否开启。为了方便起见，这里我选择直接在模版文件your_site\archetypes\default.md里添加变量：
1
|
outdatedInfoWarning: true
|
提示
这里默认文章过期提醒开启，若想修改默认，直接将 true 改为 false 即可。之前创建的文章直接在文章头添加该参数即可。
修改国际化文件
把your_site\themes\LoveIt\i18n\zh-CN.toml复制到your_site\i18n\路径下，打开your_site\i18n\zh-CN.toml文件，添加如下内容：
1
2
3
4
5
|
[outdatedInfoWarningBefore]
other = "本文最后更新于 "
[outdatedInfoWarningAfter]
other = "，文中内容可能已过时，请谨慎使用。"
|
如果还设置了其他语言，那么我们只需将这两个参量添加到对应的文件，再把 other 的内容改掉即可。
添加outdated-info-warning.html文件
在your_site/layouts/partials/single/路径下添加outdated-info-warning.html文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
{{- if or .Params.outdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.outdatedInfoWarning false)) }}
{{- $daysAgo := div (sub now.Unix .Lastmod.Unix) 86400 }}
{{- $hintThreshold := .Site.Params.outdatedInfoWarning.hint | default 30 }}
{{- $warnThreshold := .Site.Params.outdatedInfoWarning.warn | default 180 }}
{{- $updateTime := .Lastmod }}
{{- if .GitInfo }}
{{- if lt .GitInfo.AuthorDate.Unix .Lastmod.Unix }}
{{- $updateTime := .GitInfo.AuthorDate }}
{{- end }}
{{- end -}}
{{- if gt $daysAgo $hintThreshold }}
{{- $iconDetails := "fas fa-angle-right fa-fw" -}}
{{- if gt $daysAgo $warnThreshold }}
{{- $type := "warning" -}}
{{- $icon := "fas fa-exclamation-triangle fa-fw" -}}
<div class="details admonition {{ $type }} open">
<div class="details-summary admonition-title">
<i class="icon {{ $icon }}{{ $type }}"></i>{{ T $type }}<i class="details-icon {{ $iconDetails }}"></i>
{{- else }}
{{- $type := "question" -}}
{{- $icon := "fas fa-exclamation-triangle fa-fw" -}}
<div class="details admonition {{ $type }} open">
<div class="details-summary admonition-title">
<i class="icon {{ $icon }}{{ $type }}"></i>{{ T $type }}<i class="details-icon {{ $iconDetails }}"></i>
{{- end }}
</div>
<div class="details-content">
<div class="admonition-content">
{{ T "outdatedInfoWarningBefore" -}}
<span class="timeago" datetime="{{ dateFormat "2006-01-02T15:04:05" $updateTime }}" title="{{ dateFormat "January 2, 2006" $updateTime }}">
{{- dateFormat "January 2, 2006" $updateTime -}}
</span>{{ T "outdatedInfoWarningAfter" -}}
</div>
</div>
</div>
{{- end -}}
{{- end -}}
|
修改single.html文件
把your_site/themes/LoveIt/layouts/posts/single.html复制到your_site/layouts/posts/路径下，然后打开your_site/layouts/posts/single.html找到下面内容：
1
2
3
4
|
{{- /* Content */ -}}
<div class="content" id="content">
{{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
</div>
|
修改为：
1
2
3
4
5
6
|
<div class="content" id="content">
{{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
{{- /* Outdated Info Warning */ -}}
{{- partial "single/outdated-info-warning.html" . -}}
</div>
|
参考文章：
- LoveIt主题美化与博客功能增强 · 第三章
- LoveIt主题美化与博客功能增强 · 第一章
- 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录
警告
本文最后更新于 July 29, 2023，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系删除。
若文章帮助到了您，就不妨点一下👇广告，支持博主吧！
Stilig