Hexo&Fluid魔改笔记

注：该blog配置文章中涉及的代码以及演示效果非当前站点效果。在2023-11-28，我将blog的框架更改为halo，并着手开始迁移工作。演示网站如下，在我的gitee pages上可以浏览。点击全屏预览

搭这个博客还是费了一番心思，在原有主题的基础上，添加了很多自定义的内容。每次更新都在这里记下来：

• 鼠标点击特效

• 浏览器右侧滚动条

• 背景动调线条

• 鼠标指针的替换

• 浏览器标签恶搞

• 网站计时器

• 鼠标移动的特效

• 去除banner图

• 设置背景固定的图

前言·准备工作

Fluid主题是一款完整度比较高的主题了，一般不要修改源代码，不然导致后面更新时会很麻烦（如果你不打算更新，当我没说）

如果你懂html知识，你随意，如果你是纯小白，那么完全按照我的来，也是可以完成你想要的特效的。

首先我们要引入js和css文件，这里一般在自己的主题里面都是可以找的相应位置的，引入外来文件，不动源代码，才是最稳妥的办法。

这里Fluid主题配置文件里就有，在这里就可以引入自己的文件了，这里的相对路径则是你blog文件夹下面的source，在这里你还能看到你的文章，配图……其他自定义的配置文件（如果有的话）。

这里我是把js和css都放在一个文件夹里面，方便找到和修改

如果你没有这两个文件，自己创建就好，完成之后就可以正式开始了，在下面选取喜欢的样式复制进代码就好，有特殊修改的我会特别说明。CSS和js别弄错了。

0x00 CSS

0x01 浏览器右侧滚动条

找了很多教程，看了很多博客，最后总结出最简单的替换原来滚动条的方法

html { 
    overflow-y: scroll; /* 设置自定义滚动条 这样做会强制显示滚动条*/
    /*overflow-y: auto; /* 可以更换为auto，自动显示模式，就不会强制显示*/
}
​
/* 滚动栏本身的背景 此项必须有 */
html::-webkit-scrollbar { 
    width: 6px;
    background-color: rgba(0, 0, 0, 0.0);
}
​
/*滚动栏下方的空白区域*/
html::-webkit-scrollbar-track {
    background: rgba(255, 85, 127, 0.0); /* 设置透明，就会随主题变化 */
}
​
/* 可拖动滚动元素的大小取决于可滚动元素的大小 */
html::-webkit-scrollbar-thumb{
    background: #252d38;
    border-radius: 6px;
}
​
/* 可滚动元素的底角，两个滚动条在此相交。 */
html::-webkit-scrollbar-corner {
    background:#82AFFF;
}

关于-webkit-scrollbar伪元素更多的用法，自行百度

注 ：这里应该支持大部分浏览器，但是火狐是不支持的，想搞得用插件。

同时我还替换了代码下面的滚动条

.markdown-body table {
    overflow-x: scroll; /* 设置自定义滚动条 */
}
​
/* 滚动栏本身的背景 此项必须有 */
.markdown-body table::-webkit-scrollbar { 
    height: 8px;
    background-color: rgba(0, 0, 0, 0.0);
}
​
/*滚动栏下方的空白区域*/
.markdown-body table::-webkit-scrollbar-track {
    background-color: rgba(255, 85, 127, 0.0);
}
​
/* 可拖动滚动元素的大小取决于可滚动元素的大小 */
.markdown-body table::-webkit-scrollbar-thumb{
    background: #ffaaff;
    border-radius: 2px;
}

你可能会在其他地方看到更为简略的写法，那就是没有 :: 之前的内容直接写成这样：

::-webkit-scrollbar { 
    height: 8px;
    background-color: rgba(0, 0, 0, 0.0);
}

在只替换一处的情况下，可以那样做没有毛病，但是果然替换多处，最好还是按照我的方法写。或者宁是这方面的专业人士，有更好更优的写法与处理逻辑的话，希望宁不吝赐教，可以邮箱发给我。

最终效果如下

0x02 替换鼠标指针

很多博主都是简单的几行代码，主要是修改cursor属性

html { 
    cursor: url(/img/Arrow.cur),auto;/* url地址可以是链接，相对位置，绝对位置 */
    background-color: @theme_background;  /* 写成透明就行 */
}

这个时候运行就会发现有很多地方没有替换，在网页使用F12打开开发者功能选中元素就行，再用选择器修改对应的cursor属性即可

