博客美化记录

写在前面

众所周知， 一个好的前端/排版是继续做下去的动力（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日
许可协议