目录

Hugo 的 LoveIt 主题修改及增强(一)

当我的博客有了 logo 和网站图标后,总还是感觉少了点什么,所以逛了逛别的大佬建的站,发现了许多好玩的玩意儿,在这里记录一下。

由于内容比较多,目前暂时分为四个部分,链接如下:

Hugo 的 LoveIt 主题修改及增强(一)

Hugo 的 LoveIt 主题修改及增强(二)

Hugo 的 LoveIt 主题修改及增强(三)

Hugo 的 LoveIt 主题修改及增强(四)

添加阅读次数统计

见之前文章:Hugo 添加访问统计功能

修改这个参数,可以使我们之后修改网站文章的 url 更便捷,不需再采用hugo new posts/your_post.md新建文章的方式来修改,我们甚至还可以做到文章文件名与其 url 不一致。

提示
文章文件名就是指你使用hugo new posts/your_post.md后生成的文章的文件名,本例子中是your_post;而网站文章 url,是指这篇文章在你的 blog 网站中的 url,在本例中如果按照 LovIt 主题默认的方式,那么网站文章 url 为 https://stilig.me/your_post/

找到博客根目录下的配置文件your_site/config.toml,找到参数Permalinks,按照下面的代码块修改:

1
2
3
4
5
# Permalinks 配置
[Permalinks]
  # 原来是 posts = ":filename",其意为以文件名为 url
  posts = "/posts/:slug"
  # 如果你不想改变原来的 url(比如说文章已被搜索网站收录),可以去掉/posts/,那么其将变为 posts= ":slug"

将 slug 参数添加至.md文件的模版

在你博客的根目录下找到your_site\archetypes\default.md并打开,把 slug 参数 添加到 title 参数下,如下代码块:

1
2
3
4
5
6
7
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
slug: "{{ replace .TranslationBaseName "-" " " | title }}"
<!-- 注意:这里  "{{ replace .TranslationBaseName "-" " " | title }}"  表示参数取文章的文件名,这只是为了防止参数为空而设定的默认值 -->
...
...
---

