写在前面

本文章讲述了在butterfly hexo基本主题搭建完成后，一些魔改与自建的结果汇总（当然也有些新的语法写在这里避免忘记）

自定义加载动画

一个下午了，终于成功

参考文章，在此致谢

1.修改 themes/butterfly/layout/includes/loading/fullpage-loading.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    div.loading-img
    .loading-image-dot

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

2.修改themes/butterfly/layout/includes/loading/index.pug

1
2
3
4
5
6
7
if theme.preloader.source === 1
  include ./fullpage-loading.pug
else if theme.preloader.source === 2
  include ./pace.pug
else
  include ./fullpage-loading.pug
  include ./pace.pug

3.新建source/css/progress_bar.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 10px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 8px;
  width: 4rem;
  background: #eaecf2;
  border: 1px #e3e8f7;
  overflow: hidden;
}

.pace-inactive .pace-progress {
  opacity: 0;
  transition: 0.3s ease-in;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 200px;
  position: absolute;
  z-index: 2000;
  display: block;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 1.5s ease infinite;
  background-size: 200%;
}

.pace.pace-inactive {
  opacity: 0;
  transition: 0.3s;
  top: -8px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

此外修改themes/butterfly/source/css/_layout/loading.styl, 注意其中颜色代码—sean-colour等需自行替换为自己的色值

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
if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--sean-colour);
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    .loading-image-dot
      width: 30px;
      height: 30px;
      background: #6bdf8f;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #fff;
      top: 50%;
      left: 50%;
      transform: translate(18px, 24px);
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

避坑：不能直接替换为色号，须在本代码前加上下面代码

1
2
3
:root {
  --sean-colour: #37474f;
}

这是css中var的语法要求，具体可自己查询

4.在合适的地方加上自定义 css, 其中 background 的 url 即为 loading 的图片地址。

不会的同学参考点我

