前言：
逛了逛Eurkon的博客，看着那微博热搜侧边栏突然灵机一动，本想整一个随机笑话侧边小组件，奈何找免费 API 时先看到了土味情话，不错，很符合我的胃口，于是有了以下教程

预览效果

教程

新建<BlogRoot>\themes\butterfly\source\js\custom\cheesy_pick-up_lines.js

function cheesy_pick_up_lines() {
  let html = "";
  for (let i = 0; i < 3; i++) {
    fetch("https://api.vvhan.com/api/love")
      .then((data) => data.text())
      .then((data) => {
        html += "<li>" + data + "</li>";
        document.querySelector("#cheesy_pick-up_lines-container").innerHTML =
          html;
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}

cheesy_pick_up_lines();

新建<BlogRoot>\themes\butterfly\layout\includes\widget\card_cheesy_pick-up_lines.pug

.card-widget.card-cheesy_pick-up_lines
  .card-content
    .item-headline
      i.fas.fa-heart(style="color:pink")
      span= _p('土味情话')
    #cheesy_pick-up_lines-container
script(data-pjax src=("/js/custom/cheesy_pick-up_lines.js"))

修改<BlogRoot>\themes\butterfly\layout\includes\widget\index.pug，在第 16 行左右

      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
+       !=partial('includes/widget/card_cheesy_pick-up_lines', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})

在<Custom>.css里添加以下代码

#cheesy_pick-up_lines-container li {
  list-style-type: none;
  position: relative;
  padding-left: 26px;
}
#cheesy_pick-up_lines-container li:before {
  top: 8px;
  left: 2px;
  padding: 5px;
  border: 3px solid pink;
  border-radius: 10px;
  content: "";
  position: absolute;
}