Hexo+Fluid美化教程

美化菜单:

添加运行时间

footercontent 里添加如下代码:

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
<div style="font-size: 0.85rem">
<span id="timeDate">load</span>
<span id="times">ing...</span>
<script>
!(function () {
/** 计时起始时间,自行修改 **/
var start = new Date("2025/05/05 13:00:00");

function update() {
var now = new Date();
now.setTime(now.getTime() + 250);
days = (now - start) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - start) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if (String(hnum).length === 1) {
hnum = "0" + hnum;
}
minutes = (now - start) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if (String(mnum).length === 1) {
mnum = "0" + mnum;
}
seconds = (now - start) / 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 = "本站安全运行&nbsp" + dnum + "&nbsp天";
document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
}

update();
setInterval(update, 1000);
})();
</script>
</div>

起始时间可自行修改,注意格式。

添加热力图

这里提供一个简单的 API [Github Chart API](Github Chart API)

直接在需要的位置添加如下 HTML 语句即可,注意将 GitHub 用户名修改为你自己的。

1
<img src="https://ghchart.rshah.org/zhangyimin12345" alt="zhangyimin12345's Github chart" />

也可以改变颜色,支持 1616 进制色(就是那个 409ba5)。

1
<img src="https://ghchart.rshah.org/409ba5/zhangyimin12345" alt="emoryhuang's Github chart" />

添加看板娘

向你的 Hexo 里放上一只二次元看板娘。

先在 Git Bash 里添加插件:

1
npm i --save hexo-helper-live2d

向 Hexo 的 _config.yml 文件添加如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-tororo ## 更换为你的模型
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7

可以前往 这里 查看所有模型,也可以看下面的。

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

然后再 Git Bash 中安装你喜欢的模型:

1
npm i <模型的包名>

将包名输入位于 _config.ymlmodeluse 中。

1
2
model:
use: <模型的包名>

接下来的都添加在 custom_jscustom_css 里。

添加动态彩带

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js

添加静态彩带

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.min.js

添加动态黑色线条

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicLine.min.js

添加小雪花飘落

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js

添加樱花飘落

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Cherry.min.js

添加鼠标火花跟随

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js

添加鼠标点击出爱心

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js

添加鼠标点击出字

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js

添加打字特效

1
- https://static.kevinchu.top/blog/assets/js/typing-effect.js

自定义鼠标指针

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css

自定义滚动条颜色

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css

自定义头部打字机颜色效果渐变

1
- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css

自定义字体

这里推荐 霞鹜文楷

custom_css 添加:

1
2
custom_css: 
- https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css #调用字体

这个格式是为了方便多行调用,这里用的 cssbootcdn 的,速度很快,一般不会跑路。

