本文已收录至 Butterfly 主题美化教程

侧边栏是 Butterfly 主题的一大功能亮点，在 Butterfly 3.8.0 版本前是不支持自定义侧边栏的，只能通过魔改实现。这也因此诞生了许多优质的魔改教程，效果也很惊艳，比如 Heo 收录的：侧边栏 | Butterfly 主题美化教程 (zhheo.com)。

Butterfly 3.8.0 以后，主题支持自定义侧边栏，这也使我们可以通过不修改主题源码的方式自定义想要的侧边栏。（主题官方文档参考：自定義側邊欄 | Butterfly）

授人以鱼不如授人以渔。本篇文章将以这个特性为基础，结合 CodePen 中的项目，以三个例子展示定制侧边栏过程：

小风车：这是对主题官方文档示例的举一反三，提供与 CodePen 项目结合的思路。
Crowd Simulator 人潮涌动模拟器：引入 CSS 文件去掉侧边栏容器的边框，嵌入 iframe 页面
Car 小汽车：上例的举一反三

本人前端水平有限，欢迎各位博主互相交流！

小风车

首先，在 Trending - CodePen 找到自己想要的小组件，以小风车为例 Windmill (codepen.io)，进入代码编辑界面，里面有 HTML 代码和 CSS 代码。

引入 CSS

点击代码框右上小箭头，编译 css 文件：

复制里面的的代码到新文件 windmill.css。并将该 CSS 文件引入主题中。Butterfly 主题的方法为在主题配置文件的 inject 部分引入 CSS，如：

inject:
  head:
    - <link rel="stylesheet" href="your css">
  bottom:
    - <script src="your js"></script>

删除不必要代码（否则导致博客异常）并稍微修改一下类选择器（以防万一）：

- *,
- *:before,
- *:after {
-   ...
- }
- body {
-   ...
- }
- .inspiration {
- 	...
- }
- .center {
- ...
- }
- @media screen and (max-height: 500px) {
- ...
- }
+ /* 这是为了让svg居中 */
+ .windmill {
+     display: flex;
+     align-items: center;
+     justify-content: center;
+ }

