Hexo之静态+动态背景设置

最新推荐文章于 2024-02-04 09:16:37 发布

原创最新推荐文章于 2024-02-04 09:16:37 发布 · 6.7k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#博客 #Hexo #动态背景 #静态背景 #javascript

Hexo 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在博客中设置静态背景图片，并实现动态交互式背景效果。通过编辑CSS文件来指定背景图片及其显示方式，利用JavaScript库canvas-nest.js添加动态背景。

写在前面

　　实现背景图更换及平铺，以及引入动态背景（可交互）

静态background设置

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

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

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

动态可交互背景（js引入）

打开博客根目录/themes/next/layout/_layout.swig文件，在之前添加代码如下：

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

属性说明：
- color ：线条颜色, 默认: ‘0,0,0’；三个数字分别为(R,G,B)
- opacity: 线条透明度（0~1）, 默认: 0.5
- count: 线条的总数量, 默认: 150
- zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

2.打开博客根目录/themes/next/_config.yml，找到字段canvas_nest，将其置为true【如果没有找到该字段，请自行添加】
3.hexo clean , hexo d -g可以看到效果~