Butterfly博客微博热搜侧边栏教程(无需自建API版)

前言

众所周知，关于Butterfly博客的微博热搜侧边栏教程已经有例如Eurkon、Leonus等诸多大佬早些时间就发布过，由于跨域原因，weibo.js内容需要接入api，但是因为一些不可抗力因素，Vercel总是经常炸，国内的阿里云、腾讯云等部署起来又相对麻烦，因此我们直接利用https://api.aa1.cn/ 收录的，由 小小大佬发布的微博热搜API。
使用他的API，对我们来说省事方便，又较为稳定，但同时由于API返回的数据结构与上面几位大佬教程中的不同，因此本文章在此进行修改，使之适应新的API，实现微博热搜侧边栏的效果。

1.创建widget.yml文件

准备工作与上述几位大佬相同，首先创建/source/_data/widget.yml文件，在文件中加入以下代码:

1
2
3
4
5
6
7
# 这里填top表示所有地方都显示，bottom表示只在非文章页面显示，如主页等等
bottom:
  - class_name:
    id_name: weibo
    name: 微博热搜
    icon: fa-brands fa-weibo
    html: <link rel="stylesheet" href="/css/weibo.css"><div id="weiboContent"></script>

2.创建weibo.css文件

创建/themes/butterfly/source/css/weibo.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
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
/* 这是我的卡片css样式，你们可以参考下 */
#weibo.card-widget{
  background: linear-gradient(to right, #ff5f6d, #ffc371);
    border-radius: 10px;
    color: white;
    border-width: 10px;
  }

.weibo-new {
    background: #ff3852
}

.weibo-hot {
    background: #ff9406
}

.weibo-jyzy {
    background: #ffc000
}

.weibo-recommend {
    background: #00b7ee
}

.weibo-adrecommend {
    background: #febd22
}

.weibo-friend {
    background: #8fc21e
}

.weibo-boom {
    background: #bd0000
}

.weibo-topic {
    background: #ff6f49
}

.weibo-topic-ad {
    background: #4dadff
}

.weibo-boil {
    background: #f86400
}

#weibo .item-content {
    text-align: center;
}

#weibo-container {
    width: 100%;
    height: 140px;
    font-size: 95%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.weibo-list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap
}

.weibo-title {
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto
}

.weibo-num {
    float: right
}

.weibo-hotness {
    display: inline-block;
    padding: 0 6px;
    transform: scale(.8) translateX(-3px);
    color: #fff;
    border-radius: 8px
}

#weibo-container a {
    color: #555;
}

[data-theme='dark'] #weibo-container a {
    color: rgba(255, 255, 255, 0.7);
}

/* 隐藏滚动条 */
#weibo-container::-webkit-scrollbar{
    display: none;
}

3.创建weibo.js文件

这也是与上位几个大佬的不同之处，这串代码适应了新API传递的json格式
创建/themes/butterfly/source/js/weibo.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
49
50
51
52
53
54
55
56
// 如果你开启了在手机端显示侧边栏，可以将下面这行代码注释，开启下面的weibo();
try { if (document.getElementById('weibo').clientWidth) weibo(); } catch (error) {}
// weibo();

function weibo() {
    let hotness = {
        '1': 'weibo-boom',
        '2': 'weibo-hot',
        '3': 'weibo-boil',
        '4': 'weibo-new',
        '5': 'weibo-recommend',
        '6': 'weibo-jyzy',
        '7': 'weibo-jyzy',
        '8': 'weibo-jyzy'
    }
    let html = '<div id="weibo-container">'
    let data = JSON.parse(localStorage.getItem('weibo'));
    let nowTime = Date.now();
    let ls;
    if (data == null || nowTime - data.time > 600000) { // 600000为缓存时间，即10分钟，避免频繁请求，加快本地访问速度。
        getData();
        return
    } else {
        ls = JSON.parse(data.ls)
    };
    for (let item of ls) {
        html += '<div class="weibo-list-item"><div class="weibo-hotness ' + hotness[item.index] + '">' + item.index + '</div>' +
            '<span class="weibo-title"><a title="' + item.title + '" href="' + item.url + '" target="_blank" rel="external nofollow noreferrer">' + item.title + '</a></span>' +
            '<div class="weibo-num"><span>' + item.hot + '</span></div></div>'
    }
    html += '</div>';
    document.getElementById('weiboContent').innerHTML = html;
}

function getData() {
    // 这里采用新的api，如果炸了，可以换其他的，但注意api接收的json样式
    fetch('https://v2.api-m.com/api/weibohot').then(data => data.json()).then(data => {
        if (data.code === 1) {
            data = { time: Date.now(), ls: JSON.stringify(data.data) }
            localStorage.setItem('weibo', JSON.stringify(data))
        } else {
            console.error('获取数据失败');
        }
    }).then(weibo);
}

if (document.querySelector('#bber-talk')) {
    var swiper = new swiper('.swiper-container', {
      direction: 'vertical', 
      loop: true,
      autoplay: {
      delay: 3000,
      pauseOnMouseEnter: true
    },
    });
  }

4.引入weibo.css与weibo.js

最后，在主题目录下的_config.yml文件中引入weibo.css与weibo.js

1
2
3
4
5
6
7
inject:
  head:
    # 其他内容
    - <link rel="stylesheet" href="/css/weibo.css">
  bottom:
    # 其他内容
    - <script src="/js/weibo.js"></script>

5.加入卡片

在主题目录下的_config.yml文件中加入代码:

1
2
3
4
5
6
# 其他内容
aside:
    #其他内容
    card_webinfo:
        enable: true
        post_count: true

随后重新部署博客，就可以看到热搜板块了，如有什么疑问或者建议，欢迎在评论区指出！