Hugo + LoveIt 主题美化

2025-01-15 约 4459 字预计阅读 21 分钟次阅读

简介

本文介绍 Hugo + LoveIt 主题美化主要修改文件为:

_custom.scss
analytics.html
config.toml / hugo.toml
custom.js
donation.html
footer.html
header.html
index.md
profile.html
reward.html
single.html
timeline.style.css
twikoo.js
zh-CN.toml

📦 项目依赖版本

名称	当前版本	发布地址
Hugo	`v0.123.7`	查看
LoveIt	`v0.2.15`	查看

1
2
3
4
$ hugo % hugo version
hugo v0.146.6-1e0b058efe8d6e236bc7c8d6981d9bfb1443178e+extended darwin/amd64 BuildDate=2025-04-20T10:58:40Z VendorInfo=gohugoio

LoveIt: v0.3.0

配置开始

一、配置自定义文件

配置_custom.scss
LoveIt主题提可以使用_custom.scss进行自定义css，位于\themes\LoveIt\assets\css\_custom.scss，但是不建议直接修改该文件.

注意必须 extended 扩展版否则无法使用_custom.scss 进行自定义css.
- 创建 \assets\css\_custom.scss 文件

创建 custom.js 文件
- 创建 \static\js\custom.js 文件
custom.js的调用方式
将 \themes\LoveIt\layouts\partials\assets.html 复制到 \layouts\partials\assets.html
打开 \layouts\partials\assets.html 文件搜索 {{- partial "plugin/analytics.html" . -}}
在 {{- partial "plugin/analytics.html" . -}} 的上一行增加以下内容

1
2
{{- /* 自定义的js文件 */ -}}
<script type="text/javascript" src="/js/custom.js"></script>

由于本次修改可能涉及到 jQuery 建议也一起引入那么最终效果为:

1
2
3
4
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script>

{{- /* 自定义的js文件 */ -}}
<script type="text/javascript" src="/js/custom.js"></script>

⚠️ 如果有其他的 JavaScript 问见要引入建议增加在 jquery.min.js 与 custom.js之间

二、添加自定义的页面

在根目录的 /content/ 目录下创建一个 about 文件夹
在 about 文件夹内创建 index.md 文件

1
2
3
4
---
title: "关于"
date: 2018-04-24T22:01:44+08:00
---

然后就可以在这个index.md文件内写你想要展示的内容了.

三、添加百度统计

在站点配置文件 config.toml 或者 hugo.toml里找到统计相关的配置，如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
  # 网站分析配置
  [params.analytics]
    enable = true
    # Google Analytics
    [params.analytics.google]
      id = "G-xxxxxxxxxx"
      # whether to anonymize IP
      # 是否匿名化用户 IP
      anonymizeIP = true
    # Fathom Analytics
    [params.analytics.fathom]
      id = ""
      # server url for your tracker if you're self hosting
      # 自行托管追踪器时的主机路径
      server = ""
    # Plausible Analytics
    [params.analytics.plausible]
      dataDomain = ""
    # Yandex Metrica
    [params.analytics.yandexMetrica]
      id = ""

在[params.analytics.google]后添加(在 params.analytics 内添加即可)

1
2
3
4
    # Baidu Analytics
    # 百度统计
    [params.analytics.baidu]
      id = "xxxxxxxxxxxxxxxxxxxxxxxxx"

将百度统计的脚本代码添加到analytics.html里
将 \themes\LoveIt\layouts\partials\plugin\analytics.html 文件复制到 \layouts\partials\plugin\analytics.html
编辑 analytics.html 文件在 Fathom Analytics 代码下加上如下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
	{{- /* Baidu Analytics */ -}}
    {{- with $analytics.baidu.id -}}
		<script>
			var _hmt = _hmt || [];
			(function() {
			  var hm = document.createElement("script");
			  hm.src = "https://hm.baidu.com/hm.js?{{ . }}";
			  var s = document.getElementsByTagName("script")[0]; 
			  s.parentNode.insertBefore(hm, s);
			})();
		</script>
	{{- end -}}

将统计功能的 enable = flase 改为 enable = true 后将启用统计功能
在新增的百度统计变量的id后填写百度统计字符串. [百度统计的脚本代码里https://hm.baidu.com/hm.js?后面跟着的那串字符串]

四、添加文章加密功能

将 \themes\LoveIt\layouts\posts\single.html 复制到 \layouts\posts\single.html
修改 single.html 文件，在 {{- $params := .Scratch.Get "params" -}} 的下一行添加如下代码：

 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 -}}

