Hexo-Next搭建个人博客（主题内加入动态背景）

发表于 2018-08-08 | 更新于 2019-04-17 | 分类于 Hexo | 阅读次数：

本文字数： 898 | 阅读时长 ≈ 1 分钟

本文介绍如何给Blog主题添加静态背景和动态背景特效

添加静态背景

打开博客根目录/themes/next/source/css/_custom/custom.styl文件，编辑如下：

// Custom styles.
body { 
	background-image: url(/images/background.png);
	background-attachment: fixed; // 不随屏幕滚动而滚动
	background-repeat: no-repeat; // 如果背景图不够屏幕大小则重复铺，改为no-repeat则表示不重复铺
	//background-size: contain; // 等比例铺满屏幕
}

将背景图命名为background.png并放入主题根目录/images下

添加动态背景

_layout.swig

找到themes\next\layout\_layout.swig文件，添加内容：
在<body>里添加：

1
2
3

<div class="bg_content">
  <canvas id="canvas"></canvas>
</div>

仍是该文件，在末尾添加：

1	<script type="text/javascript" src="/js/src/dynamic_bg.js"></script>

dynamic_bg.js

在themes\next\source\js\src中新建文件dynamic_bg.js，代码链接中可见：dynamic_bg.js

custom.styl

在themes\next\source\css\_custom\custom.styl文件末尾添加内容：

.bg_content {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}