前言

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

  • 2021-09-07 新浪微博热搜增加“音”、“影”、“剧”、“综”等标签，教程同步增加相应的 css 样式。
  • 2021-09-28 由于微博热搜改为了异步加载，旧的爬取方法暂时不能用了，可以去 GitHub 更新代码，也可以参考 Python 代码，可以使用其他方法（可能会出现跨域）请求 微博热搜数据。
  • 2023-03-20 文章 weibo-top-api.vercel.app 地址已失效，vercel 需要绑定域名使用，可以改成 weibo.eurkon.com，尽量自己新建 Vercel。

Butterfly 微博热搜侧边栏

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://npm.elemecdn.com/jquery@latest/dist/jquery.min.js
    main: /js/main.js
    utils: /js/utils.js
+   card_weibo: https://npm.elemecdn.com/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