3.使用方法在文章的头部加上 `password 属性即可进行加密，只有输入了正确密码才能打开文章，否则会回退到之前的页面。用法如下：

1
2
3
4
5
+++
title = "随笔"
# 密码 [""为空密码 ，"123456"表示密码为123456]
password = "123456"
+++

五、添加首页头像挂件

这个功能分为四个部分：

首页头像的动画特效从浮动改为旋转，为了适配挂件还稍微缩小了头像大小
添加头像挂件（都是b站的挂件）
点击头像一定次数后随机刷新头像
加载首页时随机刷新头像（该功能可禁用）

修改站点配置文件站点配置文件里找到你配置首页头像的变量avatarURL，在其下方添加几个新的变量，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
      [params.home.profile]
        enable = true
        # 主页显示头像的 URL
        avatarURL = "/images/avatar.jpg"
        # 是否启用头像挂件
        avatarPluginURL = "/images/avatar-plug/png/bilibili_105.png"
        # 是否启用头像挂件自动刷新
        avatarPluginFlush = true
        # 点击频率，点击几次就换挂件
        avatarPluginFrequency = 1
        # 头像挂件总数
        avatarPluginCount = 23
        # 头像挂件格式：png, webp
        avatarPluginSuffix = "webp"

如果你有自己的图床，还可以配置一个给头像挂件使用的图床地址，如下

1
2
3
4
5
# 参数
[params]
  # 图床变量，末尾不需要加/
  #cdnPrefix = ""
  cdnPrefix = "https://cdn.jsdelivr.net/xxxxxxxxxxxxxx"

这个变量不设置也没关系，不会影响挂件的功能。

修改模板文件将 \themes\LoveIt\layouts\partials\home\profile.html 拷贝到 \layouts\partials\home\profile.html 2.1 打开 profile.html 找到下面的代码：

1
2
3
<a href="{{ $url }}"{{ with .Title | default .Name }} title="{{ . }}"{{ end }}{{ if (urls.Parse $url).Host }} rel="noopener noreffer" target="_blank"{{ end }}>
    {{- dict "Src" $avatar | partial "plugin/image.html" -}}
</a>

这是渲染首页头像的代码，将这段代码改成如下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{- if $profile.avatarPluginURL -}}
	<img class="site-avatar-plug-bilibili" onerror="this.src='{{ $profile.avatarPluginURL }}'" />
	<a href="javascript:void(0);"{{ with .Title | default .Name }} title="Please click me~~"{{ end }}{{ if (urls.Parse $url).Host }} rel="noopener noreffer" target="_blank"{{ end }}>
		{{- dict "Src" $avatar "Title" "Please click me~~" | partial "plugin/image.html" -}}
	</a>
{{- else -}}
	<a href="{{ $url }}"{{ with .Title | default .Name }} title="{{ . }}"{{ end }}{{ if (urls.Parse $url).Host }} rel="noopener noreffer" target="_blank"{{ end }}>
		{{- dict "Src" $avatar | partial "plugin/image.html" -}}
	</a>
{{- end -}}

修改引入模板打开 \layouts\partials\assets.html 文件,在 jquery.min.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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- 头像挂件 -->
{{- if .IsHome -}}
	<script>
	{{- $profile := .Site.Params.home.profile -}}
	{{- $avatarPlugin := $profile.avatarPluginURL -}}
	{{- $avatarPluginFrequency := $profile.avatarPluginFrequency -}}
	{{- $avatarPluginCount := $profile.avatarPluginCount -}}
	{{- $avatarPluginSuffix := $profile.avatarPluginSuffix -}}
	{{- $cdnPrefix := .Site.Params.cdnPrefix -}}
	{{- if $avatarPlugin -}}
		/* 头像挂件自动刷新 */
		{{- if $profile.avatarPluginFlush -}}
			$(function () {
				$(".site-avatar-plug-bilibili").attr("src", "{{ $cdnPrefix }}/images/avatar-plug/{{ $avatarPluginSuffix }}/bilibili_" + (~~({{ $avatarPluginCount }}*Math.random())+1) + ".{{ $avatarPluginSuffix }}");
			});
		{{- else -}}
			$(function () {
				$(".site-avatar-plug-bilibili").attr("src", "{{ $cdnPrefix }}{{ $avatarPlugin }}");
			});
		{{- end -}}
		
		/* 点击头像更换b站挂件 */
		var avatar_plug = 0;
		var avatar_click = 1;
		jQuery(document).ready(function($) {
			/* 点击频率，点击几次就换挂件 */
			var frequency = {{ $avatarPluginFrequency }};
			/* 头像挂件总数 */
			var plug_count = {{ $avatarPluginCount }};
			$("div.home-avatar a").click(function(e) {
				if (avatar_click % frequency === 0) {
					avatar_plug ++;
					$(".site-avatar-plug-bilibili").attr("src", "{{ $cdnPrefix }}/images/avatar-plug/{{ $avatarPluginSuffix }}/bilibili_" + avatar_plug + ".{{ $avatarPluginSuffix }}");
				}		
				if (avatar_plug === plug_count) {
					avatar_plug = 0;
				}
				$("div.home-avatar a").attr("alt","再点击" + (frequency - avatar_click % frequency) + "次头像试试看~~");
				avatar_click ++;
			});
		});
	{{- end -}}
	</script>
{{- end -}}

添加 css 代码编辑文件 _custom.scss 文件添加如下样式：

 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/* 首页头像 */
/* bilibili头像挂件 */
img.site-avatar-plug-bilibili {
    position: absolute;
    display: block;
    margin: -2rem !important;
    padding: 0;
    width: 9rem !important;
    max-width: 168px;
    height: auto;
    box-shadow: none !important;
    z-index: 1;
    pointer-events: none;
}

/* 头像旋转 */
.home .home-profile .home-avatar img {
    width: 5rem;

  /* 设置循环动画
  [animation: 
	(play)动画名称
	(2s)动画播放时长单位秒或微秒
	(ease-out)动画播放的速度曲线为以低速结束 
	(1s)等待1秒然后开始动画
	(1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
    &:hover {
      /* 鼠标经过停止头像旋转 
      -webkit-animation-play-state:paused;
      animation-play-state:paused;*/

      /* 鼠标经过头像旋转360度 */
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

六、修改侧边栏目录样式

默认侧边栏的目录是全展开的，如果文章太长，小标题太多，就会导致目录非常长，看起来不方便。
可以改成只展开当前正在查看的小标题对应的目录. 修改 _custom.scss 文件添加如下样式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/* 目录 */
nav#TableOfContents ol {
    padding-inline-start: 30px;

    & ol {
        padding-inline-start: 25px;
        display: none;
    }

    & li.has-active ol {
        display: block;
    }
}

七、菜单栏支持子菜单

将 /themes/LoveIt/layouts/partials/header.html 拷贝一份到 layouts/partials/header.html
找到如下代码，一共有两个地方，分别对应网页端和手机端：

1
2
3
4
5
6
7
8
9
{{- range .Site.Menus.main -}}
    {{- $url := .URL | relLangURL -}}
    {{- with .Page -}}
        {{- $url = .RelPermalink -}}
    {{- end -}}
    <a class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}" href="{{ $url }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if (urls.Parse $url).Host }} rel="noopener noreffer" target="_blank"{{ end }}>
        {{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
    </a>
{{- end -}}

将上述代码改为如下代码：

 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
{{- range .Site.Menus.main -}}
	{{ if .HasChildren }}
		<div class="dropdown">
			<a {{ if .URL }}href="{{ .URL }}"{{ else }}href="javascript:void(0);"{{ end }} class="menu-item menu-more dropbtn" title="{{ .Title }}" {{ if eq .Post "_blank" }}target="_blank" rel="noopener"{{ end }}>
				{{- .Pre | safeHTML }} {{ .Name }} {{ if ne .Post "_blank" }}{{ .Post | safeHTML -}}{{ end }}
			</a>
			<div class="menu-more-content dropdown-content">
				{{- range .Children -}}
					{{- $url := .URL | relLangURL -}}
					{{- with .Page -}}
						{{- $url = .RelPermalink -}}
					{{- end -}}
						<a href="{{ $url }}" title="{{ .Title }}" {{ if eq .Post "_blank" }}target="_blank" rel="noopener"{{ end }}>{{- .Pre | safeHTML }} {{ .Name }} {{ if ne .Post "_blank" }}{{ .Post | safeHTML -}}{{ end }}</a>
				{{- end -}}
			</div>
		</div>
	{{ else }}
		{{- $url := .URL | relLangURL -}}
		{{- with .Page -}}
			{{- $url = .RelPermalink -}}
		{{- end -}}
		<a class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}" href="{{ $url }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if (urls.Parse $url).Host }} rel="noopener noreffer" target="_blank"{{ end }}>
			{{- .Pre | safeHTML }} {{ .Name }} {{ if ne .Post "_blank" }}{{ .Post | safeHTML -}}{{ end }}
		</a>
	{{- end -}}
{{- end -}}

添加css样式在_custom.scss中添加如下代码：

 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
40
41
42
43
44
45
46
47
48
49
50
/* 子菜单栏 */
.dropdown {
  display: inline-block;
}

/* 子菜单的内容 (默认隐藏) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  line-height: 1.3rem;
}

/* 子菜单的链接 */
.dropdown-content a {
  padding: 10px 18px 10px 14px;
  text-decoration: none;
  display: block;
  & i {
    margin-right: 3px;
  }
}

/* 鼠标移上去后修改子菜单链接颜色 */
.dropdown-content a:hover {
  background-color: #f1f1f1;
  border-radius: 4px;
}

/* 在鼠标移上去后显示子菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 680px) {
    .dropdown {
      display: inline;
    }
  .dropdown:hover .dropdown-content {
    display: inline;
    z-index: 1;
    margin-top: -2em;
    margin-left: 3em;
  }
  .dropdown-content a:hover {
    background-color: transparent;
  }
}

配置子菜单打开站点配置文件 config.toml 或 hugo.toml 子菜单其实和原本的菜单一样写法，只是多了一个parent属性
用来定位到对应的父菜单的identifier。下面是一个简单的子菜单定义方式（没有使用多语言功能）：

 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
# 菜单配置
[menu]
  [[menu.main]]
    identifier = "posts"
    # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
    pre = "<i class='fas fa-fw fa-archive'></i>"
    # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
    post = ""
    name = "归档"
    url = "/posts/"
    title = ""
    weight = 1
  [[menu.main]]
    pre = "<i class='fas fa-fw fa-link'></i>"
    name = "友链"
    identifier = "friends"
    url = "/friends/"
    weight = 2

  # 二级菜单
  [[menu.main]]
    parent = "posts"
    pre = "<i class='fas fa-fw fa-th'></i>"
    name = "分类"
    identifier = "categories"
    url = "/categories/"
    weight = 1
  [[menu.main]]
    parent = "posts"
	identifier = "tags"
    pre = "<i class='fas fa-fw fa-tag'></i>"
    post = "_blank"
	name = "标签"
	url = "/tags/"
	title = ""
	weight = 2

八、添加文章打赏

配置文件添加相关变量在 config.toml 或 hugo.toml 添加如下变量：

1
2
3
4
    [params.reward]                         # 文章打赏
    enable = true
    wechat = "/images/wechat.png"           # 微信二维码
    alipay = "/images/alipay.png"           # 支付宝二维码

这里是对全局文章生效，也可以在每篇文章的文件头里添加如下变量来控制是否启用该功能：

1
reward = "false"

配置国际化文件将 \themes\LoveIt\i18n\zh-CN.toml 拷贝到 \i18n\zh-CN.toml
编辑 \i18n\zh-CN.toml 文件,在末尾添加

1
2
3
4
5
6
7
8
[reward]
  other = "赞赏支持"

[rewardAlipay]
  other = "支付宝打赏"

[rewardWechat]
  other = "微信打赏"

如果有配置了其他语言，可以添加上面两个变量到对应的国际化文件里，自行修改other所对应的值即可。

在 config.toml 或 hugo.toml 编辑/增加

1
defaultContentLanguage = "zh-cn"

添加模板文件 reward.html 新建文件 /layouts/partials/single/reward.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{{ if or .Params.reward (and .Site.Params.reward.enable (ne .Params.reward false)) -}}
<div class="post-reward">
  <input type="checkbox" name="reward" id="reward" hidden />
  <label class="reward-button" for="reward">{{ T "reward" }}</label>
  <div class="qr-code">
    {{ $qrCode := .Site.Params.reward }}
	{{- $cdnPrefix := .Site.Params.cdnPrefix -}}
    {{ with $qrCode.wechat -}}
      <label class="qr-code-image" for="reward">
        <img class="image" src="{{ $cdnPrefix }}{{ . }}">
        <span>{{ T "rewardWechat" }}</span>
      </label>
    {{- end }}
    {{ with $qrCode.alipay -}}
      <label class="qr-code-image" for="reward">
        <img class="image" src="{{ $cdnPrefix }}{{ . }}">
        <span>{{ T "rewardAlipay" }}</span>
      </label>
    {{- end }}
  </div>
</div>
{{- end }}

修改模板文件 single.html 将 /themes/LoveIt/layouts/posts/single.html 拷贝到 /layouts/posts/single.html
打开 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
7
{{- /* Content */ -}}
<div class="content" id="content">
    {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}

	{{- /* Reward */ -}}
	{{- partial "single/reward.html" . -}}
</div>

添加css代码
编辑 _custom.scss ,新增以下内容:

 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* 打赏 */
article .post-reward {
    margin-top: 20px;
    padding-top: 10px;
    text-align: center;
    border-top: 1px dashed #e6e6e6
}

article .post-reward .reward-button {
    margin: 15px 0;
    padding: 3px 7px;
    display: inline-block;
    color: #c05b4d;
    border: 1px solid #c05b4d;
    border-radius: 5px;
    cursor: pointer
}

article .post-reward .reward-button:hover {
    color: #fefefe;
    background-color: #c05b4d;
    transition: .5s
}

article .post-reward #reward:checked~.qr-code {
    display: block
}

article .post-reward #reward:checked~.reward-button {
    display: none
}

article .post-reward .qr-code {
    display: none
}

article .post-reward .qr-code .qr-code-image {
    display: inline-block;
    min-width: 200px;
    width: 40%;
    margin-top: 15px
}

article .post-reward .qr-code .qr-code-image span {
    display: inline-block;
    width: 100%;
    margin: 8px 0
}

article .post-reward .qr-code .image {
    width: 200px;
    height: 200px
}

九、添加打赏榜

添加菜单

1
2
3
4
5
6
7
8
  [[menu.main]]
    parent = "posts"
    pre = "<i class='fas fa-fw fa-donate'></i>"
    name = "打赏"
    title = "感谢打赏，老板大气~"
    identifier = "donation"
    url = "/donation/"
    weight = 4

添加模板文件 donation.html
新建文件 /layouts/shortcodes/donation.html
编辑 donation.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{{ if .IsNamedParams }}
{{- $cdn := .Site.Params.cdnPrefix -}}
{{- $name := .Get "name" -}}
	<div class="cd-timeline-block">
	{{- if eq $name "wechat" -}}
		<div class="cd-timeline-img cd-wechat">
		  <img src="/images/common/wechat.svg" alt="微信">
		</div>
	{{- else if eq $name "alipay" -}}
		<div class="cd-timeline-img cd-alipay">
		  <img src="{{- $cdn -}}/images/common/alipay.svg" alt="支付宝">
		</div>
	{{- end -}}
	<div class="cd-timeline-content {{ .Get "name" }}">
	  <p><b>{{ .Get "title" }}</b></p>
	  <p>{{ .Get "description" }}</p>
	  <a href={{ .Get "url" }} class="cd-read-more" target="_blank">阅读被打赏文章</a>
	  <span class="cd-date">{{ .Get "date" }}</span>
	</div>
	</div>
{{ end }}

新增css样式文件和图片
新建 /static/css/timeline.style.css
编辑 timeline.style.css

  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
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
/* -------------------------------- 
Primary style
-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  background-color: #e9f0f5;
}

footer {
  padding-bottom: 3rem;
}

img {
  max-width: 100%;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */

#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 0;
  margin-bottom: 0;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 0;
    margin-bottom: 0;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #e9f0f5, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}
.cd-timeline-img.cd-wechat {
  background: #75ce66;
}
.cd-timeline-img.cd-alipay {
  background: #3e8af4;
}
.cd-timeline-img.cd-location {
  background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  border-radius: 0.25em;
  padding: 1em;
  box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content {
  color: #303e49;
}
.cd-timeline-block .wechat{
  background: #75ce66;
}
.cd-timeline-block .alipay{
  background: #3e8af4;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: .8em 1em;
  background: white;
  color: #999 !important;
  border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #bac4cb;  
}
a.cd-read-more:hover{text-decoration:none; background-color: #424242;  }
.cd-timeline-content .cd-date {
  float: left;
  padding: .8em 0;
  opacity: .7;
  color: black;
}
.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content {
    font-size: 20px;
    font-size: 1.25rem;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    padding: 1em;
    width: 45%;
  }
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: white;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block .wechat{
    background: #75ce66;
  }
  .cd-timeline-block .alipay{
    background: #3e8af4;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: white;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
  .cssanimations .cd-timeline-content.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-content.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-2 0.6s;
    -moz-animation: cd-bounce-2 0.6s;
    animation: cd-bounce-2 0.6s;
  }
}

@media only screen and (min-width: 1170px) {
  /* inverse bounce effect on even content blocks */
  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
    -webkit-animation: cd-bounce-2-inverse 0.6s;
    -moz-animation: cd-bounce-2-inverse 0.6s;
    animation: cd-bounce-2-inverse 0.6s;
  }
}

此外还需要新增两个图片：
/static/images/common/alipay.svg
/static/images/common/wechat.svg
这两个图片请自行下载。

下载地址:

https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/

新建donation文件夹新建 /content/donation/index.md
编辑 index.md

---
title: "打赏榜"
date: 2025-04-20T12:00:00+08:00
lastmod: 2025-04-20T12:00:00+08:00
disable_comments: true
---
<link rel="stylesheet" href="/css/timeline.style.css" />
<section id="cd-timeline" class="cd-container">


		  
		

	  感谢000打赏-0元！
	  打赏文章为测试-1
	  阅读被打赏文章
	  2024-05-05
	
	




		  
		

	  感谢000打赏-0元！
	  打赏文章为测试-2
	  阅读被打赏文章
	  2024-05-05
	
	



</section>

十、添加站点运行时间

将 \themes\LoveIt\layouts\partials\footer.html 拷贝到\layouts\partials\footer.html
打开 footer.html 文件,在 <div class="footer-container"> 的下方添加如下代码：

1
2
3
<div class="footer-line">
	<span id="run-time"></span>
</div>

然后在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('04/24/2018 15: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();

十一、添加抓住猫咪小游戏

在站点的content目录下新建一个文件夹，文件夹名字将被作为一个页面URL
在该文件夹下新建一个index.md文件，内容如下：

 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
+++
# 文章标题
title = ["逮住那只猫!"]
# 标签
tags = ["game"]
# 分类
categories = ["游戏"]
# 网页链接
slug = "catch-the-cat"
# 文章发布日期和时间
date = 2025-04-20T12:00:00+08:00
# 文章是否为草稿，false 表示不是草稿
draft = false
# 是否禁用 Hugo 主题中的 CSS 类，false 表示不禁用
noClasses = false
# 密码 [""为空 ，"123456"表示密码为123456]
password = ""
# 打赏 [true 表示开启，false 表示关闭 默认开启]
reward = false
# 禁用评论
disable_comments = true
+++

## 游戏规则

1. 点击小圆点，围住小猫。
2. 你点击一次，小猫走一次。
3. 直到你把小猫围住（赢），或者小猫走到边界并逃跑（输）。

---

<div align="center">
  <div id="catch-the-cat"></div>
</div>


<script src="//cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/phaser.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/catch-the-cat.js"></script>
<script defer="defer" src="//cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/game.js"></script>

如果文件夹命名为catch-the-cat，则可以通过<你的站点地址>/catch-the-cat/来访问到这个抓住猫咪的游戏页面。

十二、添加鼠标点击文字特效

在custom.js中添加如下代码：

 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
40
41
/* 鼠标点击文字特效 */
var a_idx = 0;
var a_click = 1;
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善",);
jQuery(document).ready(function($) {
    $("body").click(function(e) {
		/* 点击频率，点击几次就换文字 */
		var frequency = 2;
		if (a_click % frequency === 0) {
			
			var $i = $("<span/>").text(a[a_idx]);
			a_idx = (a_idx + 1) % a.length;
			var x = e.pageX,
			y = e.pageY;
			$i.css({
				"z-index": 9999,
				"top": y - 20,
				"left": x,
				"position": "absolute",
				"font-weight": "bold",
				"color": randomColor(),
				"-webkit-user-select": "none",
				"-moz-user-select": "none",
				"-ms-user-select": "none",
				"user-select": "none"
			});
			$("body").append($i);
			$i.animate({
				"top": y - 180,
				"opacity": 0
			},
			1500,
			function() {
				$i.remove();
			});
			
		}
	a_click ++;
		
    });
});

十三、网站运行时间

将 \themes\LoveIt\layouts\partials\footer.html 复制到 layouts\partials\footer.html
打开footer.html文件，找到 <div class="footer-container"> 并在其下方添加如下内容:

1
2
3
<div class="footer-line">
	<span id="run-time"></span>
</div>

在 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();

十四、离开进入网站的标题变化

编辑 custom.js 文件,新增以下内容:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
/* 离开当前页面时修改网页标题，回到当前页面时恢复原来标题 */
window.onload = function() {
	var OriginTitile = document.title;
	var titleTime;
	document.addEventListener('visibilitychange', function() {
	  if(document.hidden) {
		$('[rel="icon"]').attr('href', "/failure.ico");
		$('[rel="shortcut icon"]').attr('href', "/failure.ico");
		document.title = '哦~该回码头了';
		clearTimeout(titleTime);
	  } else {
		$('[rel="icon"]').attr('href', "/favicon.ico");
		$('[rel="shortcut icon"]').attr('href', "/favicon.ico");
		document.title = '哈~又整到薯条了';
		titleTime = setTimeout(function() {
		  document.title = OriginTitile;
		}, 2000);
	  }
	});
  }

十五、二级标题-行内代码和分割线等样式

二级标题的修改
编辑文件 _custom.scss 新增以下代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/* 标题 */
.page.single h2 {
  box-shadow: rgb(95, 90, 75) 0px 0px 0px 1px, rgba(10, 10, 0, 0.5) 1px 1px 6px 1px;
  color: rgb(255, 255, 255);
  font-family: 微软雅黑, 宋体, 黑体, Arial;
  font-weight: bold;
  line-height: 1.3;
  text-shadow: rgb(34, 34, 34) 2px 2px 3px;
  background: rgb(43, 102, 149);
  border-radius: 6px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  padding: 7px;
  margin: 18px 0px 18px -5px !important;
}

行内代码编辑文件 _custom.scss 新增以下代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/* 行内代码块 */
code {
  margin: 0 .2rem;
  font-size: .9em;
  border: 1px solid #d6d6d6;
  border-radius: .2rem;
}

/* 预格式代码块(用tab键插入的代码块) */
pre code {
  margin: 0;
  border: none;
  font-size: .875rem;
}

/* 标题里的代码块样式 */
.page.single .content>h2 code {
  color: #f7ab01;
  background: transparent !important;
  border: none;
}

分割线编辑文件 _custom.scss 新增以下代码:

1
2
3
4
5
/* 分隔线 */
hr {
  border: none;
  border-bottom: 2px dashed #7a7a7a !important;
}

页脚分割线编辑文件 _custom.scss 新增以下代码:

 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
/* 页脚分割线 */
.footer {
  display: block;
border-top-width: 3px;
  border-top-style: solid;
  border-top-color: #96c1db;
  position: relative;
  z-index: -1;
  max-width: 800px;
  width: 60%;
  margin: .5rem auto 0 auto;
padding-left: 0rem;
padding-right: 0rem;
}
@media only screen and (max-width: 1440px) {
  .footer {
      width:54.5%
  }
}
@media only screen and (max-width: 1200px) {
  .footer {
      width:50.5%
  }
}
@media only screen and (max-width: 960px) {
  .footer {
      width: 77%
  }
}
@media only screen and (max-width: 680px) {
  .footer {
      width: 95%
  }
}

首页头像旋转编辑文件 _custom.scss 新增以下代码:

 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
/* 头像旋转 */
.home .home-profile .home-avatar img {
    width: 5rem;

  /* 设置循环动画
  [animation: 
	(play)动画名称
	(2s)动画播放时长单位秒或微秒
	(ease-out)动画播放的速度曲线为以低速结束 
	(1s)等待1秒然后开始动画
	(1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
    &:hover {
      /* 鼠标经过停止头像旋转 
      -webkit-animation-play-state:paused;
      animation-play-state:paused;*/

      /* 鼠标经过头像旋转360度 */
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
}

参考链接

赞赏支持

微信打赏

支付宝打赏