这样我们新建的文章中就都会有 slug 参数了,然后我们只需要修改slug=""""中的值,就可以改变文章 url 了。

而对于之前那些文章,我们也只需要在文章头中添加参数 slug 就可以了,如下图:

https://pic-repo-1318675580.cos.ap-nanjing.myqcloud.com/PicGo/202307261700644.webp
pic-01

添加自定义404页面

在博客根目录的your_site\layouts\文件夹下,放入你想放的404.html文件,这样它就会覆盖掉原主题的your_blog\themes\LoveIt\layouts\404.html文件。

提示

生成 public 文件时,Hugo 会优先读取根目录的文件,然后再读取主题里文件(也就是your_blog\themes\LoveIt\layouts\里的文件)。

我们当然也可以直接修改主题里的文件,但是如果这样做,那么在更新主题后我们之前的修改也会一并地消失。因此在本文的后面,我们宁愿把主题里的文件复制到根目录对应位置后再修改,也不直接修改。

带伙们可以看看本站的404页面https://stilig.me/404.html,你们也推荐一些好玩404页面给我呗!

添加文章数量统计

其实就是利用 hugo 提供的变量来获取文章数量,再通过 html 里的sup标签,把文章数量在上标中显示出来,如下图:

https://pic-repo-1318675580.cos.ap-nanjing.myqcloud.com/PicGo/202307261703151.webp
pic-02

修改 list.html 文件

复制your_site\themes\LoveIt\layouts\taxonomy\list.htmlyour_site\layouts\taxonomy\路径下。

  • 然后打开your_site\layouts\taxonomy\list.html,找到下面的内容:
    1
    2
    3
    4
    5
    
    {{- if eq $taxonomy "category" -}}
        <i class="far fa-folder-open fa-fw"></i>&nbsp;{{ .Title }}
    {{- else if eq $taxonomy "tag" -}}
        <i class="fas fa-tag fa-fw"></i>&nbsp;{{ .Title }}
    {{- else -}}
    
    将其改为:
    1
    2
    3
    4
    5
    
    {{- if eq $taxonomy "category" -}}
        <i class="far fa-folder-open fa-fw"></i>&nbsp;{{ .Title }}<sup>{{ len .Pages }}</sup>
    {{- else if eq $taxonomy "tag" -}}
        <i class="fas fa-tag fa-fw"></i>&nbsp;{{ .Title }}<sup>{{ len .Pages }}</sup>
    {{- else -}}
    
  • 继续找到:
    1
    2
    
    {{- range $pages.PageGroups -}}
      <h3 class="group-title">{{ .Key }}</h3>
    
    将其改为:
    1
    2
    
    {{- range $pages.PageGroups -}}
        <h3 class="group-title">{{ .Key }} <sup>{{ len .Pages }}</sup></h3>
    
  • 因为 LoveIt 博客是以年份来分组的,但是我的博文没有那么多,以月份来分组更加有记录感,所以可以把下面内容:
    1
    2
    3
    
    {{- /* Paginate */ -}}
    {{- if .Pages -}}
        {{- $pages := .Pages.GroupByDate "2006" -}}
    
    改为:
    1
    2
    3
    
    {{- /* Paginate */ -}}
    {{- if .Pages -}}
        {{- $pages := .Pages.GroupByDate "2006-01" -}}
    
    从而达到以月份分组。

修改 terms.html 文件

复制your_site\themes\LoveIt\layouts\taxonomy\terms.htmlyour_site\layouts\taxonomy\路径下。

  • 然后打开your_site\layouts\taxonomy\terms.html,找到下面的内容:
    1
    2
    3
    4
    5
    
    <div class="page archive">
      {{- /* Title */ -}}
      <h2 class="single-title animated pulse faster">
          {{- .Params.Title | default (T $taxonomies) | default $taxonomies | dict "Some" | T "allSome" -}}
      </h2>
    
    改成:
    1
    2
    3
    4
    5
    
    <div class="page archive">
      {{- /* Title */ -}}
      <h2 class="single-title animated pulse faster">
          {{- .Params.Title | default (T $taxonomies) | default $taxonomies | dict "Some" | T "allSome" -}}<sup>{{ len .Pages }}</sup>
      </h2>
    
  • 继续找到:
    1
    2
    3
    4
    5
    
    <h3 class="card-item-title">
      <a href="{{ .RelPermalink }}">
          <i class="far fa-folder fa-fw"></i>&nbsp;{{ .Page.Title }}
      </a>
    </h3>
    
    然后改成:
    1
    2
    3
    4
    5
    
    <h3 class="card-item-title">
      <a href="{{ .RelPermalink }}">
          <i class="far fa-folder fa-fw"></i>&nbsp;{{ .Page.Title }} <sup>{{ len .Pages }}</sup>
      </a>
    </h3>
    

修改 section.html 文件

复制your_site\themes\LoveIt\layouts\_default\section.htmlyour_site\layouts\_default\路径下。

  • 然后打开your_site\layouts\_default\section.html,找到下面的内容:
    1
    2
    3
    4
    5
    
    <div class="page archive">
      {{- /* Title */ -}}
      <h2 class="single-title animated pulse faster">
          {{- .Params.Title | default (T .Section) | default .Section | dict "Some" | T "allSome" -}}
      </h2>
    
    改成:
    1
    2
    3
    4
    5
    
    <div class="page archive">
      {{- /* Title */ -}}
      <h2 class="single-title animated pulse faster">
          {{- .Params.Title | default (T .Section) | default .Section | dict "Some" | T "allSome" -}}<sup>{{ len .Pages }}</sup>
      </h2>
    
  • 继续找到:
    1
    2
    
    {{- range $pages.PageGroups -}}
              <h3 class="group-title">{{ .Key }}</h3>
    
    然后改成:
    1
    2
    
    {{- range $pages.PageGroups -}}
      <h3 class="group-title">{{ .Key }} <sup>{{ len .Pages }}</sup></h3>
    
  • 同样,这里是以年份分组的,若要改为以月份分组,则要把下面代码:
    1
    2
    3
    
    {{- /* Paginate */ -}}
    {{- if .Pages -}}
        {{- $pages := .Pages.GroupByDate "2006" -}}
    
    改为:
    1
    2
    3
    
    {{- /* Paginate */ -}}
    {{- if .Pages -}}
      {{- $pages := .Pages.GroupByDate "2006-01" -}}
    

这样操作后,以我的网站为例,归档、分类和标签页面就都能加上文章数量统计了。

添加文章密码

有时候我们并不想把一部分网页展示给所有人,那么我们可以加密我们的网页,使其要通过密码访问,如下图:

https://pic-repo-1318675580.cos.ap-nanjing.myqcloud.com/PicGo/202307261804919.webp
pic-03

修改 single.html

your_site\themes\LoveIt\layouts\posts\single.html复制粘贴到your_site\layouts\posts\路径下。打开your_site\layouts\posts\single.html文件,在{{- partial "plugin/analytics.html" . -}}下添加下面内容:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    {{- $password := $params.password | default "" -}}
    {{- if ne $password "" -}}
		<script>
			(function(){
				if({{ $password }}){
					if (prompt('请输入文章密码') != {{ $password }}){
						alert('密码错误!');
						if (history.length === 1) {
							window.opener = null;
							window.open('', '_self');
							window.close();
						} else {
							history.back();
						}
					}
				}
			})();
		</script>
    {{- end -}}

将 password 参数添加至.md文件的模版

之后我们只要将 password 参数添加到文章头即可。

但为了方便起见,我这里直接把它加到了模板文件中,即在博客的根目录下找到your_site\archetypes\default.md并打开,把 password 参数添加进去,如下代码块:

1
2
3
4
5
6
7
8
9
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
slug: "{{ replace .TranslationBaseName "-" " " | title }}"
...
...
password: ""
...
...
---
提示
password= """"中的字符即为密码,若无字符,则文章不加密无需密码登录。

参考文章:

  1. LoveIt主题美化与博客功能增强 · 第一章
  2. LoveIt主题美化与博客功能增强 · 第二章
  3. LoveIt主题美化与博客功能增强 · 第三章
  4. 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录
警告
本文最后更新于 July 26, 2023,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系删除。
若文章帮助到了您,就不妨点一下👇广告,支持博主吧!