Hugo 的 LoveIt 主题修改及增强（三）

Stilig 收录于 Hugo 博客

2023-07-29 2023-07-31 约 3615 字预计阅读 8 分钟次阅读

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

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

Hugo 的 LoveIt 主题修改及增强（一）

Hugo 的 LoveIt 主题修改及增强（二）

Hugo 的 LoveIt 主题修改及增强（三）

Hugo 的 LoveIt 主题修改及增强（四）

本文将大量修改_custom.scss与custom.js文件，关于_custom.scss与custom.js文件的引入，可见 Hugo 的 LoveIt 主题修改及增强（二）

双击生成颜表情

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


/* 返回随机颜色 */
function randomColor() {
	return "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")";
}

/* 点击生成字符特效 */
var a_idx = 0;
var a_click = 1;
  /* 生成的字符内容 */
var a = new Array("乀(ˉεˉ乀)","𓂃𓂃𓂃𓊝𓄹𓄺𓂃𓂃𓂃","˘ᗜ˘","(╥╯^╰╥)","╰(*´︶`*)╯","✧(◍˃̶ᗜ˂̶◍)✩","｡◕‿◕｡",
"(๑ت๑)","(๑❛ᴗ❛๑)","w(ﾟДﾟ)w","Σ( ° △ °|||)︴","(⊙ˍ⊙)","(๑ˉ∀ˉ๑)","<(￣︶￣)>","╰(*°▽°*)╯","✿",
"(,,•́ . •̀,,)","վ'ᴗ' ի","(◔◡◔)","⚝","₍ᐢ. ֑ .ᐢ₎");
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 ++;
		
    });
});

离开进入网站的标题变化

可以发现，若离开我的网站去其他页面，那么我的网站的标题和图标会发生变化。若再次回到我的网站，则标题和图标会再次发生变化。想要达到这个效果，只需在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


/* 离开当前页面时修改网页标题，回到当前页面时恢复原来标题 */
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);
	  }
	});
  }

其中文字部分改为自己喜欢的就可以了，而至于网站图标文件favicon.ico和failure.ico如果不清楚，具体可见我之前的文章 Hugo 的美化。

这里只简单的说一下：一般而言，我们会把网站图标放到your_site\static\路径下，而在当前的目的下，我们可以只调用48*48的.ico文件作为显示图标。此外，favicon.ico一般是我们原来的网站图标，所以我们只需要在创建一个failure.ico作为离开页面时显示的图标即可。