再应用字体:(fontfont_family

1
font_family: LXGW WenKai Screen

友链美化

新建 links.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
a.card-body.hover-with-bg {
border-left: 5px solid #72ffb7;
background: #00000080;
color: #fff;
box-shadow: 0 5px 10px #00000050;
transition: all .5s;
}

a.card-body.hover-with-bg img {
transition: all 5s;
border: 2px solid #fff;
}

a.card-body.hover-with-bg:hover img{
transform: rotate(1080deg);
}

.link-intro {
color: #293239;
font-weight: 600;
font-family: auto;
}

a.card-body.hover-with-bg:hover {
border-left-width: 15px;
background-color: #fff;
}

再调用:

1
2
custom_css: 
- /css/links.css

文字选中样式

/source/css 目录新建 selection.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
::selection {
background: #ffffff00;
color: #f00;
}

.icon {
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

pre::selection, pre ::selection {
background: #fff;
}

[data-user-color-scheme='dark'] pre::selection, [data-user-color-scheme='dark'] pre ::selection {
background: #424858;
color: #fff;
}

/* 标题,目录...不可选中 */
h1, h2, h3, h4, h5, h6, .line, footer, #toc, time, #subtitle.h2, .nav-link, .post-meta.mr-2, #busuanzi_container_page_pv, .note, .hover-with-bg {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}

记得引入。

Mac-border

如果你觉得 Fluid 的代码框不太合你口味,可以尝试一下。

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
.hljs-comment, .hljs-quote {
color: #ff6262;
font-family: auto;
font-style: normal;
}


figure.highlight {
background: #838383;
border-radius: 5px;
padding-top: 30px;
box-shadow: 0 5px 10px #a1a1a1;
}

[data-user-color-scheme='dark'] figure.highlight {
background: #000;
}

/* 该伪元素用于展示代码语言,若不需要可删除 */
figure.highlight::before {
content: attr(data-type);
z-index: 999;
color: #ff8d33;
display: block;
width: 100%;
position: absolute;
top: 2px;
text-align: center;
font-weight: 600;
}

figure.highlight::after {
background: #fc625d;
border-radius: 100%;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
content: '';
height: 12px;
width: 12px;
position: absolute;
top: 9px;
left: 12px;
}

.hljs {
background-color: #00000000;
}

/* 代码块颜色 */
figure.highlight tr {
background-color: #f9fffa;
}

[data-user-color-scheme='dark'] .markdown-body table tr {
background-color: #25272d;
}

figure.highlight > table {
border-radius: 0 0 5px 5px;
}

.gutter {
background-color: #f9fffa;
}

[data-user-color-scheme='dark'] .gutter {
background-color: #25272d;
}

注意:line_number 得是 true

代码块显示文件路径

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
p.file-path + figure.highlight {
border-top-left-radius: 0;
}

p.file-path {
font-family: 华文新魏,SSTXinwei;
color: #9ce159;
background: #838383;
border-radius: 5px 0 0 0;
height: 1.6rem;
margin-bottom: -0.5rem;
padding: 0 0.2rem 0 0.2rem;
display: inline-block;
font-weight: 600;
position: relative;
top: 1.5rem;
filter: drop-shadow(0 0 4px #a1a1a1);
}

p.file-path>span {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
max-width: 500px;
}

@media (max-width: 768px) {
p.file-path>span {
max-width: 300px;
}
}

@media (max-width: 500px) {
p.file-path>span {
max-width: 160px;
}
}

[data-user-color-scheme='dark'] p.file-path {
background: #000;
}

p.file-path::before {
content: '🔖 Path:/';
color: #ff7e7e;
font-weight: 700;
position: relative;
top: -0.4rem;
}

p.file-path::after {
content: '';
display: inline-block;
width: 0;
height: 0;
position: absolute;
border-width: 20px;
border-top: 0.8rem solid #00000000;
border-bottom: 0.8rem solid #00000000;
right: -1.2rem;
border-left: 20px solid #838383;
}

[data-user-color-scheme='dark'] p.file-path::after {
border-left: 20px solid #000;
}

使用方式:

1
2
3
4
<p class="file-path"><span>这里写路径</span></p>
```cpp
# include <bits/stdc++.h>
```

显示代码语言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const languageStyle = (str) => {
/* 单独优化 */
if (['js', 'javascript'].includes(str)) return 'JavaScript'
if (['ts', 'typescript'].includes(str)) return 'TypeScript'
/* 曲线救国(Highlight不支持vue) */
if (str === 'xml') return 'Vue'

// return str
/* 全小写风格 */
return str.toUpperCase()
/*全大写风格 */
// return str[0].toUpperCase() + str.substring(1)
/*首字母大写风格 */
}

document.querySelectorAll('figure.highlight').forEach((item) => {
item.setAttribute('data-type', languageStyle(item.getAttribute('class').substring(10)))
})

毛玻璃主面板

先调整 _config.fluid.yml

1
2
board_color: "#ffffffad"
board_color_dark: "#000000ad"

再添加 css 文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
#board {
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}

#toc {
padding: 10px;
top: 4rem;
background-color: var(--board-bg-color);
border-radius: 10px;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}

标签变化

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
var  OriginTitle  =  document.title;

var titleTime;

document.addEventListener('visibilitychange', function () {

if (document.hidden) {

document.title = '(ง •̀_•́)ง‼这里是 zhangyimin12345 的博客~';

clearTimeout(titleTime);

}

else {

document.title = '( つ•̀ω•́)つ欢迎回来!';

titleTime = setTimeout(function () {

document.title = OriginTitle;

}, 2000);

}

});

文章滑入动画

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
const  cards  =  document.querySelectorAll('.index-card')

if (cards.length) {

document.querySelector('.row').setAttribute('style', 'overflow: hidden;')

const coefficient = document.documentElement.clientWidth > 768 ? .5 : .3

const origin = document.documentElement.clientHeight - cards[0].getBoundingClientRect().height * coefficient

function throttle(fn, wait) {

let timer = null;

return function () {

const context = this;

const args = arguments;

if (!timer) {

timer = setTimeout(function () {

fn.apply(context, args);

timer = null;

}, wait)

}

}

}

function handle() {

cards.forEach(card => {

card.setAttribute('style', `--state: ${(card.getBoundingClientRect().top - origin) < 0 ? 1 : 0};`)

})

console.log(1)

}

document.addEventListener("scroll", throttle(handle, 100));

}

还有 css

1
2
3
4
5
6
7
8
9
10
.index-card {
transition: all 0.5s;
transform: scale(calc(1.5 - 0.5 * var(--state)));
opacity: var(--state);
margin-bottom: 2rem;
}

.index-img img {
margin: 20px 0;
}

导航栏标题添加霓虹灯特效

修改 themes\fluid\source\css\_pages\_base\_widget\header.styl,在里面追加样式(注意缩进):

1
2
3
4
5
6
7
8
9
10
11
.navbar-title
outline none
--c lightseagreen
text-shadow 0 0 10px var(--c),0 0 20px var(--c),0 0 40px var(--c),0 0 80px var(--c),0 0 160px var(--c)
animation animate 5s linear infinite

@keyframes animate{
to{
filter: hue-rotate(360deg)
}
}

然后修改 themes\fluid\layout\_partials\header\navigation.ejs
找到对应导航栏标题的标签内容:
<strong><%= theme.navbar.blog_title || config.title %></strong>
给其添加上 class 属性,修改为:
<strong class="navbar-title"><%= theme.navbar.blog_title || config.title %></strong>

首屏图片添加上升气泡特效

修改 themes\fluid\layout\_partials\header\banner.ejs,在 <div class="full-bg-img">标签下追加代码(与其子标签 <div class="mask flex-center" style="background-color: rgba(0, 0, 0, <%= parseFloat(banner_mask_alpha) %>)"> 标签同级):

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
<% if(in_scope('home')) { %>
<div style="height:500px" id="bubbles"></div>
<script>
circleMagic();
function circleMagic(options) {
let width;
let height;
let canvas;
let ctx;
let animateHeader = true;
const circles = [];

const settings = options || {
color: 'rgba(255,255,255,.3)',
radius: 10,
density: 0.1,
clearOffset: 0.7
}

const container = document.getElementById('bubbles');
initContainer();
addListeners();

function initContainer() {
width = container.offsetWidth;
height = container.offsetHeight - 120;

initCanvas();
canvas = document.getElementById('homeTopCanvas');
canvas.width = width;
canvas.height = height;
canvas.style.position = 'absolute';
canvas.style.left = '0';
canvas.style.bottom = '0';
ctx = canvas.getContext('2d');

for (let x = 0; x < width * settings.density; x++) {
const c = new Circle();
circles.push(c);
}
animate();
}

function initCanvas() {
const canvasElement = document.createElement('canvas');
canvasElement.id = 'homeTopCanvas';
canvasElement.style.pointerEvents = 'none';
container.appendChild(canvasElement);
canvasElement.parentElement.style.overflow = 'hidden';
}

function addListeners() {
window.addEventListener('scroll', scrollCheck, false);
window.addEventListener('resize', resize, false);
}

function scrollCheck() {
if (document.body.scrollTop > height) {
animateHeader = false;
} else {
animateHeader = true;
}
}

function resize() {
width = container.clientWidth;
height = container.clientHeight;
container.height = height + 'px';
canvas.width = width;
canvas.height = height;
}

function animate() {
if (animateHeader) {
ctx.clearRect(0, 0, width, height);
for (const i in circles) {
circles[i].draw();
}
}
requestAnimationFrame(animate);
}

function randomColor() {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const alpha = Math.random().toPrecision(2);
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
}

function Circle() {
const that = this;
(function () {
that.pos = {};
init();
})();
function init() {
that.pos.x = Math.random() * width;
that.pos.y = height + Math.random() * 100;
that.alpha = 0.1 + Math.random() * settings.clearOffset;
that.scale = 0.1 + Math.random() * 0.3;
that.speed = Math.random();
if (settings.color === 'random') {
that.color = randomColor();
} else {
that.color = settings.color;
}
}
this.draw = function () {
if (that.alpha <= 0) {
init();
}
that.pos.y -= that.speed;
that.alpha -= 0.0005;
ctx.beginPath();
ctx.arc(
that.pos.x,
that.pos.y,
that.scale * settings.radius,
0,
2 * Math.PI,
false
);
ctx.fillStyle = that.color;
ctx.fill();
ctx.closePath();
}
}
}
</script>
<% } %>

添加星系loading动画

themes\fluid\layout\_partials\ 路径下创建 loading.ejs,代码:

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
<%
play_time=theme.loading.play_time || 500
%>

<style type="text/css">
@keyframes spin3D {
from {
transform: rotate3d(0.5, 0.5, 0.5, 360deg);
}

to {
transform: rotate3d(0deg);
}
}

#loading {
height: 100%;
background-color: #172d4781;
backdrop-filter: saturate(100%) blur(10px);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
overflow: hidden;
z-index: 99999999;
}

