使用js为Hexo+NexT主题添加下雪背景特效

发表于 分类于 Waline： 本文字数： 718 阅读时长 ≈ 3 分钟

适当添加一点动效，能让博客显得没那么单调。

考虑到博客的背景图，在此引入一个下雪特效再合适不过了。

下面介绍一下使用 javascript 对这一效果的实现，以及添加特效到博客的过程。

一共可以分为以下三步。

下雪特效代码

在站点根目录下的 /themes/next/source/js 创建 myjs 文件夹，便于引入自定义的文件。

随后，在 myjs 文件夹新建一个 snow.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
(function ($) {
	$.fn.snow = function (options) {
		$('body').append('<div id="snow"></div>');
		var $flake = $('<div id="snowbox" />').css({ 'position': 'fixed', 'z-index': '-1', 'top': '-50px' }).html('&#10052;'),
			defaults = {
				minSize: 10,
				maxSize: 20,
				newOn: 1000,
				flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
			},
			options = $.extend({}, defaults, options);
		var interval = setInterval(function () {
			var documentHeight = $(document).height();
			var documentWidth = $(document).width();
			var startPositionLeft = Math.random() * documentWidth - 100,
				startOpacity = 0.5 + Math.random(),
				sizeFlake = options.minSize + Math.random() * options.maxSize,
				endPositionTop = documentHeight - 200,
				endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
				durationFall = documentHeight * 10 + Math.random() * 5000;
			$flake.clone().appendTo('#snow').css({
				left: startPositionLeft,
				opacity: startOpacity,
				'font-size': sizeFlake,
				color: options.flakeColor
			}).animate({
				top: endPositionTop,
				left: endPositionLeft,
				opacity: 0.2
			}, durationFall, 'linear', function () {
				$(this).remove()
			});
		}, options.newOn);
	};
})(jQuery);
$(function () {
	$.fn.snow({
		minSize: 5, /* 定义雪花最小尺寸 */
		maxSize: 50,/* 定义雪花最大尺寸 */
		newOn: 300  /* 定义密集程度，数字越小越密集 */
	});
});

代码来源网络，但为了适配博客页面，我做了些许修改：

  • 在第3行处，为 body 添加了一个 div ，用来放置雪花。原代码直接将雪花放在 body 中，这在调试时会让网页代码看起来比较乱。
  • 修改了 snowbox 处的 css 样式。
    • 'position': 'fixed' 能动态获取浏览器窗口大小，在窗口变形时，不影响博客内容布局。原代码使用 absolute 位置，这不利于动态布局。
    • 'z-index': '-1' 保证了雪花位于博客内容之下，背景之上，不影响阅读。原代码的雪花是是浮于页面之上的。
  • 将 documentHeight 与 documentWidth 的获取移入了 setInterval 之中。有利于动态获取页面大小，及时调整雪花出现的位置。

编辑自定义样式

接下来这一步是在 NexT 提供的自定义样式文件中引入我们刚才编写的 snow.js 。

在站点根目录下 source 文件夹打开（或者新建）_data 目录，新建 body-end.njk，填入如下代码：

1
2
3
4
5
{# 下雪特效 #}
{% if theme.snow_effect %}
  <script type="text/javascript" src="/js/myjs/snow.js"></script>
{% endif %}

这段代码将检查 主题配置文件 中 snow_effect 是否开启，如果开启，则引入上文提到的 snow.js。

编辑主题配置文件

在 站点配置文件 设置 skip_render 如下：

1
2
skip_render:
  - "_data/**"

这样可以防止意外的渲染。

接下来打开 主题配置文件：

  1. 在 custom_file_path 部分，配置 bodyEnd: source/_data/body-end.njk ，以引入自定义样式。
  2. 在底部新建一行：snow_effect: true 以开启下雪特效。

至此，所有配置均已完成，可以生成站点检查一下效果。