前言

今天来介绍首页侧边栏卡片微博热搜板块的添加，可以实时跟踪当前微博热搜内容，还可以下滑关注更多热搜话题，作为美化侧边栏卡片的不二之选
内容参考：

花猪

https://cnhuazhu.top/butterfly/

效果如下：

图1

欢迎阅读第4篇博客，希望你有所收获！

代码实操

  1. 在\themes\butterfly\layout\includes\widget目录下新建card_weibo.pug文件，并写入如下代码：
if theme.aside.card_weibo.enable
  .card-widget.card-weibo
    .card-content
      .item-headline
        i.fab.fa-weibo
        span 微博热搜
      #weibo-container
        .weibo-list
  1. 在\themes\butterfly\layout\includes\widget\index.pug文件中page项添加如下代码：
!=partial('includes/widget/card_weibo', {}, {cache: true})

图2
3. 在\themes\butterfly\source\js目录下新建weibo.js文件，并写入如下代码：

fetch('https://wb.bore.vip/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.yml的bottom处引入该文件：

inject:
  bottom:
    - <script src="/js/weibo.js"></script>
  1. 在\themes\butterfly\source\css目录下新建weibo.css文件，并写入如下代码：
#weibo-container{
  width: 100%; 
  height: 150px;
  font-size: 95%;
}

.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
}

并在主题配置文件_config.butterfly.yml的head处引入该文件：

inject:
  head:
    - <link rel="stylesheet" href="/css/weibo.css">
  1. 在主题配置文件_config.butterfly.yml的aside处添加如下配置：
aside:
    card_weibo:
    enable: true
    sort_order: # Don't modify the setting unless you know how it works
  1. 重新部署，即可看到效果
hexo clean
hexo g
hexo d