洋葱菌的博客

今天由于全站大美化升级，我便想着添加一个飘雪效果（虽然现在是夏天）。不过网上大部分的文章中提供的下雪绘制算法都较为简单粗糙，效果不甚美观，也缺乏针对icarus主题的安装方法（这个主题真是挺小众的……）。在找到一个很漂亮的飘雪算法后，看到安装指南只提供了html源码，没有半点相关知识的我本来是果断选择放弃的，但是我没有死心，连蒙带猜地试了几下之后竟然成功了！我都佩服我自己……不过这也是多亏了我之前各种瞎折腾的经历。

本文就记录一下在hexo+Icarus4.x搭建的博客上添加3D飘雪效果的步骤，方便其他与我状况类似的人的使用。

下载资源

请见这里。

注：资源不保证一直有效

资源正常，则会得到名为snow.js的文件。

此外，还会有如下代码，可以一并复制（此代码有些小问题，建议直接使用后文里提供的）：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="snow.js"></script>
<style type="text/css">
.snow-container{
position:fixed;
top:0;left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:100001;
}
</style>
<div class="snow-container"></div>

部署代码

将“snow.js”放入“source/js/”文件夹（根路径为博客根目录+”/themes/icarus/“，下同）。

在“layout/”文件夹中找到“layout.jsx”文件，在body标签内（即“</body>”之前）加入如下代码：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/snow.js"></script>
<div class="snow-container"></div>

当然如果文件中已经引用过JQuery的，前两行可以不用加。

在“source/css/”文件夹中新建一个“custom.styl”文件，在其中写入如下代码：

.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100001;
}

注：关于custom.styl的更多神奇用法，可以参考这篇教程。

在“source/css/”文件夹中找到“style.styl”文件，在最后一行加入下列代码：
```
@import './custom'
```
其功能是引入刚刚新建的“custom.styl”。
大功告成！在根目录进入git bash，使用下列代码查看效果：
```
hexo g
hexo s
```
正常的话就可以部署了！

结语

博客美化毕竟是锦上添花，有人喜欢花里胡哨，有人喜欢极简。Icarus主题其实是走极简风的，不过在我的魔改下变得逐渐生动起来。但是博客到底重在内容，创作第一，美化其次。

标签

分类

友链

下载资源

部署代码

结语