更新

8-23:更新友链个数显示

前言

最近看到其他博客花里胡哨的友链,也想把自己的弄一下,效果可以参考:友情链接
尝试了好几种版本,最后定了这种,可以根据自身需求进行修改。(弄样式实在是太费时间了,害。)
js和css文件创建和引入问题看这篇文章:Hexo博客添加自定义css和js文件

修改源码


新增:如果你想要给友链添加一个个数统计,可以这样改:
修改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;
}

/* 去掉原来自带的before */
#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"