更新
前言 最近看到其他博客花里胡哨的友链,也想把自己的弄一下,效果可以参考:
友情链接 。 尝试了好几种版本,最后定了这种,可以根据自身需求进行修改。(弄样式实在是太费时间了,害。)js和css文件创建和引入问题看这篇文章:Hexo博客添加自定义css和js文件
注意:部分代码中最前面
的加号代表增加,减号代表删除,是为了高亮代码的,粘贴代码之后记得删除。删除之后不需要再补上一个空格,这样会出bug。
修改源码
新增:
如果你想要给友链添加一个个数统计,可以这样改: 修改butterfly\layout\includes\page\flink.pug
1 2 3 4 5 6 if site.data.link - let result = "" each i in site.data.link - - let className = i.class_name ? markdown(`## ${i.class_name}`) : "" + - let className = i.class_name ? markdown(`## ${i.class_name} (${i.link_list.length})`) : "" - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""
因为是根据用户自定义主题色,所以需要改一下源码,很简单,加个style属性就可以。
修改butterfly\layout\includes\page\flink.pug
的第54行 注意:我用的是_date里面放link.yml的方式,所以改的是第54行代码,如果使用的是flink_url
方式,请修改第24行代码。当然,你也可以两个都修改,两种方式代码稍有区别,别混用。
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 # 使用flink_url,修改的代码第24行 listResult += ` <div class="flink-list-item"> - <a href="${lists[j].link}" title="${lists[j].name}" target="_blank"> + <a href="${lists[j].link}" style="color:${lists[j].theme_color}" title="${lists[j].name}" target="_blank"> <div class="flink-item-icon"> <img class="no-lightbox" src="${lists[j].avatar}" onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt="${lists[j].name}" /> </div> <div class="flink-item-name">${lists[j].name}</div> <div class="flink-item-desc" title="${lists[j].descr}">${lists[j].descr}</div> </a> </div>` # 使用_data,修改的代码第54行 listResult += ` <div class="flink-list-item"> - <a href="${j.link}" title="${j.name}" target="_blank"> + <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>`
添加自定义css
在souce目录下新建css文件夹,然后新建style.css
(名字随便起),然后在主题配置文件里找到inject下的head引入文件:
1 2 3 4 inject: head: + - <link rel="stylesheet" href="/css/style.css?1"> bottom:
如果已经有自定义css文件的,直接使用就行
在css文件中添加如下代码
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 .flink-item-icon { margin-right : 0 !important ; transition : .5s !important ; } .flink-item-name ,.flink-item-desc { padding-left : 10px !important ; } #article-container .flink .flink-list >.flink-list-item ::before { content : none; } #article-container .flink .flink-list >.flink-list-item :hover { background-color : #61bcf2cc ; box-shadow : 0 0 20px rgba (0 , 0 , 0 , .3 ); } #article-container .flink .flink-list >.flink-list-item :hover a { color : white !important ; } #article-container .flink .flink-list >.flink-list-item :hover .flink-item-icon { width : 60px ; margin-left : -70px ; -webkit-transform : rotate (-180deg ); -moz-transform : rotate (-180deg ); -o-transform : rotate (-180deg ); -ms-transform : rotate (-180deg ); transform : rotate (-180deg ); }
友链添加theme_color属性 一切修改之后,我们只需要为每一个友链添加颜色就可以了。
1 2 3 4 5 name: Leonus's blog link: https://blog.leonus.cn/ avatar: https://q1.qlogo.cn/g?b=qq&nk=553344777&s=5 descr: 进一寸有进一寸的欢喜。 + theme_color: "#447c7bb3"