/* 封面大图 */
.banner {
    cursor: url(/img/Arrow.cur),auto;
    background-color: @theme_background;
}
​
/* 封面向下 */
.scroll-down-bar {
    cursor: url(/img/Hand2.cur),auto; /* 一个小手 */
    background-color: @theme_background;
}

最不好处理的就是链接，这个时候光标就会变成一个单指点击的小手，我用上面的方法修改了一个多小时，直到我发现了属性选择器……

/* 所有可跳转链接 */
a[href] {
    cursor: url(/img/Hand2.cur),auto !important;
    background-color: @theme_background;
}

这个时候就完美解决（增加评论后进行了优化，添加!important属性后可以应用大部分场景，对下方补充进行了删减）

再看看其他地方，做做补充

/* 搜索框关闭按钮  */
#local-search-close.close {
    cursor: url(/img/Hand2.cur),auto;
    background-color: @theme_background;
}
​
/* 搜索框、输入框 */
input,textarea {
    cursor: url(/img/IBeam.cur),auto;    /* 这里应该是竖条光标 */
    background-color: @theme_background;
}
​
/* 代码复制键 按钮键增加!important属性后可删 */
.copy-btn.copy-btn-light {
    cursor: url(/img/Hand2.cur),auto;
    background-color: @theme_background;
}
​
/* 按钮 */
button[class] {
    cursor: url(/img/Hand2.cur),auto !important;
    background-color: @theme_background;
}
​
/* 补充按钮 */
svg {
    cursor: url(/img/Hand2.cur),auto !important;
    background-color: rgba(0, 0, 0, 0.0);
}
​
/* 图片放大 */
.fancybox-image {
    cursor: url(/img/SizeAll.cur),auto;
    background-color: @theme_background;
}
​
/* 回到顶部   a标签添加!important属性后此处可删*/
#scroll-top-button {
    cursor: url(/img/Hand2.cur),auto;
    background-color: @theme_background;
}

最后，如果你喜欢我的鼠标指针，直接在我的仓库下载即可，他们都是开源的。

0x03 去除banner图

这里的banner图有两层，一层是图片，然后在图片上层还有一层半透明的蒙版，目的是更好的副标题文字显示，我们去掉banner图就不需要了，所以两层都要去掉。但是我们还是需要banner的位置在那，这样才有一个封面，才美观，而不是直接看到文章列表。

这里修改主题配置文件 _config.fluid.yml

banner图我试过了，没有好的方法去除，所以直接载入一张透明的图片即可这里的相对位置也是yourblog/source/，将蒙版不透明度调到0，完全透明就好。

这只是首页，还有另外几页，也是同样的修改（也是配置文件里）。

0x04 添加固定背景图

没有了banner图，此时博客页面上就没有图片了，所以可以添加固定的背景图，方法如下：

/* 设置背景图片 */
body {
  background: url(/img/10.jpg);
  background-attachment: fixed;
  background-size: cover;  
}

效果如下

无论什么滑动都是不会变。

0x10 JS

0x11 鼠标点击特效

在一篇博客里找到了博主直接给了js链接，但是我害怕失效了，所以直接把源码偷过来了(≖ᴗ≖)✧

（代码太长占地方，进行了压缩，编辑器是可以恢复的，不恢复直接使用也可以。）

//花花特效
//onload=function(){var click_cnt=0,$html=document.getElementsByTagName("html")[0],$body=document.getElementsByTagName("body")[0];$html.onclick=function(e){var $elem=document.createElement("b");$elem.style.color="#FFC0CB",$elem.style.zIndex=9999,$elem.style.position="absolute",$elem.style.select="none";var x=e.pageX,y=e.pageY;switch($elem.style.left=x-10+"px",$elem.style.top=y-20+"px",clearInterval(anim),++click_cnt){case 10:$elem.innerText="OωO";break;case 20:$elem.innerText="(๑•́ ∀ •̀๑)";break;case 30:$elem.innerText="(๑•́ ₃ •̀๑)";break;case 40:$elem.innerText="(๑•̀_•́๑)";break;case 50:$elem.innerText="（￣へ￣）";break;case 60:$elem.innerText="(╯°口°)╯(┴—┴";break;case 70:$elem.innerText="૮( ᵒ̌皿ᵒ̌ )ა";break;case 80:$elem.innerText="╮(｡>口<｡)╭";break;case 90:$elem.innerText="( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃";break;case 100:case 101:case 102:case 103:case 104:case 105:$elem.innerText="(ꐦ°᷄д°᷅)";break;default:$elem.innerText="🌸"}$elem.style.fontSize=10*Math.random()+8+"px";var increase=0,anim;setTimeout((function(){anim=setInterval((function(){150==++increase&&(clearInterval(anim),$body.removeChild($elem)),$elem.style.top=y-20-increase+"px",$elem.style.opacity=(150-increase)/120}),8)}),70),$body.appendChild($elem)}};

