2023-09-17更新内容：支持添加URL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 # collect.pug 文件 listResult += ` - <div title="${j.name}" referrerPolicy="no-referrer" class="collect_box" style="${j.img?`background-image: url(${j.img})`:'background-color: #333;'}"> + <${j.url ? "a href='" + j.url + "'" : "div"} title="${j.name}" referrerPolicy="no-referrer" class="collect_box" style="${j.img?`background-image: url(${j.img})`:'background-color: #333;'}"> <div class="collect_top"> <i class="${j.icon?j.icon:'fa-solid fa-film'}"></i> <span>${j.tip?j.tip:'电影'}</span> </div> <div class="collect_content"> <span>${j.name?j.name:'未知'}</span> <div>${j.score?toStar(j.score):toStar(0)}</div> </div> - </div> + </${j.url?"a":"div"}> ` # collect.styl 文件 +a.collect_box + color: white !important + text-decoration: none !important
前言 趁着有空想丰富一下藏宝阁的内容，但是当我打开md文件看到成堆的标签外挂后内心突然一紧——代码没有高亮且全部都凑在一起，心脏骤停。。。也不知道我之前怎么受得了的。藏宝阁 作品推荐卡片—标签外挂 ，删减了一些个人感觉没必要的东西。
本文与标签外挂卡片相互独立，毫无关系。并不需要先添加标签外挂。
教程 修改page.pug 在[blogRoot]\themes\butterfly\layout\page.pug中添加如下代码：
高亮部分是需要添加的代码，记得删除加号，不需要补空格。
1 2 3 4 5 6 7 8 9 10 when 'tags' include includes/page/tags.pug when 'link' include includes/page/flink.pug when 'categories' include includes/page/categories.pug +when 'collect' + include includes/page/collect.pug default include includes/page/default-page.pug
新建collect.pug 在[blogRoot]\themes\butterfly\layout\includes\page下新建collect.pug文件并粘贴如下代码：
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 #article-container .collect - let collectPageContent = page.content if site.data.collect - let result = "" each i in site.data.collect - let className = i.class_name ? `<h2 ${i.class_desc?'':'style="margin-bottom:12px"'}>${i.class_name} (${i.link_list.length})</h2>` : "" - let classDesc = i.class_desc ? `<div class="collect-desc">${i.class_desc}</div>` : "" - let listResult = "" each j in i.link_list - listResult += ` <${j.url ? "a href='" + j.url + "'" : "div"} title="${j.name}" referrerPolicy="no-referrer" class="collect_box" style="${j.img?`background-image: url(${j.img})`:'background-color: #333;'}"> <div class="collect_top"> <i class="${j.icon?j.icon:'fa-solid fa-film'}"></i> <span>${j.tip?j.tip:'电影'}</span> </div> <div class="collect_content"> <span>${j.name?j.name:'未知'}</span> <div>${j.score?toStar(j.score):toStar(0)}</div> </div> </${j.url?"a":"div"}> ` - - result += `${className}${classDesc} <div class="collect-list">${listResult}</div>` - collectPageContent = collectPageContent + result != collectPageContent
新建collect.styl 在[blogRoot]\themes\butterfly\source\css\_page下新建collect.styl文件并粘贴如下代码：
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 .collect h2 margin-bottom : 0 .collect-desc margin-bottom : 10px .collect-list display : flex gap : 18px flex-wrap : wrap a .collect_box color : white !important text-decoration : none !important .collect_box --w : calc (100% / 6 - 15px ) width : var (--w) display : flex justify-content : space-between flex-direction : column background-position : center background-size : cover border-radius : 12px position : relative overflow : hidden padding : 10px color : #fff transition : .5s &::after content : '' position : absolute height : 100% width : 100% left : 0 top : 0 background : rgba (0 ,0 ,0 ,0.3 ) z-index : 0 transition : .5s &:hover transform : translateY (-10px ) &::after background : rgba (0 ,0 ,0 ,0.1 ) .collect_top display : flex z-index : 1 align-items : center justify-content : space-between .collect_content z-index : 1 margin-top : 86% span display : block font-size : 18px font-weight : bold white-space : nowrap overflow : hidden text-overflow : ellipsis [data-theme='dark' ] .collect .collect-list .collect_box color : #ddd !important &:hover transform : translateY (-10px ) &::after background : rgba (0 ,0 ,0 ,0.2 ) &::after background : rgba (0 ,0 ,0 ,0.5 ) .collect .collect-list @media screen and (max-width : 1100px ) gap: 15px .collect_box --w: calc(20% - 12px ) @media screen and (max-width : 900px ) gap: 16px .collect_box --w: calc(25% - 12px ) @media screen and (max-width : 768px ) gap: 15px .collect_box --w: calc(100% / 3 - 10px ) @media screen and (max-width : 500px ) gap: 16px .collect_box --w: calc(50% - 8px )
增加辅助函数 在[blogRoot]themes\butterfly\scripts\helpers\page.js的合适位置粘贴如下代码：
1 2 3 4 5 6 7 8 hexo.extend .helper .register ('toStar' , function (num ) { let tmp = '' for (let i = 0 ; i < Math .floor (num); i++) { tmp += '<i class="fa-solid fa-star"></i>' } if (num - Math .floor (num) != 0 ) tmp += '<i class="fa-solid fa-star-half-alt"></i>' for (let i = 0 ; i < 5 - Math .ceil (num); i++) { tmp += '<i class="fa-regular fa-star"></i>' } return tmp })
新建collect.yml 在[blogRoot]\source\_data下面新建collect.yml，弄过友链的应该都很熟悉。
1 2 3 4 5 6 7 8 9 - class_name: 📺 电影 class_desc: link_list: - name: 让子弹飞 img: https://t1.szrtcpa.com/upload/vod/20220313-27/fa8e1f40e62df7aa609cba34f5ee8a25.jpg score: 5 icon: fa-solid fa-film tip: 电影 url:
小工具 我之前使用标签外挂添加的也有几十条，本来想着也不算多一个个挪得了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 let str = ` {% card 永劫无间,https://www.yjwujian.cn/,https://img2.doubanio.com/lpic/s34259482.jpg,4,游戏是个好游戏，运营团队就另说了。,fa-solid fa-gamepad,端游 %} {% card 暖雪手游,https://game.bilibili.com/warmsnowapp/,https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgameplus-platform.cdn.bcebos.com%2Fgameplus-platform%2Fupload%2Ffile%2Fsource%2F39e6c800f1004662d0580f4101044505.jpeg&app=2000&size=f260,5,很好玩的单机手游，前两章免费后面收费。,fa-solid fa-gamepad,手游 %} ` let ls = str.match (/{%.*%}/g ).map (i =>replace (/{%\s*card(.*)\s*%}/g , '$1' )), text = '' ls.forEach (i => let tmp = i.split (',' ) text += ` - name: ${tmp[0 ].trim()} img: ${tmp[2 ].trim()} score: ${tmp[3 ].trim()} icon: ${tmp[5 ].trim()} tip: ${tmp[6 ].trim()} ` }) console .log (text);
新建demo.js并粘贴如上代码，将之前的标签外挂代码粘贴到str变量中，然后运行 node .\demo.js 即可在终端得到数据。复制粘贴到yml文件就行（图省事写的比较简单）
就像这样：
