音乐

官方教程：Butterfly 添加全局吸底 Aplayer 教程

全局吸底 Aplayer

预览效果

fix-aplayer.webp

实现步骤
  1. 安装 Aplayer 插件 hexo-tag-aplayer
npm install hexo-tag-aplayer --save
  1. 关闭 asset_inject，在项目根目录的 _config.yml 中添加配置如下：

由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需把 asset_inject 设为 false。

# aplayer
aplayer:
  meting: true
  asset_inject: false
  1. 在主题配置文件 _config.butterfly.yml 中开启 Aplayer 配置，如下所示：
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true
  1. 插入 Aplayer 标签，如下所示：
<div
  class="aplayer no-destroy"
  data-id="7427714271"
  data-server="netease"
  data-type="playlist"
  data-fixed="true"
  data-mini="true"
  data-listFolded="false"
  data-order="random"
  data-lrctype="1"
  data-preload="none"
  data-autoplay="true"
  data-theme="#febcd5"
  muted
></div>

参数详细说明请参考 Aplayer 配置参数。

音乐页面

预览效果

meting-page.webp

实现步骤
  1. 创建音乐页面，新建 source/music/index.md 文件，执行下面命令：
hexo new page music
  1. 菜单导航配置，修改主题配置文件 _config.butterfly.yml，添加音乐菜单导航配置，如下所示：
# Menu 目录
menu:
  娱乐 || fa fa-heartbeat:
    音乐: /music/ || fas fa-music
  1. 音乐页面配置，修改 source/music/index.md 文件，内容如下：
{% meting "697054881" "netease" "playlist" "theme:"#febcd5" %}

更多用法请阅读 hexo-tag-aplayer 文档。

图库

预览效果

GalleryGroup 图库

gallery-group.webp

gallery-wallpaper.webp

实现步骤

GalleryGroup 图库

  1. 创建图库页面，新建 source/gallery/index.md 文件，执行下面命令：
hexo new page gallery
  1. 菜单导航配置，修改主题配置文件 _config.butterfly.yml，添加音乐菜单导航配置，如下所示：
# Menu 目录
menu:
  娱乐 || fa fa-heartbeat:
    图库: /gallery/ || fas fa-images

用法描述

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
参数 是否必填 类型 说明
name 是 String 图库名称
description 是 String 图库描述
link 是 String 图库地址链接
img-url 否 String 图库封面链接

内容展示

<div class="gallery-group-main">
{% galleryGroup 'Wallpaper' '壁纸资源' '/gallery/wallpaper' https://xxx/wallhaven-werdv6.webp %}
{% galleryGroup 'Second Dimension' '二次元' '/gallery/second-dimension' https://xxx/wallhaven-z81qyy.webp %}
</div>

效果预览

gallery-group.webp

更多用法请阅读 galleryGroup。

创建图库详情 wallpaper 页面，新建 source/gallery/wallpaper/index.md 文件，执行下面命令：

效果预览

gallery-wallpaper.webp

卡通人物

预览效果

live2d-shizuku.webp

实现步骤

鼠标移动特效

实现步骤
  1. 在项目根目录下 source 文件下新建 js/star-canvas.js 文件，内容如下：
/**
 * 鼠标滑动生成星星特效
 */
const startCanvas = () => {
  window.addEventListener("load", () => {
    var canvas = document.querySelector("#star-canvas");
    var ctx = canvas.getContext("2d");
    window.onresize = resizeCanvas;
    // 设置画布大小
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resizeCanvas();

    // 设置画布样式
    canvas.style.cssText = `
      position: fixed;
      z-index: 1000;
      pointer-events: none;
      top: 0;
      left: 0;
    `;

    var arr = [];
    var colours = ["#ec4c8c", "#f47466", "#a4d8fa", "#ff9900", "#febcd5"];
    // 鼠标移动事件
    window.addEventListener("mousemove", (e) => {
      arr.push({
        x: e.clientX,
        y: e.clientY,
        r: Math.random() * 0.5 + 1.5,
        td: Math.random() * 4 - 2,
        dx: Math.random() * 2 - 1,
        dy: Math.random() * 1 + 1,
        rot: Math.random() * 90 + 90,
        color: colours[Math.floor(Math.random() * colours.length)],
      });
    });

    // 绘制星星
    function star(x, y, r, l, rot) {
      ctx.beginPath();
      for (let i = 0; i < 5; i++) {
        ctx.lineTo(
          Math.cos(((18 + i * 72 - rot) * Math.PI) / 180) * r + x,
          -Math.sin(((18 + i * 72 - rot) * Math.PI) / 180) * r + y
        );
        ctx.lineTo(
          Math.cos(((54 + i * 72 - rot) * Math.PI) / 180) * l + x,
          -Math.sin(((54 + i * 72 - rot) * Math.PI) / 180) * l + y
        );
      }
      ctx.closePath();
    }

    // 绘制
    function draw() {
      for (let i = 0; i < arr.length; i++) {
        let temp = arr[i];
        star(temp.x, temp.y, temp.r, temp.r * 3, temp.rot);
        ctx.fillStyle = temp.color;
        ctx.strokeStyle = temp.color;
        ctx.lineWidth = 0.1;
        ctx.lineJoin = "round";
        ctx.fill();
        ctx.stroke();
      }
    }

    // 更新
    function update() {
      for (let i = 0; i < arr.length; i++) {
        arr[i].x += arr[i].dx;
        arr[i].y += arr[i].dy;
        arr[i].rot += arr[i].td;
        arr[i].r -= 0.015;
        if (arr[i].r < 0) {
          arr.splice(i, 1);
        }
      }
    }

    // 定时器
    setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      draw();
      update();
    }, 20);
  });
};
// 启动
startCanvas();
  1. 在主题配置文件 _config.butterfly.yml 中引入 star-canvas.js 文件，如下所示：
inject:
  head:
    # 自定义覆盖样式
  bottom:
    # 鼠标滑动星星特效
    - <canvas id="star-canvas"></canvas>
    - <script src="/blog-hexo/js/star-canvas.js"></script>