//社会主义核心价值观
var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; let scrolly = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; y = y - scrolly; $i.css({ "z-index": 999, "top": y - 20, "left": x, "position": "fixed", "font-weight": "bold", "color": "#ff6651" /*随机颜色写法："rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"*/ }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); });  }); });

//引入小心心特效
//!function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);

这里我只用了二十四字核心价值观的特效，还对他进行了修改。

起因：原定位方式为absolute，导致我点击目录的时候，页面会快速上线跳转，特效就跟着页面跑了……跑了……了……

修改方法：将定位absolute改为fixed，y的值改为y - scrolly(滚动条滚动的高度) ，（注：这里24字核心价值观已经修改好了，直接用即可，另外两个也是一样，小白对照着修改就好。或者你直接修改那二十四字的内容，也是可以的。）

然后就有了完美的点击特效。

新增：文本不能被选中，原来的效果中，如果你喜欢玩那个特效，那么连续的点击就会导致前面的字会被选中，极其不美观

找到代码中的css属性（在js文件中），添加代码

"-webkit-user-select": "none",
"-moz-user-select": "none",
"-o-user-select": "none",
"user-select": "none",

在鼠标移动特效也适用，添加在相应的位置即可。例如我的星星特效：

0x12 背景动态线条

<!--动态线条背景--> var color_dark = "255,255,255"; var color_light = "0,0,0"; var opacity = '0.8'; var zIndex = "-2"; var count = "200"; var Line_act = function(color) { function o(w, v, i) { return w.getAttribute(v) || i }  function j(i) { return document.getElementsByTagName(i) }  function l() { var i = j("script"), w = i.length, v = i[w - 1]; return { l: w, z: o(v, "zIndex", -1), o: o(v, "opacity", 0.8), c: o(v, "color", color), n: o(v, "count", 100) } }  function k() { r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight }  function b() { e.clearRect(0, 0, r, n); var w = [f].concat(t); var x, v, A, B, z, y; t.forEach(function(i) { i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1); for (v = 0; v < w.length; v++) { x = w[v]; if (i !== x && null !== x.x && null !== x.y) { B = i.x - x.x, z = i.y - x.y, y = B * B + z * z; y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke()) } } w.splice(w.indexOf(i), 1) }), m(b) } var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(i) { window.setTimeout(i, 1000 / 45) }, a = Math.random, f = { x: null, y: null, max: 20000 }; u.id = c; u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o; j("body")[0].appendChild(u); k(), window.onresize = k; window.onmousemove = function(i) { i = i || window.event, f.x = i.clientX, f.y = i.clientY }, window.onmouseout = function() { f.x = null, f.y = null }; for (var t = [], p = 0; s.n > p; p++) { var h = a() * r, g = a() * n, q = 2 * a() - 1, d = 2 * a() - 1; t.push({ x: h, y: g, xa: q, ya: d, max: 6000 }) } setTimeout(function() { b() }, 100) };  /* 以下是我自己改的，将上述函数改为声明，在下面选择调用 */ var lord = document.getElementById("color-toggle-icon").getAttribute('data'); if(lord == "light"){ Line_act(color_dark); } else{ Line_act(color_light); }

因为我的博客是有两个主题模式（白天和黑夜）可切换的。所以就需要两个线条的颜色。

本来我是想做到颜色的变化随主题动态变换的，奈何技术不够硬，只能做成这样（载入时就是最优效果），切换暗色亮色后需刷新才能变化……

这里我确认主题的方法则是通过我的切换按钮，通过getElementById()找到该标签，再通过getAttribute()获取属性的值

这里我得感谢我的大佬同学的帮助，因此，我学到了getAttribute()方法

如果你和不是同款主题，应该会报错，将最后的代码（从注释哪里开始）修改为一下内容即可

//分别对应亮色和暗色的线条，二选一即可。或者根据需求自行修改参数，在最开始的位置。
Line_act(color_dark);
Line_act(color_light);

Fluid主题里的文章页目录的z-index值貌似很低，线条对目录进行了遮挡，导致不能点击目录，在css里添加一下代码即可

