前言

学习来自Ldyer，原文链接：

https://blog.ldyer.top/2024/04/24/微博热搜板块/index.html

有部分有问题的做了修改，也有部分不太符合主题的做了颜色修改。

效果图

效果

配置方法

创建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>

创建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
101
102
/* 设置从左到右的渐变背景色 */
#weibo.card-widget{
  background: linear-gradient(to right, #4B0082, #000000) !important;
    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: 250px; /* 容器高度固定为250px */
    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: auto; /* 最大宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto
}

.weibo-num {
    float: right;
    white-space: nowrap;
}

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

#weibo-container a {
    color: #fff; /* 链接文字颜色 */
}

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

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

创建weibo.js文件

创建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 === 200) {
            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
    },
    });
  }

引入weibo.css与weibo.js

和前面一图流方式一样，在themes/butterfly/_config.yml中添加

1
2
3
4
5
6
7
8
9
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">
    # weibo
    - <link rel="stylesheet" href="/css/weibo.css">
  bottom:
    # weibo
    - <script src="/js/weibo.js"></script>
    # - <script src="xxxx"></script>

加入卡片

1
2
3
4
5
aside:
..........
    card_webinfo:
        enable: true
        post_count: true

调整侧边栏顺序

调整sort_order大小即可，数字越大越前，要把公告后的卡片都加上数字（有的资料说是越小越前，但是我测试不是，反正能用就行）