Butterfly下载

npm安装

在hexo根目录下，打开命令行，运行下列命令:

1
2
npm install hexo-theme-butterfly

此方法只支持 Hexo 5.0.0 以上版本,通過 npm 安裝並不會在 themes 裏生成主題文件夾，而是在 node_modules 裏生成

Git安装

Github链接在这里 ：Butterfly

鼠标指针修改

下载鼠标指针文件

可以在致美化网站中下载鼠标指针样式。解压缩后，在hexo-butterfly-theme/source/img/chamber路径(如果没有，就新建一个文件夹)下，将解压后的.cur文件放入。

修改配置

在 hexo-theme-butterfly/source/css/文件夹下，新建cursors.css文件，里面写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* 下面的文件均在hexo-butterfly-theme/source/img/chamber路径下 */
/* 全局默认鼠标指针 */
body,
html {
  cursor: url('/img/chamber/normal.cur'), auto !important; /* 使用 normal.cur */
}

/* 悬停图片时的鼠标指针 */
img {
  cursor: url('/img/chamber/diag1.cur'), auto !important; /* 使用 diag1.cur */
}

/* 选择链接标签时的鼠标指针 */
a:hover {
  cursor: url('/img/chamber/link.cur'), auto; /* 使用 link.cur */
}

/* 选中输入框时的鼠标指针 */
input:hover {
  cursor: url('/img/chamber/text.cur'), auto; /* 使用 text.cur */
}

/* 悬停按钮时的鼠标指针 */
button:hover {
  cursor: url('/img/chamber/handwriting.cur'), auto; /* 使用 handwriting.cur */
}

/* 悬停列表标签时的鼠标指针 */
i:hover {
  cursor: url('/img/chamber/precision.cur'), auto; /* 使用 precision.cur */
}

/* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
#footer-wrap a:hover {
  cursor: url('/img/chamber/link.cur'), auto; /* 使用 link.cur */
}

/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover {
  cursor: url('/img/chamber/diag2.cur'), auto; /* 使用 diag2.cur */
}

/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover {
  cursor: url('/img/chamber/move.cur'), auto; /* 使用 move.cur */
}

保存。

在hexo-theme-butterfly中，找到config.yml文件，找到大概inject:，把下面的语句插入bottom里面，最后效果如下:

1
2
3
inject:
  head:
  - <link rel="stylesheet" href="/css/cursors.css">

最后，hexo三连即可。

随鼠标移动的星星特效

修改配置

