前言

本文教程主要针对 Hexo Butterfly 主题博客,使用 Vercel API 爬取微博热搜,具体效果可以查看本站侧边栏微博热搜板块。

  • 2021-09-07 新浪微博热搜增加“”、“”、“”、“”等标签,教程同步增加相应的 css 样式。
  • 2021-09-28 由于微博热搜改为了异步加载,旧的爬取方法暂时不能用了,可以去 GitHub 更新代码,也可以参考 Python 代码直接用 JS 请求微博热搜数据。

card_weibo.js

可以使用博主的 card_weibo.js 地址,或者自己创建 card_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
fetch('https://weibo-top-api.vercel.app/api').then(data => data.json()).then(data => {
let html = '<style>.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-container{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}#weibo-container::-webkit-scrollbar{display:none}.weibo-list-item{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:nowrap}.weibo-title{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}</style>'
html += '<div class="weibo-list">'
let hotness = {
'爆': 'weibo-boom',
'热': 'weibo-hot',
'沸': 'weibo-boil',
'新': 'weibo-new',
'荐': 'weibo-recommend',
'音': 'weibo-jyzy',
'影': 'weibo-jyzy',
'剧': 'weibo-jyzy',
'综': 'weibo-jyzy'
}
for (let item of data) {
html += '<div class="weibo-list-item"><div class="weibo-hotness ' + hotness[(item.hot || '荐')] + '">' + (item.hot || '荐') + '</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.num + '</span></div></div>'
}
html += '</div>'
document.getElementById('weibo-container').innerHTML = html
}).catch(function (error) {
console.log(error);
});

_config.butterfly

[Blogroot]\_config.butterfly.yml 的侧边栏配置项和 CDN 配置项增加以下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  # aside (側邊欄)
# --------------------------------------
aside:
enable: true
...
+ card_weibo:
+ enable: true

# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
# main
main_css: /css/index.css
jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
main: /js/main.js
utils: /js/utils.js
+ card_weibo: https://cdn.jsdelivr.net/gh/Eurkon/CDN/hexo/js/card_weibo.js # 或者填写自己的 js 地址

card_weibo.pug

[Blogroot]\themes\butterfly\layout\includes\widget 目录下创建 card_weibo.pug 文件,添加以下内容。

1
2
3
4
5
6
7
8
if theme.aside.card_weibo.enable
.card-widget.card-weibo
.card-content
.item-headline
i.fab.fa-weibo
span= _p('微博热搜')
#weibo-container(style="width: 100%; height: 150px;font-size: 95%;")
script(defer data-pjax src=url_for(theme.CDN.card_weibo))

index.pug

[Blogroot]\themes\butterfly\layout\includes\widget\index.pug 文件中增加以下内容。

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
  #aside-content.aside-content
//- post
if is_post()
if showToc && theme.toc.style_simple
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
.sticky_layout
if showToc
include ./card_post_toc.pug
+ !=partial('includes/widget/card_weibo', {}, {cache: true})
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
else
//- page
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
.sticky_layout
+ !=partial('includes/widget/card_weibo', {}, {cache: true})
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
!=partial('includes/widget/card_newest_comment', {}, {cache: true})
!=partial('includes/widget/card_categories', {}, {cache: true})
!=partial('includes/widget/card_tags', {}, {cache: true})
!=partial('includes/widget/card_archives', {}, {cache: true})
!=partial('includes/widget/card_webinfo', {}, {cache: true})
!=partial('includes/widget/card_self', {}, {cache: true})

自建 Vercel API(可选)

虽然 Vercel 的访问应当没有次数限制,但是不排除存在因访问次数过多而限流等限制。所以还是建议各位自建 API。使用 Vercel 部署,完全免费。且无需服务器。

部署完成后将获取到的默认域名替换 card_weibo.js 中的 weibo-top-api.vercel.app,如:

1
2
- fetch('https://weibo-top-api.vercel.app/api').then(data => data.json()).then(data => {
+ fetch('https://域名/api').then(data => data.json()).then(data => {

Hexo 三连

执行 Hexo 三连

1
hexo clean && hexo g && hexo s