1
2
3
4
.loading-img {
  background: url(https://selv.es/random/index.php?param=avatar) no-repeat center center;
  background-size: cover;
}

5.最后修改_config.butterfly.yml中preloader选项, 改完以后source: 1为满屏加载无pace胶囊,source: 2为pace胶囊无满屏动画, source: 3是两者都启用。

1
2
3
4
5
6
7
8
9
10
11
# Loading Animation (加载动画)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  # else all
  source: 3
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/progress_bar.css
  avatar: # 自定义头像

*bilibili卡片

基本实现

本内容来自文章，在此致谢

1.在[blogroot]\themes\butterfly\scripts\tag下新建文件bilibili.js并粘贴如下代码：

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
'use strict'
let playIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67735 4.2798C5.98983 4.1725 7.85812 4.0625 10 4.0625C12.1421 4.0625 14.0105 4.17252 15.323 4.27983C16.2216 4.3533 16.9184 5.04049 16.9989 5.9318C17.0962 7.00837 17.1875 8.43614 17.1875 10C17.1875 11.5639 17.0962 12.9916 16.9989 14.0682C16.9184 14.9595 16.2216 15.6467 15.323 15.7202C14.0105 15.8275 12.1421 15.9375 10 15.9375C7.85812 15.9375 5.98983 15.8275 4.67735 15.7202C3.77861 15.6467 3.08174 14.9593 3.00119 14.0678C2.90388 12.9908 2.8125 11.5627 2.8125 10C2.8125 8.43727 2.90388 7.00924 3.00119 5.93221C3.08174 5.04067 3.77861 4.35327 4.67735 4.2798ZM10 2.8125C7.81674 2.8125 5.9136 2.92456 4.5755 3.03395C3.07738 3.15643 1.8921 4.31616 1.75626 5.81973C1.65651 6.92379 1.5625 8.39058 1.5625 10C1.5625 11.6094 1.65651 13.0762 1.75626 14.1803C1.8921 15.6838 3.07738 16.8436 4.5755 16.966C5.9136 17.0754 7.81674 17.1875 10 17.1875C12.1835 17.1875 14.0868 17.0754 15.4249 16.966C16.9228 16.8436 18.108 15.6841 18.2438 14.1807C18.3435 13.077 18.4375 11.6105 18.4375 10C18.4375 8.38948 18.3435 6.92296 18.2438 5.81931C18.108 4.31588 16.9228 3.15645 15.4249 3.03398C14.0868 2.92458 12.1835 2.8125 10 2.8125ZM12.1876 10.722C12.7431 10.4013 12.7431 9.59941 12.1876 9.27866L9.06133 7.47373C8.50577 7.15298 7.81133 7.55392 7.81133 8.19542V11.8053C7.81133 12.4468 8.50577 12.8477 9.06133 12.527L12.1876 10.722Z" fill="#9499A0"/></svg>`
let likeIcon = `<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"></path></svg>`
let coinIcon = `<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="icon" style="fill:;"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z"></path></svg>`

function bilibili(args) {
  const id = args[0].replace(/.*video\/(.*)\/?.*/, '$1')
  const time = args[1]
  const hidden_desc = args[2]
  return `
  <a href="https://www.bilibili.com/video/${id}/" class="bilibili_box" id="${id}"></a>

  <script>
    bilibili()
    function bilibili() {
      let dom = document.getElementById('${id}')
      fetch('https://selv.es/api/bilibili/?id=${id}').then(res=>res.json()).then(data=>{
        dom.innerHTML = \`
        <div class="bilibili_cover">
          <img src="https://s1.hdslb.com/bfs/static/player/img/play.svg" class="play_icon no-lazyload">
          <img src="\${data.pic + '&h=300'}" class="no-lazyload">
          ${time ? `<span>${time}</span>` : ''}
        </div>
        <div class="bilibili_info">
          <div class="title">\${data.title}</div>
          ${hidden_desc == 'true' ? '' : '<div class="desc">\${data.desc}</div>'}
          <div class="stat">
            <span>${playIcon}\${data.view}</span>
            <span>${likeIcon}\${data.like}</span>
            <span>${coinIcon}\${data.coin}</span>
          </div>
          <div class="owner">
            <span class="tip">视频</span>
            <img src="\${data.face + '&h=300'}" class="no-lazyload">
            <span>\${data.owner}</span>
          </div>
        </div>
        \`
      })
    }
  </script>
  `
}

hexo.extend.tag.register('bilibili', bilibili, { ends: false })

2.在[blogroot]\themes\butterfly\source\css_tags下新建文件bilbili.styl并粘贴如下代码：

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
.bilibili_box
  display: flex
  background: var(--card-bg)
  border: 1px solid #e0e3ed
  border-radius: 10px
  overflow: hidden
  color: var(--font-color) !important
  text-decoration: none !important
  transition: .3s
  &:hover
    border-color: #4976f5
  +maxWidth768()
    flex-direction: column
  .bilibili_cover
    width: 234px
    position relative
    +maxWidth768()
      width: 100%
    img
      width: 100%
      filter: none
      margin: 0 !important
      border-radius: 0 !important
    .play_icon
      position: absolute
      width 45px
      height 45px
      opacity .8
      top: 50%
      left 50%
      transform: translate(-50%,-50%)
    span 
      position: absolute
      bottom: 0px
      right: 5px
      color: white
      text-shadow: 0 1px 3px #7a7a7a
  .bilibili_info
    padding: 10px 10px 10px 18px
    line-height: 1
    width: calc(100% - 200px)
    display: flex
    flex-direction: column
    justify-content: space-around
    +maxWidth768()
      width: 100%
      padding-bottom: 25px
      line-height: 1.5
    .title 
      font-size: 1.2rem
      font-weight: bold
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      line-height: 1.5
    .desc 
      font-size: 15px
      margin: 2px 0 4px
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      +maxWidth768()
        // word-break: break-all
        white-space: normal
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
    .stat 
      font-size: 15px
      svg
        margin-right: 3px
        font-size: 18px
        width: 1em
        height: 1em
        path
          fill: var(--font-color)
      span
        margin-right: 10px
        display: inline-flex
        align-items: center
    .owner 
      display: flex
      align-items: center
      line-height: 1
      font-size: 15px
      .tip
        color: #FF6699
        border: 1px solid
        padding: 3px 6px
        font-size: 12px
        border-radius: 5px
        margin-right: 10px
      img
        width 22px
        height: 22px
        border-radius: 50% !important
        object-fit: cover
        margin 0 5px 0 0 !important

[data-theme='light'] .bilibili_box .bilibili_info .stat svg,
[data-theme='dark'] .bilibili_cover
  opacity .8
  1. 如果你仔细对照，你会发现和原文章代码略有不同，这里我做了修改，如果你要自建api，这里提供我的php代码
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
<?php

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: https://blog.ug');

function handleRequest($req) {
  if ($req['method'] === 'GET') {
    if (isset($req['query']['id'])) {
      $id = $req['query']['id'];
      $data = file_get_contents('https://api.bilibili.com/x/web-interface/view?bvid=' . $id);
      $data = json_decode($data, true)['data'];
      $ls = array(
        'owner' => $data['owner']['name'],
        'face' => 'https://images.weserv.nl/?url=' . $data['owner']['face'],
        'title' => $data['title'],
        'desc' => $data['desc'],
        'pic' => 'https://images.weserv.nl/?url=' . $data['pic'],
        'coin' => $data['stat']['coin'],
        'danmaku' => $data['stat']['danmaku'],
        'favorite' => $data['stat']['favorite'],
        'like' => $data['stat']['like'],
        'reply' => $data['stat']['reply'],
        'share' => $data['stat']['share'],
        'view' => $data['stat']['view'],
      );
      if (isset($req['query']['t'])) {
        return $ls[$req['query']['t']];
      } else {
        return $ls;
      }
    } else {
      return 'Hello World!';
    }
  }
}

// Usage:
$req = array(
  'method' => 'GET',
  'query' => array(
    'id' => isset($_GET['id']) ? $_GET['id'] : null,
    't' => isset($_GET['t']) ? $_GET['t'] : null
  )
);
echo json_encode(handleRequest($req), JSON_UNESCAPED_UNICODE);

?>

自行参考，api实现中解决了一些跨域的问题，以下为使用示例：

{% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 %}

{% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 true %}

如果你要隐藏简介，添加true即可（注意，要隐藏简介则必须设置适配时间！）

格式形如:{% bilibili 视频链接 [视频时长 隐藏简介] %}

效果展示:

本人使用api为https://selv.es/api/bilibili/?id={bv号}

踩坑

1.如果你用的vercel，无法获取数据，那么恭喜你，你被墙了，具体参考我引用的文章即可

2.如果你发现封面图片无法正常加载，打开源代码发现被lazyload，方法 ：禁用butterfly懒加载，启动hexo自带懒加载

3.如果你直接抄我引用的文章的源代码，你会发现作者头像无法显示，你需要将

1
<img src="\${data.face + '&h=100'}" class="no-lazyload">

改为

1
<img src="\${data.face + '&h=300'}" class="no-lazyload">

*悬浮窗

基本引入

目前已引入，见我

这里就不放出详细过程了，感兴趣的自己参考原文章

tag自定义(原创)

我简单的写了一个tag，在/…/scripts/tag中新建一个box.js，然后填入以下代码(具体请自行参考)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'use strict'
function box(args) {
    args = args.join(' ').split(',')
    let box_info = args[1]|| '啊~你还没有给我添加文本捏' 
    let box_button_icon = args[3]|| 'fa-solid fa-check'
    let box_button_text = args[4]|| '确认'
    let box_button_desc = args[5]|| '嘿嘿，被你发现啦~'
    let button_desc = args[0]|| '空空如也~~'
    let set_button = args[2] || null
    let info_button = Boolean(set_button)? `{icon: '${box_button_icon}',text: '${box_button_text}', desc: '${box_button_desc}', onclick: () => console.log('小彩蛋：三玖天下第一！(2024.2.17)~~被你发现啦') }` : null

    
  return `
    <div class="text-center">
    <a class="btn-beautify Button tag ${button_desc}" onclick="const notification=kms.pushInfo('${box_info}',${info_button});setTimeout(()=>{notification.close()},5000);" title="${button_desc}">
        <i class="check fa-fw fa-lg"></i>
        <span>${button_desc}</span>
    </a>
</div>

    `
}

hexo.extend.tag.register('box', box, { ends: false })

tag的使用

注意：内容不能有英文逗号，不然会出bug

1.语法：{% box 页面按钮标题,悬浮窗内容,是否显示按钮(不显示留空，若显示则为任意值),[悬浮框按钮icon,悬浮框按钮文本,悬浮框按钮提示词] %}

如不要按钮，则{% box 按钮标题,测试 %}

按钮标题

如果要按钮，则{% box 点我有惊喜,我是不是很优秀,true,fa-solid fa-check,当然,我果然很棒捏~ %}

点我有惊喜

以下为默认值{% box 空空如也~~,啊~你还没有给我添加文本捏,(null),[fa-solid fa-check,确认,嘿嘿，被你发现啦~] %}可由{% box ,,true %}获得等效作用

空空如也~~

注意默认文本已经默认不显示按钮了，为空，如果此处有填写，则按照方括号中默认文本继续(具体可参考代码)

这里有个彩蛋哦，自己看着代码尝试触发吧

评论弹幕弹窗

目前已引入，见我

这里就不放出详细过程了，感兴趣的自己参考原文章

作品推荐卡片

基本实现

目前已引入，见我

1.在 \themes\butterfly\scripts\tag 文件夹下面新建 card.js 并粘贴如下代码：

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
/**
 * card
 * {% card name,url,bg,star,text,icon,tag,w,h %}
 * {% card 标题,链接,背景,评分,评价,图标,标签,宽度,高度 %}
 */

'use strict'

// 分数转成星星
function tostar(num) {
    let tmp = ''
    for (let i = 0; i < Math.floor(num); i++) { tmp += '<i class="fa-solid fa-star"></i>' } // 整数部分加实心星星
    if (num - Math.floor(num) != 0) tmp += '<i class="fa-solid fa-star-half-alt"></i>' // 小数部分转成半星
    for (let i = 0; i < 5 - Math.ceil(num); i++) { tmp += '<i class="fa-regular fa-star"></i>' } // 不够5个补空心星星
    return tmp
}

function card(args) {
    args = args.join(' ').split(',')

    // 获取参数
    let name = (args[0] || '未知').trim()
    let url = (args[1] || '').trim()
    let bg = (args[2] ? `background-image: url(${args[2]});` : 'background-color: #333;').trim()
    let star = tostar(Number(args[3]) || 0)
    let text = (args[4] || '此作品博主暂未作出评价').trim()
    let icon = (args[5] || '').trim()
    let tag = (args[6] || '').trim()
    let w = args[7] || '200px'
    let h = args[8] || '275px'

    return `<div title="${name}" referrerPolicy="no-referrer" class="card_box" style="${bg} width:${w}; height:${h};">
    <div class="card_mask">
      <span>${text}</span>
      ${url?'<a href="'+url+'">查看详情</a>':''}
    </div>
    <div class="card_top">
      <i class="${icon}"></i>
      <span>${tag}</span>
    </div>
    <div class="card_content">
      <span>${name}</span>
      <div>${star}</div>
    </div>
  </div>`
}

hexo.extend.tag.register('card', card, { ends: false })

2.在 \themes\butterfly\source\css_tags 文件夹下面新建 card.styl 并粘贴如下代码：

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
.card_box
  display: flex
  justify-content: space-between
  flex-direction: column
  background-position: center
  background-size: cover
  border-radius: 12px
  position: relative
  overflow: hidden
  padding: 10px
  color: #fff !important
  margin: 10px auto
  &::after
    content: ''
    position: absolute
    height: 100%
    width: 100%
    left: 0
    top: 0
    background: rgba(0,0,0,0.1)
    transition: .5s
    z-index: 0
  &:hover
    .card_mask
      opacity: 1
      pointer-events: auto
  .card_top
    display: flex
    z-index: 1
    align-items: center
    justify-content: space-between
  .card_mask
    position: absolute
    pointer-events: none
    z-index: 2
    transition: .5s
    opacity: 0
    width: 100%
    height: 100%
    left: 0
    top: 0
    padding: 20px
    background: #333
    span
      display: block
      height: calc(100% - 40px)
      overflow: auto
    a
      text-align: center
      background: #fff
      color: #333 !important
      border-radius: 5px
      position: absolute
      width: calc(100% - 40px)
      bottom: 20px
      left: 20px
      &:hover
        text-decoration: none !important
        color: white !important
        background: #49b1f5

  .card_content
    z-index: 1
    span
      font-size: 18px
      font-weight: bold

[data-theme='dark']
  .card_box
    color: #ddd !important
    &::after
      background: rgba(0,0,0,0.4)

3.参数，注意：内容不能有英文逗号，不然会出bug

1
2
3
4
5
6
7
8
9
10
11
<!-- 使用js是为了高亮代码，不必在意 -->
<!-- 参数如下： -->
{% card 标题,链接,背景,评分,评价,图标,标签,宽度,高度 %}
<!-- 示例如下： -->
{% card 诡秘之主,https://book.qidian.com/info/1010868264/,https://bookcover.yuewen.com/qdbimg/349573/1010868264/300,4.5,第一次接触这种西方文学小说，刚开始感觉看不懂，断断续续看了很多次。后来越看越觉好看，每次看甚至都需要查“文档”,fa-solid fa-book-open,小说 %}
<!-- 你也可以什么都不填，将会全部使用默认值，如下： -->
{% card %}
<!-- 你也可以省略部分内容，如下： -->
{% card 诡秘之主,https://book.qidian.com/info/1010868264/,https://bookcover.yuewen.com/qdbimg/349573/1010868264/300 %}
<!-- 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下： -->
{% card 诡秘之主,,,,,fa-solid fa-book-open,小说 %}

以下是具体参数与默认值：

1.标题：作品的名字————未知
2.链接：作品的详情页，填写后会显示查看详情按钮————无
3.背景：背景 图片Url（必须是图片，想要实现颜色可自行更改代码）————纯色#333
4.评分：范围 0-5，可以是小数，如3.5和3.1表示三星半，图标只有半星的）————0
5.评价：点评内容————此作品博主暂未作出评价
6.图标：左上角图标，请填写fontawsome图标————无
7.标签：右上角标签————无
8.宽度：卡片宽度，需要填单位，如：100px 或 10rem————220px
9.高度：卡片高度，要求同上————300px

如果是填写图标的话 fa-solid fa-clapperboard 用于番剧，fa-solid fa-book-open 用于图书

以下为效果展示

这部番极度逆天，看的我大脑萎缩，但是力推，以无厘头生草著称，是一部重磅级优秀的后宫搞笑恋爱番 查看详情
番剧
超超超超超喜欢你的100个女朋友

踩坑

部分同学设置图片后发现一片空白，但原网址正常，且控制台报403错误的，这种就是防盗链问题，我这里提供2 种方法

1.在_config.butterfly.yml的inject中head里，添加

1
- <meta name="referrer" content="no-referrer" />

具体原因可自行查找，防盗链本质是api厂商正常保证自己的服务器不被刷流量，那我们就屏蔽请求头来源站点即可，但亲测无效，估计是我的问题，方法是正确的

2.直接用https://images.weserv.nl/?url= + 图片地址即可，最方便，事实上如果你仔细观察前文中bilibili卡片图片代码，你会发现那里也用本方法做了防盗链处理

右键菜单

目前已引入，见我

这里就不放出详细过程了，感兴趣的自己参考原文章