+ /* 以下关于svg类选择器加上.windmill */
- svg {
+ svg.windmill {
  overflow: visible;
}
- svg .blades {
+ svg .blades.windmill {
	...
}
- svg .clouds path:nth-child(1) {
+ svg .clouds.windmill path:nth-child(1) {
	...
}
- svg .clouds path:nth-child(2) {
+ svg .clouds.windmill path:nth-child(2) {
	...
}
...

widget.yml 放入关键 HTML 代码

只提取代码中第一个 div 元素，并对相关元素增加 windmill 类：

-<div class="center">
+<div class="windmill">
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="615.66 311.71 271.03 207.66" width="271.03" height="207.66">
-   <g class="clouds" fill="none" stroke-width="3" stroke="#BED3CF" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3">
+ <svg class="windmill" xmlns="http://www.w3.org/2000/svg" viewBox="615.66 311.71 271.03 207.66" width="271.03" height="207.66">
+ <g class="clouds windmill" fill="none" stroke-width="3" stroke="#BED3CF" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3">
        ...
    </g>
	...
- <g class="blades" fill="#FFF" stroke-width="3" stroke="#4A5370" stroke-linejoin="round" stroke-miterlimit="3">
+ <g class="blades windmill" fill="#FFF" stroke-width="3" stroke="#4A5370" stroke-linejoin="round" stroke-miterlimit="3">
	...
  </g>
</svg>
</div>

在 widget.yml 中是这样的：

注意 YAML 文件中的缩进！否则会报这样的错误：

1	can not read a block mapping entry; a multiline key may not be an implicit key

Crowd Simulator 人潮涌动模拟器

逛了许多博主的网站，发现了这个卡片：Crowd Simulator (codepen.io)。想尝试一下是不是可以放到侧边栏，试了一晚上成功了。现分享步骤。

新建 HTML 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>人潮汹涌 Crowd Simulator</title>
    <link rel="stylesheet" href="/css/people.css">
</head>

<body><canvas id="canvas"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
</body>

<style>
    body,
    html {
        height: 100%;
        background-color: #fff
    }

    body {
        margin: 0
    }

    #canvas {
        width: 100%;
        height: 100%
    }

    body::-webkit-scrollbar {
        display: none
    }

</style>

<script>

const config = {
  src:
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/open-peeps-sheet.png",
  rows: 15,
  cols: 7
};

// UTILS

const randomRange = (min, max) => min + Math.random() * (max - min);

const randomIndex = (array) => randomRange(0, array.length) | 0;

const removeFromArray = (array, i) => array.splice(i, 1)[0];

const removeItemFromArray = (array, item) =>
  removeFromArray(array, array.indexOf(item));

const removeRandomFromArray = (array) =>
  removeFromArray(array, randomIndex(array));

const getRandomFromArray = (array) => array[randomIndex(array) | 0];

// TWEEN FACTORIES

const resetPeep = ({ stage, peep }) => {
  const direction = Math.random() > 0.5 ? 1 : -1;
  // using an ease function to skew random to lower values to help hide that peeps have no legs
  const offsetY = 100 - 250 * gsap.parseEase("power2.in")(Math.random());
  const startY = stage.height - peep.height + offsetY;
  let startX;
  let endX;

  if (direction === 1) {
    startX = -peep.width;
    endX = stage.width;
    peep.scaleX = 1;
  } else {
    startX = stage.width + peep.width;
    endX = 0;
    peep.scaleX = -1;
  }

  peep.x = startX;
  peep.y = startY;
  peep.anchorY = startY;

  return {
    startX,
    startY,
    endX
  };
};

const normalWalk = ({ peep, props }) => {
  const { startX, startY, endX } = props;

  const xDuration = 10;
  const yDuration = 0.25;

  const tl = gsap.timeline();
  tl.timeScale(randomRange(0.5, 1.5));
  tl.to(
    peep,
    {
      duration: xDuration,
      x: endX,
      ease: "none"
    },
    0
  );
  tl.to(
    peep,
    {
      duration: yDuration,
      repeat: xDuration / yDuration,
      yoyo: true,
      y: startY - 10
    },
    0
  );

  return tl;
};

const walks = [normalWalk];

// CLASSES

class Peep {
  constructor({ image, rect }) {
    this.image = image;
    this.setRect(rect);

    this.x = 0;
    this.y = 0;
    this.anchorY = 0;
    this.scaleX = 1;
    this.walk = null;
  }

  setRect(rect) {
    this.rect = rect;
    this.width = rect[2];
    this.height = rect[3];

    this.drawArgs = [this.image, ...rect, 0, 0, this.width, this.height];
  }

  render(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.scale(this.scaleX, 1);
    ctx.drawImage(...this.drawArgs);
    ctx.restore();
  }
}

// MAIN

const img_crowd = document.createElement("img");
img_crowd.onload = init;
img_crowd.src = config.src;

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

const stage = {
  width: 0,
  height: 0
};

var allPeeps = [];
const availablePeeps = [];
const crowd = [];

function init() {
  createPeeps();

  // resize also (re)populates the stage
  resize();

  gsap.ticker.add(render);
  window.addEventListener("resize", resize);
}

function createPeeps() {
  const { rows, cols } = config;
  const { naturalWidth: width, naturalHeight: height } = img_crowd;
  const total = rows * cols;
  const rectWidth = width / rows;
  const rectHeight = height / cols;

  for (let i = 0; i < total; i++) {
    allPeeps.push(
      new Peep({
        image: img_crowd,
        rect: [
          (i % rows) * rectWidth,
          ((i / rows) | 0) * rectHeight,
          rectWidth,
          rectHeight
        ]
      })
    );
  }
}

function resize() {
  stage.width = canvas.clientWidth;
  stage.height = canvas.clientHeight;
  canvas.width = stage.width * devicePixelRatio;
  canvas.height = stage.height * devicePixelRatio;

  crowd.forEach((peep) => {
    peep.walk.kill();
  });

  crowd.length = 0;
  availablePeeps.length = 0;
  availablePeeps.push(...allPeeps);

  initCrowd();
}

function initCrowd() {
  while (availablePeeps.length) {
    // setting random tween progress spreads the peeps out
    addPeepToCrowd().walk.progress(Math.random());
  }
}

function addPeepToCrowd() {
  const peep = removeRandomFromArray(availablePeeps);
  const walk = getRandomFromArray(walks)({
    peep,
    props: resetPeep({
      peep,
      stage
    })
  }).eventCallback("onComplete", () => {
    removePeepFromCrowd(peep);
    addPeepToCrowd();
  });

  peep.walk = walk;

  crowd.push(peep);
  crowd.sort((a, b) => a.anchorY - b.anchorY);

  return peep;
}

function removePeepFromCrowd(peep) {
  removeItemFromArray(crowd, peep);
  availablePeeps.push(peep);
}

function render() {
  canvas.width = canvas.width;
  ctx.save();
  ctx.scale(devicePixelRatio, devicePixelRatio);

  crowd.forEach((peep) => {
    peep.render(ctx);
  });

  ctx.restore();
}

</script>

</html>

这个 HTML 模板很简单：

body 部分放 Crowd Simulator (codepen.io) 中 HTML 的内容
style 部分放 CSS 内容。增加一点样式隐藏滚动条。

1
2
3

body::-webkit-scrollbar {
       display: none
   }

js 做了写优化（我调错调试出来的）
- 引入其他 js：gsap.min.js
- 改了一个变量名：img->img_crowd 防冲突

将新建的 HTML 放到你博客目录 Sourse 文件夹下的合适位置。这里我单独放到 DO_NOT_render 文件夹下，以便后续设置 Hexo 忽略对该文件夹的渲染。注意 DO_NOT_render 文件夹是 sourse 的子文件夹。

在 _config.yaml 中设置禁止渲染：

1 2	skip_render: - DO_NOT_render/people.html

引入 CSS

Butterfly 主题配置文件 inject 以下 CSS：

#effect_shade{
    /* width:40%!important; */
    height: 200px;
    background-color: var(--lyx-white-acrylic1)!important;
    border-radius: 8px;
    /* margin-right: 10px !important; */
    font-family: PingFang,微软雅黑,HYTMR,SimSun;
    background-size:cover;
    color: #00000000;
    font-size:40px; /*觉得小可以开大一点*/
    position: relative;
}
#effect_shade-banner{
    width:100%!important;
    height:100%!important;
    border-radius:8px;
}
#effect_shade-hover{
    position:absolute;
    right:0%;
    height:100%!important;
    color:var(--lyx-0);
    border-radius: 8px;
    padding-left: 5%;
    padding-top: 5%;
}
#effect_shade-hover:hover{
   color:#ffffff;
   background-color: #669900dd;
   backdrop-filter: blur(10px) saturate(180%);
   -webkit-backdrop-filter: blur(10px) saturate(180%);
}

