具体效果如下：

魔改教程

1. 新建[BlogRoot]\themes\butterfly\source\js\custom\cheesy_pick-up_lines.js

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   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); }); } }

2. 新建[BlogRoot]\themes\butterfly\layout\includes\widget\card_cheesy_pick-up_lines.pug

   1 2 3 4 5 6 7 8 9 10

   .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()

3. 修改[BlogRoot]\themes\butterfly\layout\includes\widget\index.pug，在第 16 行左右

   1 2 3 4 5 6 7 8 9

   !=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})

4. 新建[BlogRoot]\themes\butterfly\source\css\custom\cheesy_pick-up_lines.css

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   #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; }

5. Hexo 三连即可看到效果

可能出现的问题

• 可能组件数据加载不出来，需要刷新页面。

参考链接

1. Butterfly 微博热搜侧边栏 | Eurkon
2. 超百个免费 api 接口，分享给你_Nonoas 的博客
3. 随机一句情话API接口 - 韩小韩API接口站