.spinner-box {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
}

.leo {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}

.blue-orbit {
width: 175px;
height: 175px;
border: 2px solid #1a91fa;
animation: spin3D 3s linear .2s infinite;
}

.green-orbit {
width: 135px;
height: 135px;
border: 2px solid #00ffdd;
animation: spin3D 2s linear 0s infinite;
}

.red-orbit {
width: 100px;
height: 100px;
border: 2px solid #d75151;
animation: spin3D 1s linear 0s infinite;
}

.white-orbit-a {
width: 70px;
height: 70px;
border: 1px solid #faf5f5;
animation: spin3D 3s linear 0s infinite;
}

.white-orbit-b {
width: 70px;
height: 70px;
border: 1px solid #faf5f5;
animation: spin3D 1.5s linear 0s infinite;
}

.nucleus {
width: 1px;
height: 1px;
border: 1px solid #ffffff;
animation: spin3D 1s linear 0s infinite;
}
</style>

<div id="loading">
<div class="spinner-box">
<div class="blue-orbit leo"></div>
<div class="green-orbit leo"></div>
<div class="red-orbit leo"></div>
<div class="white-orbit-a leo"></div>
<div class="white-orbit-b leo"></div>
<div class="nucleus leo"></div>
</div>
</div>

<script>
(function () {
const loaded = function () {
window.onload = function () {
const loader = document.getElementById("loading");
loader.className = "fadeout";
setTimeout(function () {
loader.style.display = "none";
},
<%- play_time %>
);
}
};
loaded();
})();
</script>