/* 这是为了无缝侧边栏 */
.seamless-card{
    padding: 0px!important;
}
.seamless-card .item-headline{
    padding-bottom: 0px!important;
    height: 0px!important;
}

从上面的 CSS 中注意到：

/* 这是为了无缝侧边栏 */
.seamless-card{
    padding: 0px!important;
}
.seamless-card .item-headline{
    padding-bottom: 0px!important;
    height: 0px!important;
}

这是为了覆盖 Butterfly 主题侧边栏样式，实现对目标侧边栏卡片进行调整，达到无缝的效果。这部分也可以独立出一个 css 样式文件出来。

自定义侧边栏 widget.yml

再次提醒

关于自定义侧边栏（widget.yml）信息详看 Butterfly 主题官方文档自定義側邊欄 | Butterfly

top:
  - class_name: seamless-card
    id_name:
    name:
    icon:
    order:
    html: |
      <div id="effect_shade">
      <iframe id="effect_shade-banner" src="/DO_NOT_render/people.html" frameborder="no"></iframe>
      <a id="effect_shade-hover" style="width:100%;height:auto;" href="javascript:randomPost()">
          <span>&nbsp</span><i class="fa fa-paper-plane"></i>
        <div>&nbsp随便逛逛→</div></a>
      </div>

seamless-card 呼应上文的无缝效果。无边框的关键就在于这！

注意到，

1	<a id="random-hover" style="width:100%;height:auto;" href="javascript:randomPost()">

中的 js 函数为之前写的随机跳转函数 ^[1]，你可以执行你想要的函数。

从这个例子中，我们学到，HTML 是实现画面内容，CSS 是实现鼠标悬停动效，widget.yaml 可以配置侧边栏效果。以这种方式我们很快就能做出第二个例子。

Car 小汽车

项目：car (codepen.io)

这个项目里只有 css 代码，那这个页面就简单了。新建 HTML 放入 DO_NOT_render 文件夹。

<!DOCTYPE html>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小车</title>
</head>
<script>
	// 这里放项目的CSS
</script>
</html>

widget.yml 几乎不用变：

 - class_name: seamless-card
    id_name:
    name:
    icon:
    order:
    html: |
      <div id="effect_shade">
-     <iframe id="effect_shade-banner" src="/DO_NOT_render/people.html" frameborder="no"></iframe>
+     <iframe id="effect_shade-banner" src="/DO_NOT_render/car/car.html" frameborder="no"></iframe>
      <a id="effect_shade-hover" style="width:100%;height:auto;" href="javascript:randomPost()">
          <span>&nbsp</span><i class="fa fa-paper-plane"></i>
        <div>&nbsp随便逛逛→</div></a>
      </div>