Hugo+LoveIt主题美化

更新于 2026-09-21 00:10

简介

本文介绍 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

:package: 项目依赖版本

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

$ 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" . -}} 的上一行增加以下内容

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

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

<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="https://wiki.hckz.tech/js/custom.js"></script>

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

二、添加自定义的页面

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

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

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

三、添加百度统计

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

  # 网站分析配置
  [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 内添加即可)

    # 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 代码下加上如下内容：

	{{- /* 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" -}} 的下一行添加如下代码：

    {{- $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 属性即可进行加密，只有输入了正确密码才能打开文章，否则会回退到之前的页面。用法如下：

+++
title = "随笔"
# 密码 [""为空密码 ，"123456"表示密码为123456]
password = "123456"
+++

五、添加首页头像挂件

这个功能分为四个部分：

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

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

      [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"

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

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

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

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

<a href="https://wiki.hckz.tech/doc/editor/%7B%7B%20$url%20%7D%7D"{{ 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>

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

{{- if $profile.avatarPluginURL -}}
	<img class="site-avatar-plug-bilibili" onerror="this.src='https://wiki.hckz.tech/doc/editor/%7B%7B%20$profile.avatarPluginURL%20%7D%7D'" />
	<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="https://wiki.hckz.tech/doc/editor/%7B%7B%20$url%20%7D%7D"{{ 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 之间增加头像挂件代码

<!-- 头像挂件 -->
{{- 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 文件添加如下样式：

/* 首页头像 */
/* 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 文件添加如下样式：

/* 目录 */
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
找到如下代码，一共有两个地方，分别对应网页端和手机端：

{{- 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="https://wiki.hckz.tech/doc/editor/%7B%7B%20$url%20%7D%7D"{{ with .Title }} title="{{ . }}"{{ end }}{{ if (urls.Parse $url).Host }} rel="noopener noreffer" target="_blank"{{ end }}>
        {{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
    </a>
{{- end -}}

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

{{- range .Site.Menus.main -}}
	{{ if .HasChildren }}
		<div class="dropdown">
			<a {{ if .URL }}href="https://wiki.hckz.tech/doc/editor/%7B%7B%20.URL%20%7D%7D"{{ 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="https://wiki.hckz.tech/doc/editor/%7B%7B%20$url%20%7D%7D" 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="https://wiki.hckz.tech/doc/editor/%7B%7B%20$url%20%7D%7D"{{ 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中添加如下代码：

/* 子菜单栏 */
.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。下面是一个简单的子菜单定义方式（没有使用多语言功能）：

# 菜单配置
[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 添加如下变量：

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

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

reward = "false"

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

[reward]
  other = "赞赏支持"

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

[rewardWechat]
  other = "微信打赏"

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

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

defaultContentLanguage = "zh-cn"

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

{{ 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="https://wiki.hckz.tech/doc/editor/%7B%7B%20$cdnPrefix%20%7D%7D%7B%7B%20.%20%7D%7D">
        <span>{{ T "rewardWechat" }}</span>
      </label>
    {{- end }}
    {{ with $qrCode.alipay -}}
      <label class="qr-code-image" for="reward">
        <img class="image" src="https://wiki.hckz.tech/doc/editor/%7B%7B%20$cdnPrefix%20%7D%7D%7B%7B%20.%20%7D%7D">
        <span>{{ T "rewardAlipay" }}</span>
      </label>
    {{- end }}
  </div>
</div>
{{- end }}

修改模板文件 single.html 将 /themes/LoveIt/layouts/posts/single.html 拷贝到 /layouts/posts/single.html
打开 single.html 并找到如下内容：

{{- /* Content */ -}}
<div class="content" id="content">
    {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
</div>

修改成如下：

{{- /* 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 ,新增以下内容:

/* 打赏 */
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
}

九、添加打赏榜

添加菜单

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

{{ 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="https://wiki.hckz.tech/images/common/wechat.svg" alt="微信">
		</div>
	{{- else if eq $name "alipay" -}}
		<div class="cd-timeline-img cd-alipay">
		  <img src="https://wiki.hckz.tech/doc/editor/%7B%7B-%20$cdn%20-%7D%7D/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

/* -------------------------------- 
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">

{{< donation
name="wechat"
title="感谢000打赏-0元！"
description="打赏文章为测试-1"
url="https://blog.hckz.top"
date="2024-05-05"
>}}

{{< donation
name="alipay"
title="感谢000打赏-0元！"
description="打赏文章为测试-2"
url="https://blog.hckz.top"
date="2024-05-05"
>}}

</section>

十、添加站点运行时间

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

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

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

/* 站点运行时间 */
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文件，内容如下：

+++
# 文章标题
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="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/phaser.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/catch-the-cat.js"></script>
<script defer="defer" src="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/catch-the-cat/game.js"></script>

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

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

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

/* 鼠标点击文字特效 */
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"> 并在其下方添加如下内容:

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

在 custom.js 中增加

/* 站点运行时间 */
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 文件,新增以下内容:

/* 离开当前页面时修改网页标题，回到当前页面时恢复原来标题 */
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 新增以下代码:

/* 标题 */
.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 新增以下代码:

/* 行内代码块 */
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 新增以下代码:

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

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

/* 页脚分割线 */
.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 新增以下代码:

/* 头像旋转 */
.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);
    }
}

参考链接

暂无评论。