修改 themes\fluid\layout\layout.ejs 文件,找到 <body> 标签,在其内部第一行插入下面代码:

1
2
3
<% if (theme.loading.enable) { %>
<%- partial('_partials/loading.ejs') %>
<% } %>

修改主题配置文件 _config.fluid.yml,添加 loading 动画的配置项:

1
2
3
4
5
# 加载动画
loading:
enable: true
# 动画时长,从动画开始播放计算,不包含页面加载时间,单位ms
play_time: 500

添加彩色滚动变换字体

在你想要添加彩色滚动变换字体的地方写入以下代码即可,其中文字可自行更改:

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
<div id="binft"></div>
<script>
var binft = function (r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
var l = "",
o = ["青青陵上柏,磊磊涧中石。", "人生天地间,忽如远行客。","斗酒相娱乐,聊厚不为薄。", "驱车策驽马,游戏宛与洛。","洛中何郁郁,冠带自相索。","长衢罗夹巷,王侯多第宅。","两宫遥相望,双阙百余尺。","极宴娱心意,戚戚何所迫?"].map(function (r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
binft(document.getElementById('binft'));
</script>

添加人体时钟等有趣的挂件

在你的博客上有合适的地方,加上。实现代码:

1
2
3
4
5
<!--人体时钟背景透明-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

<!--人体时钟背景白-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>

其他网页小挂件推荐:

http://abowman.com/ 里面有很多有趣的小挂件,可以养养鱼、龟、狗、仓鼠等各式各样的虚拟宠物,能根据你的鼠标指针位置移动,直接复制代码就可以用
http://www.revolvermaps.com/ 它提供网站访客地理信息,可以以2D、3D等形式显示
http://www.amazingcounters.com/ 免费网站计数器,有非常多的样式供你选择,可以设置计数器初始数值,可以设置按访问量计数,也可以按独立访问者计数
https://www.seniverse.com/widget/get 心知天气提供基于Web的免费天气插件,可以为你的网站添加一项简洁美观的天气预报功能,并自动适配PC和手机上的浏览

添加背景代码雨效果

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
window.onload = function(){
//获取画布对象
var canvas = document.getElementById("canvas");
//获取画布的上下文
var context =canvas.getContext("2d");
var s = window.screen;
var W = canvas.width = s.width;
var H = canvas.height;
//获取浏览器屏幕的宽度和高度
//var W = window.innerWidth;
//var H = window.innerHeight;
//设置canvas的宽度和高度
canvas.width = W;
canvas.height = H;
//每个文字的字体大小
var fontSize = 12;
//计算列
var colunms = Math.floor(W /fontSize);
//记录每列文字的y轴坐标
var drops = [];
//给每一个文字初始化一个起始点的位置
for(var i=0;i<colunms;i++){
drops.push(0);
}
//运动的文字
var str ="WELCOME TO WWW.ITRHX.COM";
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw(){
context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
context.fillRect(0,0,W,H);
//给字体设置样式
context.font = "600 "+fontSize+"px Georgia";
//给字体添加颜色
context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色,十六进制颜色
//写入画布中
for(var i=0;i<colunms;i++){
var index = Math.floor(Math.random() * str.length);
var x = i*fontSize;
var y = drops[i] *fontSize;
context.fillText(str[index],x,y);
//如果要改变时间,肯定就是改变每次他的起点
if(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++;
}
};
function randColor(){//随机颜色
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
}
draw();
setInterval(draw,35);
};

在主题文件的相关 css 文件中添加以下代码:

1
2
3
4
5
6
7
8
9
10
canvas {
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
z-index: -1;
}

然后在主题的 layout.ejs 文件中引入即可:

1
2
3
<!-- 数字雨 -->
<canvas id="canvas" width="1440" height="900" ></canvas>
<script type="text/javascript" src="/js/DigitalRain.js"></script>

首行缩进

1
2
3
4
5
6
p {
text-indent: 2em; /*首行缩进*/
}
li > p {
text-indent: 0;
}

文章显示框加宽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
width: 123%;
left: -23%;
}
@media (max-width: 767px) {
.col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
width: 100%;
left: 0;
}
}
@media (max-width: 424px) {
.col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
width: 100%;
left: 0;
}
}

文章目录样式修改

1
2
3
4
5
6
7
8
9
10
.tocbot-active-link {
font-weight: bold;
/*color var(--link-hover-color)*/
color: #158956;
background: #00c4b520;
border-radius: 5px;
}
.toc-list-item::before {
background: #158956;
}

减少文字页边距

1
2
3
4
5
// hexo-theme-fluid/source/css/_pages/_post/post.styl
.post-content, post-custom
box-sizing border-box
padding-left 5%
padding-right 5%

文章提示

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
window.onload = function () {
//不同的日期显示不同的样式,200 天为黄色提示,400天为红色提示,可以自己定义。
let warningDay = 200;
let errorDay = 600;
// 确保能够获取到文章时间以及在文章详情页
let times = document.getElementsByTagName('time');
if (times.length === 0) { return; }
let posts = document.getElementsByClassName('post-content');
if (posts.length === 0) { return; }

// 获取系统当前的时间
let pubTime = new Date(times[0].dateTime); /* 文章发布时间戳 */
let now = Date.now() /* 当前时间戳 */
let interval = parseInt(now - pubTime)
let days = parseInt(interval / 86400000)
/* 发布时间超过指定时间(毫秒) */
if (interval > warningDay * 3600 * 24 * 1000 && interval < errorDay * 3600 * 24 * 1000) {
posts[0].innerHTML = '<div class="fold warning">' +
'<h5>提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章,部分信息可能已发生改变,请注意甄别。</p>' +
'</div>' + posts[0].innerHTML;
} else if (interval >= errorDay * 3600 * 24 * 1000) {
posts[0].innerHTML = '<div class="fold danger">' +
'<h5>提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章,部分信息可能已发生改变,请注意甄别。</p>' +
'</div>' + posts[0].innerHTML;
}
};

Hexo+Fluid美化教程
http://zhangyimin12345.github.io/posts/cmamfvq630011h8364ddsd3bv/
作者
zhangyimin12345
发布于
2025年5月9日
更新于
2025年5月9日
许可协议