/* 提高目录的z轴坐标，否则会被动态线挡住 */
#toc
{
	z-index: 10;
}

0x13 标签恶搞

这个是比较有意思的东西

当你浏览其他标签时，他就会变成这个样子

如果你以为它真的崩溃了，那就……大错特错……

就搞怪，就和你玩，诶嘿(ಥ_ಥ) ，这个还是比较简单了。

// 浏览器搞笑标题
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
	if (document.hidden) {
		$('[rel="icon"]').attr('href', "/funny.ico");
		document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
		clearTimeout(titleTime);
	} else {
		$('[rel="icon"]').attr('href', "/img/newtubiao.png");
		document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
		titleTime = setTimeout(function() {
			document.title = OriginTitle;
		}, 2000);
	}
});

0x14 鼠标移动特效

当你的鼠标移动的时候，会有小心心冒出来

// 鼠标移动星星特效
(function() { function t() { i(), a() }  function i() { document.addEventListener("mousemove", o), document.addEventListener("touchmove", e), document.addEventListener( "touchstart", e), window.addEventListener("resize", n) }  function n(t) { d = window.innerWidth, window.innerHeight }  function e(t) { if (t.touches.length > 0) for (var i = 0; i < t.touches.length; i++) s(t.touches[i].clientX, t.touches[i].clientY, r[Math.floor(Math.random() * r.length)]) }  function o(t) { u.x = t.clientX, u.y = t.clientY, s(u.x, u.y, r[Math.floor(Math.random() * r.length)]) }  function s(t, i, n) { var e = new l; e.init(t, i, n), f.push(e) }  function h() { for (var t = 0; t < f.length; t++) f[t].update(); for (t = f.length - 1; t >= 0; t--) f[t].lifeSpan < 0 && (f[t].die(), f.splice(t, 1)) }  function a() { requestAnimationFrame(a), h() }  function l() { this.character = "*", this.lifeSpan = 120, this.initialStyles = { position: "fixed", top: "0", display: "block", pointerEvents: "none", "z-index": "10000000", fontSize: "20px", "will-change": "transform" }, this.init = function(t, i, n) { this.velocity = { x: (Math.random() < .5 ? -1 : 1) * (Math.random() / 2), y: 1 }, this.position = { x: t - 10, y: i - 20 }, this.initialStyles.color = n, this.element = document.createElement("span"), this.element.innerHTML = this.character, c(this.element, this.initialStyles), this.update(), document.body.appendChild(this.element) }, this.update = function() { this.position.x += this.velocity.x, this.position.y += this.velocity.y, this.lifeSpan--, this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + this.lifeSpan / 120 + ")" }, this.die = function() { this.element.parentNode.removeChild(this.element) } }  function c(t, i) { for (var n in i) t.style[n] = i[n] } var r = ["#D61C59", "#E7D84B", "#1B8798", "#ffaaff", "#aaaaff"], d = window.innerWidth, u = (window.innerHeight, { x: d / 2, y: d / 2 }), f = []; t() })();

在颜色队列里可以替换你喜欢的颜色，它们会随机出现。

0x15 添加网站计时器

这个教程是最坑的，代码接入后就一直报错……最后找到了原因，先看代码再解释

//运行时间bynote.cn
var now = new Date(); 
function createtime() { 
    var grt= new Date("10/20/2021 01:18:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
    now.setTime(now.getTime()+250); 
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
    document.getElementById("timeDate").innerHTML = "本站已夹缝中生存 "+ dnum +" 天 "; 
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
} 
setInterval("createtime()",250);

运行之后会对document.getElementById方法报错，为什么？（因为我本身也是个半吊子，这种东西也不是很熟悉）我一直在想为什么，突然我就想明白了，他娘的压根就没有那两个标签（一个id为timeDate，一个为times。不懂？没关系！照做就行！）。所以就得自己在源代码里添加，加入这两个标签，我是那种改源码的人吗？显然不是，所以我找了这个地方（在配置文件 _config,fluid.yml里）

添加在页脚 hexo❤Fluid那行之后，网站的PV、UV统计之前，就是上面展示的样式。同时害修饰了hexo和fluid显示内容。

<br><span id="timeDate">天数载入中</span><span id="times">...</span><br>

添加完这行代码就能运行了。如果字体大小不符合你的要求，都可以通过css修改：

#timeDate {
	font-size: 12px;
}
#times {
	font-size: 12px;
}

完结……

在2023-11-28，我将blog框架更改为halo，并着手开始迁移工作，所以这个系列到此完结。