博客美化记录

写在前面

众所周知, 一个好的前端/排版是继续做下去的动力(bushi)

难得有空,继续来建设一下博客,简单美化一下前端。

自定义 JS/CSS/HTML

引入自定义的 JS/CSS/HTML 是继续下列美化操作的条件,可以通过以下主题配置(楼主使用的是 Fluid 主题,不同主题之间可能存在一些差异)。你可以在配置文件中找到:

1
2
3
4
5
6
7
8
9
# 指定自定义 .js 文件路径,支持列表;路径是相对 source 目录,如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js:
- /js/custom.js

# 指定自定义 .css 文件路径,用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
- /css/custom.css

自行添加自定义的 JS/CSS/HTML 文件即可。

全局字体

  1. 首先在 custom.css 中引入字体 CDN ;
1
2
/* 字体 */
@import url('https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Bold/result.css');
  1. 然后修改主题配置文件的字体部分,例如:
1
2
3
4
5
6
7
8
# 主题字体配置
# Font
font:
font_size: 16px
font_family: 'Maple Mono CN'
font_weight: 400
letter_spacing: 0.02em
code_font_size: 85%

樱花特效

这里直接用来该网站的 API 接口。并在自定义 js 文件中添加如下内容:

1
2
3
4
5
6
7
$(document).ready(function() {
// 判断是否为首页
if (location.pathname === '/' || location.pathname === '/index.html' || location.pathname === '/index') {
// 加载樱花特效
$.getScript("https://api.vvhan.com/api/script/yinghua");
}
});

我只在首页展示了该特效,所以在前面加了条件判断。

高斯模糊

1. 设置方法

  1. 首先,引入自定义 CSS 文件:
1
2
3
4
5
6
7
8
9
/* 高斯模糊样式 */
.blur-text {
filter: blur(5px);
transition: filter 0.3s ease;
}

.blur-text:hover {
filter: none;
}
  1. 你可以直接在文章中通过 HTML 标签插入,比如:
1
<span class="blur-text">这是被模糊的内容</span>
  1. 也可以创建 Hexo 标签插件:
    1. 在博客根目录创建 scripts 文件夹(如果不存在);
    2. 创建一个新文件 scripts/blur.js,内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 模糊文字标签插件
* 使用方法: {% blur 这是被模糊的内容 %}
*/
hexo.extend.tag.register('blur', function(args, content) {
var text = args.join(' ');
return '<span class="blur-text">' + text + '</span>';
}, {ends: false});

/**
* 支持多行内容的模糊文字标签插件
* 使用方法:
* {% blur_block %}
* 这是被模糊的内容
* 可以包含多行
* {% endblur_block %}
*/
hexo.extend.tag.register('blur_block', function(args, content) {
return '<div class="blur-text">' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '</div>';
}, {ends: true});

2. 使用效果

这段内容是正常显示的。

这段内容被模糊了,鼠标悬停或点击可以查看。

或者使用标签插件:

这是一个被模糊的密码:password123

这是一整段被模糊的内容:

  • 列表项 1
  • 列表项 2

文本黑幕

与高斯模糊的原理是类似的。

1. 使用方法

  1. 引入自定义 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
/* 文本黑幕样式 */
.shady {
position: relative;
display: inline-block;
padding: 0 2px;
border-radius: 2px;
cursor: pointer;
}

.shady::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
border-radius: 2px;
transition: opacity 0.3s ease;
z-index: 1;
}

.shady:hover::before {
opacity: 0;
}

.shady > * {
position: relative;
z-index: 0;
}
  1. 你可以直接在文章中通过 HTML 标签插入,比如:
1
<span class="shady">这是被黑幕遮挡的内容</span>
  1. 也可以创建 Hexo 标签插件:
    1. 在博客根目录创建 scripts 文件夹(如果不存在);
    2. 创建一个新文件 scripts/shady.js,内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 文本黑幕标签插件
* 使用方法: {% shady 这是被黑幕遮挡的内容 %}
*/
hexo.extend.tag.register('shady', function(args, content) {
var text = args.join(' ');
return '<span class="shady"><span>' + text + '</span></span>';
}, {ends: false});

/**
* 支持多行内容的文本黑幕标签插件
* 使用方法:
* {% shady_block %}
* 这是被黑幕遮挡的内容
* 可以包含多行
* {% endshady_block %}
*/
hexo.extend.tag.register('shady_block', function(args, content) {
return '<div class="shady"><div>' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '</div></div>';
}, {ends: true});

2. 使用效果

这是正常显示的文本。

这是一段被黑幕遮挡的内容,鼠标悬停可以查看。

或者使用标签插件:

这是被黑幕遮挡的敏感内容

这是一整段被黑幕遮挡的内容:

  1. 列表项 1
  2. 列表项 2

插入图表

使用 EChart 工具,该工具比较成熟且能绘制的图表多样。

1. 使用方法

  1. 安装 hexo-tag-echarts 插件:
1
npm install hexo-tag-echarts --save
  1. 在需要插入图表的文章开头添加以下 js 内容:
1
2
3
4
// 通过jsDelivr的CDN引入echarts  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
// 使用GL里的各种组件时需要添加,否则可不需要
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"></script>

:这里不通过 js 文件直接引入是因为用到的地方比较少,没必要作为必要加载。(博客里塞的自定义小垃圾已经够多了,加上没做优化,尽可能还是少加载一些)

  1. 插入图表内容:
1
2
3
{% echarts 400 '85%' %}  
...
{% endecharts %}

具体格式说明参考 Echart官网

2. 使用效果

这里以折线图为例:

后记

持续更新中。没什么技术含量,主要是一些小构思。


博客美化记录
https://blog.yokumi.cn/2025/07/03/博客美化记录/
作者
Yokumi
发布于
2025年7月3日
更新于
2025年7月7日
许可协议