在 hexo-theme-butterfly/source/js路径下创建一个名为 fairyDustCursor的文件，里面写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
(function fairyDustCursor() {

  var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
  var width = window.innerWidth;
  var height = window.innerHeight;
  var cursor = {x: width/2, y: width/2};
  var particles = [];

  function init() {
    bindEvents();
    loop();
  }

  // Bind events that are needed
  function bindEvents() {
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('touchmove', onTouchMove);
    document.addEventListener('touchstart', onTouchMove);

    window.addEventListener('resize', onWindowResize);
  }

  function onWindowResize(e) {
    width = window.innerWidth;
    height = window.innerHeight;
  }

  function onTouchMove(e) {
    if( e.touches.length > 0 ) {
      for( var i = 0; i < e.touches.length; i++ ) {
        addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
      }
    }
  }

  function onMouseMove(e) {
    cursor.x = e.clientX;
    cursor.y = e.clientY;

    addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
  }

  function addParticle(x, y, color) {
    var particle = new Particle();
    particle.init(x, y, color);
    particles.push(particle);
  }

  function updateParticles() {

    for( var i = 0; i < particles.length; i++ ) {
      particles[i].update();
    }

    for( var i = particles.length -1; i >= 0; i-- ) {
      if( particles[i].lifeSpan < 0 ) {
        particles[i].die();
        particles.splice(i, 1);
      }
    }

  }

  function loop() {
    requestAnimationFrame(loop);
    updateParticles();
  }

  function Particle() {

    this.character = "*";
    this.lifeSpan = 120; //ms
    this.initialStyles ={
      "position": "fixed",
      "top": "0", //必须加
      "display": "block",
      "pointerEvents": "none",
      "z-index": "10000000",
      "fontSize": "20px",
      "will-change": "transform"
    };

    this.init = function(x, y, color) {

      this.velocity = {
        x:  (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
        y: 1
      };

      this.position = {x: x - 10, y: y - 20};
      this.initialStyles.color = color;
      console.log(color);

      this.element = document.createElement('span');
      this.element.innerHTML = this.character;
      applyProperties(this.element, this.initialStyles);
      this.update();

      document.body.appendChild(this.element);
    };

    this.update = function() {
      this.position.x += this.velocity.x;
      this.position.y += this.velocity.y;
      this.lifeSpan--;

      this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
    }

    this.die = function() {
      this.element.parentNode.removeChild(this.element);
    }

  }

  function applyProperties( target, properties ) {
    for( var key in properties ) {
      target.style[ key ] = properties[ key ];
    }
  }

  init();
})();

然后在hexo-theme-butterfly中，找到config.yml文件，在底部引入:

1
2
3
4
inject:
  bottom:
     # - <script src="xxxx"></script>  #这一行是示例
       - <script type="text/javascript" src="/js/fairyDustCursor.js"></script>  # 随鼠标移动的星星特效

效果

效果如下:

image-20241012180531419

看板娘（角落人物）

字体修改

字体下载

如果需要用复古一点的字体，可以参考下面的链接，去下载：10+ 款可免費商業使用的復古字體推薦

下载好之后，得到.ttf格式的字体文件。

配置修改

在 hexo-theme-butterfly/source/css/文件夹下，新建一个文件夹，起名为fontDiy,把需要导入的字体文件，放入其中，并且在里面创建一个fontDiy.css文件，里面写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 导入第一个字体 */
@font-face {
  font-family: 'qiji';
  src: url('qiji-combo.ttf'); /* 自定义字体1 */
}

/* 导入第二个字体 */
@font-face {
  font-family: 'NewTegomin';
  src: url('NewTegomin-Regular.ttf'); /* 自定义字体2 */
}

/* 导入第三个字体 */
@font-face {
  font-family: 'Iansui-Regular';
  src: url('Iansui-Regular.ttf'); /* 自定义字体2 */
}

/* 导入第四个字体 */
@font-face {
  font-family: 'Jinghualaosongti';
  src: url('Jinghualaosongti-v2.002.ttf'); /* 自定义字体2 */
}

/* 设置 body 的字体优先级 */
body {
  font-family: qiji, NewTegomin,ModernSerif,Iansui-Regular, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "STZhongsong", "Lantinghei SC", sans-serif;
  font-size: 1.2rem; /* 设定相对于根元素的字体大小 */
}


/* font-size: 16px;：设置 body 的字体大小为16像素。你可以根据需要调整这个值，比如 14px、18px 等。
px（像素）是常见的单位，除此之外，你还可以使用其他单位，比如：
em：相对于父元素字体大小的单位。
rem：相对于根元素（HTML）的字体大小。
%：相对于父元素的百分比*/

font-family可以随便起名字。

body里面设置字体显示的优先级。

font-size可以设置字体的大小，但是:warning:此处修改了，其他非字体的显示也会放大缩小。

font-size: 16px;设置 body 的字体大小为16像素。

你可以根据需要调整这个值，比如 14px、18px 等。
px（像素）是常见的单位，除此之外，你还可以使用其他单位，比如：
em：相对于父元素字体大小的单位。
rem：相对于根元素（HTML）的字体大小。
%：相对于父元素的百分比

接着在inject的头部引入即可:

1
2
3
inject:
  head:
       - <link rel="stylesheet" href="/css/fontDiy/fontDiy.css"> #  更改字体样式

插入视频

B站视频

image-20241023125257937

分享->嵌入代码即可。然后把复制好的代码放到文章中。

本地视频

把视频放到一个文件夹中，然后输入下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{%
    dplayer     
    "url=/resources/video/scenery.mp4"  //设置视频目录，这里我放在了网站根目录下面，也就是public目录下面 
    "pic=/resources/images/scenery_three.jpeg" //设置封面图，同样是放在根目录下面 
    "loop=yes"  //循环播放
    "theme=#FADFA3"   //主题
    "autoplay=true"  //自动播放
    "screenshot=true" //允许截屏
    "hotkey=true" //允许hotKey，比如点击空格暂停视频等操作
    "preload=auto" //预加载：auto
    "volume=0.9"  //初始音量
    "playbackSpeed=1"//播放速度1倍速，可以选择1.5,2等
    "lang=zh-cn"//语言
    "mutex=true"//播放互斥，就比如其他视频播放就会导致这个视频自动暂停

    //下面是弹幕相关
    "id=9E2E3368B56CD123BB4"
    "api=https://api.prprpr.me/dplayer/"
    "token=tokendemo"
    "maximum=1000"
    "addition=['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142']"
    "user=DIYgod"
    "bottom=15%"
    "unlimited=true"
%}

在线视频

另一个示例,直接把B站的“嵌入代码”复制过来

1
2
3
{% raw %}
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=457559832&bvid=BV1N5411L7yx&cid=250915968&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
{% endraw %}

参考文档

Butterfly官方网站

https://9527zxl.github.io/2021/07/22/butterfly%E4%B8%BB%E9%A2%98%E9%AD%94%E6%94%B9%E6%A0%B7%E5%BC%8F/#%E9%BC%A0%E6%A0%87%E6%8C%87%E9%92%88%E6%A0%B7%E5%BC%8F%E6%9B%BF%E6%8D%A2

https://www.cnblogs.com/MoYu-zc/p/14395965.html