先看效果：本站目前的背景

00 什么是 Vanta.js ？

你可以检阅它们的网站。在此我引用一段来自 Vanta.js 的介绍：

Vanta.js - Animated website backgrounds in a few lines of code.

What is Vanta? / FAQs
Add 3D animated digital art to any webpage with just a few lines of code.
How it works: Vanta inserts an animated effect as a background into any HTML element.
Works with vanilla JS, React, Angular, Vue, etc.
Effects are rendered by three.js (using WebGL) or p5.js.
Effects can interact with mouse/touch inputs.
Effect parameters (e.g. color) can be easily modified to match your brand.
Total additional file size is ~120kb minified and gzipped (mostly three.js), which is smaller than comparable background images/videos.
Vanta includes many predefined effects to try out. More effects will be added soon!

简而言之，就是类似于本站的背景一样的动态背景。

01 安装插件

在 Butterfly 主题上使用 Vanta.js，其实非常简单，因为 Butterfly 主题作者已经提供了一个 npm 包供我们使用。

使用以下命令安装 hexo-butterfly-vanta：

npm install --save hexo-butterfly-vanta

02 配置插件

安装完成后，在你的 _config.yml (注意不是 _config.butterfly.yml！) 中添加以下内容：

vanta:  # 我的配置
  enable: true  # 是否开启
  effect: net  # 背景特效。可以在 Vantajs.com 上找到其他背景
  option:  # 配置
    mouseControls: true  #是否开启鼠标控制
    touchControls: true  # 是否开启触屏控制
    gyroControls: false  # 是否开启陀螺仪控制
    minHeight: 200.00  # 最小高度
    minWidth: 200.00  # 最小宽度
    scale: 1.00  # 缩放
    scaleMobile: 1.00  # 手机缩放程度

可根据个人需要调整。

03 注意事项

  • Vanta.js 可能会造成一定的性能损失。在低性能设备上使用 Vanta.js 时应该注意。

  • Vanta.js 的其他背景可在 Vantajs.com 上找到。

04 一些额外配置

以下是一些可以提高站点 Vanta.js 观感的配置。

04.1 default_top_img

default_top_img: transparent  # 透明的 default_top_image
footer_img: transparent  # 透明的页脚图片