Butterfly主题侧边小组件——土味情话

具体效果如下：

效果预览

土味情话

魔改教程

新建[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);
      });
  }
}

新建[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"))
.js-pjax
  script.
    cheesy_pick_up_lines()

修改[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})

新建[BlogRoot]\themes\butterfly\source\css\custom\cheesy_pick-up_lines.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;
}