前言

微博热搜编写模块，效果如下：

基于Butterfly 4.2.2版本 以上

操作

  1. 在\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-deviantart
        span 微博热榜
      #weibo-container
        .weibo-list

由于Font Awesome并没有知乎的图标，这里随便找了一个。

  1. 在\themes\butterfly\layout\includes\widget\index.pug文件中page项添加如下代码：
1
!=partial('includes/widget/card_weibo', {}, {cache: true})
  1. 在\themes\butterfly\source\js目录下新建weibo.js文件，并写入如下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    fetch('https://wb.bore.vip/api').then(data=>data.json()).then((json)=>{
        let html = ''
        html += '<div class="weibo-list">'
        var i = 1 
        for (let item of json) {
            html += '<div class="weibo-list-item"><div class="weibo-hotness">' + i + '</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-hot"><span>' + item.hot + '</span></div></div>'
            i++
        }
        html += '</div>'
        document.getElementById('weibo-container').innerHTML = html
    }).catch(function(error) {
        console.log(error);
    });

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

1
2
3
inject:
  bottom:
    - <script src="/js/weibo.js"></script>
  1. 在\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
    #weibo-container{
      width: 100%; 
      height: 150px;
      font-size: 95%;
    }
    #weibo-container{
      overflow-y:auto;
      -ms-overflow-style:none;
      scrollbar-width:none
    }
    #weibo-container::-webkit-scrollbar{
      display:none
    }
    .weibo-list-item{
      display:flex;
      justify-content:space-between;
      flex-direction:row;
      flex-wrap:nowrap
    }
    .weibo-title{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      margin-right:auto
    }
    .weibo-hot{
      flex-shrink: 0;
    }
    .weibo-hotness{
      display:inline-block;
      padding:0 6px;
      transform:scale(.8) translateX(-3px);
      font-weight: bold;
      color:#fff;
      border-top: rgba(255, 255, 255, 0.87) 1px solid;
      border-left: rgba(255, 255, 255, 0.87) 1px solid;
      background: linear-gradient(to bottom right,#348AC7, #7474BF);
      border-radius:8px
    }

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

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/weibo.css">
  1. 在主题配置文件_config.butterfly.yml的aside处添加如下配置：
    1
    2
    3
    4
    aside:
      card_weibo:
        enable: true
        sort_order: # Don't modify the setting unless you know how it works

可以在配置文件中选择开启或关闭

  1. 重新部署，即可看到效果。