本博客已弃用此功能,在本站看不到效果,但教程依旧有效。
起因 本来我是想做一个友链检测的,弄了半天发现实在太麻烦了(能力不足),效果也不是很好,于是就放弃了。 不过发现添加一个小图标好像还挺不错的,于是我就稍微改了一下,变成了现在这个模样。参考:友情链接
教程 不会创建自定义js和css文件请先看这篇文章:Hexo博客添加自定义css和js文件
注意:部分代码中最前面
的加号代表增加,减号代表删除,是为了高亮代码的,粘贴代码之后记得删除。删除之后不需要再补上一个空格,这样会出bug。
改源码 我们需要稍微的修改一下源码,让我们的操作更方便。 在 butterfly\layout\includes\page\flink.pug
里,修改如下代码(第50行左右):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 each j in i.link_list - listResult += ` - <div class="flink-list-item"> + <div class="flink-list-item" title="${j.icon}"> <a href="${j.link}" style="color:${j.theme_color}" title="${j.name}" target="_blank"> <div class="flink-item-icon"> <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" /> </div> <div class="flink-item-name">${j.name}</div> <div class="flink-item-desc" title="${j.descr}">${j.descr}</div> </a> </div>` - - - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>` + - result += `${className}${classDesc} <div class="flink-list" title="${i.icons}">${listResult}</div>`
如果你是使用的外链方式,修改第25行左右的代码,代码内容基本相同,注意要把 i
改成 str[i]
,把j
改成 lists[j]
,例如把 j.icon
改成 lists[j].icon
加配置 找到友链页面(link.yml),在每一个 link_list
上面添加一个 icons
,如:
1 2 3 4 5 6 7 8 9 - class_name: 我的 + icons: "blue" link_list: - name: 我的主页 link: https://www.leonus.cn/ avatar: https://q1.qlogo.cn/g?b=qq&nk=553344777&s=5 descr: 进一寸有进一寸的欢喜 theme_color: "#447c7b" + icon: ""
从上面可以看到,如果你想给某个链接单独修改图标,只需要在其后面添加一个icon配置即可。灰常滴人性。
灵魂js 新建一个link.js,然后在link页面(不是link.yml)引入:
1 2 3 4 5 6 7 title: 友情链接 date: 2021-10-19 18:35:28 type: link aside: false + <script src="/js/link.js?v1"></script>
在link.js里面添加代码:
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 window .addEventListener ('DOMContentLoaded' , () => { let ls = document .querySelectorAll ('.flink-list' ) ls.forEach (i => { let li = i.children ; let title = i.title for (let j = 0 ; j < li.length ; j++) { if (li[j].title ) { addIcon (li[j], li[j].title ) } else { addIcon (li[j], title) } } }); }) function addIcon (a, n ) { let icon = '' if (n == 'blue' ) { icon = '<svg style="margin-left:5px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="is-badge icon"><path d="m512 268c0 17.9-4.3 34.5-12.9 49.7s-20.1 27.1-34.6 35.4c.4 2.7.6 6.9.6 12.6 0 27.1-9.1 50.1-27.1 69.1-18.1 19.1-39.9 28.6-65.4 28.6-11.4 0-22.3-2.1-32.6-6.3-8 16.4-19.5 29.6-34.6 39.7-15 10.2-31.5 15.2-49.4 15.2-18.3 0-34.9-4.9-49.7-14.9-14.9-9.9-26.3-23.2-34.3-40-10.3 4.2-21.1 6.3-32.6 6.3-25.5 0-47.4-9.5-65.7-28.6-18.3-19-27.4-42.1-27.4-69.1 0-3 .4-7.2 1.1-12.6-14.5-8.4-26-20.2-34.6-35.4-8.5-15.2-12.8-31.8-12.8-49.7 0-19 4.8-36.5 14.3-52.3s22.3-27.5 38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 0-27 9.1-50.1 27.4-69.1s40.2-28.6 65.7-28.6c11.4 0 22.3 2.1 32.6 6.3 8-16.4 19.5-29.6 34.6-39.7 15-10.1 31.5-15.2 49.4-15.2s34.4 5.1 49.4 15.1c15 10.1 26.6 23.3 34.6 39.7 10.3-4.2 21.1-6.3 32.6-6.3 25.5 0 47.3 9.5 65.4 28.6s27.1 42.1 27.1 69.1c0 12.6-1.9 24-5.7 34.3 16 7.6 28.8 19.3 38.3 35.1 9.5 15.9 14.3 33.4 14.3 52.4zm-266.9 77.1 105.7-158.3c2.7-4.2 3.5-8.8 2.6-13.7-1-4.9-3.5-8.8-7.7-11.4-4.2-2.7-8.8-3.6-13.7-2.9-5 .8-9 3.2-12 7.4l-93.1 140-42.9-42.8c-3.8-3.8-8.2-5.6-13.1-5.4-5 .2-9.3 2-13.1 5.4-3.4 3.4-5.1 7.7-5.1 12.9 0 5.1 1.7 9.4 5.1 12.9l58.9 58.9 2.9 2.3c3.4 2.3 6.9 3.4 10.3 3.4 6.7-.1 11.8-2.9 15.2-8.7z" fill="#1da1f2"></path></svg>' } else if (n == 'orange' ) { icon = '<svg style="margin-left:5px" t="1658027717181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25920" width="200" height="200"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="25921"></path><path d="M989.866667 512c0 263.918933-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667z" fill="#FF7744" p-id="25922"></path><path d="M787.114667 339.285333a51.2 51.2 0 0 1 0 72.362667l-307.2 307.2a51.2 51.2 0 0 1-72.362667 0l-170.666667-170.666667a51.2 51.2 0 0 1 72.362667-72.362666L443.733333 610.235733l271.018667-271.018666a51.2 51.2 0 0 1 72.362667 0z" fill="#FFFFFF" p-id="25923"></path></svg>' } else { icon = '<svg style="margin-left:5px" t="1658026978650" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33220" width="200" height="200"><path d="M161.408 120.576L512 42.666667l350.592 77.909333a42.666667 42.666667 0 0 1 33.408 41.642667v426.112a256 256 0 0 1-114.005333 212.992L512 981.333333l-269.994667-180.010666A256 256 0 0 1 128 588.373333V162.218667a42.666667 42.666667 0 0 1 33.408-41.642667zM554.666667 405.333333V279.893333a21.333333 21.333333 0 0 0-38.698667-12.373333l-150.528 210.773333a21.333333 21.333333 0 0 0 17.365333 33.706667H448a21.333333 21.333333 0 0 1 21.333333 21.333333v125.44a21.333333 21.333333 0 0 0 38.698667 12.373334l150.528-210.773334a21.333333 21.333333 0 0 0-17.365333-33.706666H576a21.333333 21.333333 0 0 1-21.333333-21.333334z" fill="#14D081" p-id="33221"></path></svg>' } let div = a.getElementsByClassName ('flink-item-name' )[0 ] div.innerHTML += icon }
css 有的网站可能已经设置过svg样式,添加就能用。有的没设置样式图标会非常大,只需要给添加一个样式即可。 如果有自定义css就直接使用,没有就创建一个,怎么创建开头已经说了。 像添加margin这种微调我建议直接在svg里面修改,如上面icon里面的style="margin-left:5px"
。
1 2 3 4 5 6 7 8 svg.icon { width : 1em ; height : 1em ; vertical-align : -.15em ; fill: currentColor; overflow : hidden; font-size : 20px ; }
修改图标 修改图标也很简单,只需要在阿里图标库https://www.iconfont.cn/ 找到喜欢的图标,复制svg代码粘贴即可。 你也可以多复制几个else实现更多的图标。
结束 到这里也就结束了,应该没有什么没说的了。 如果有什么问题的话可以留言。