此教程和本站现在所使用的效果有区别。

更新

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

前言

最近看到其他博客花里胡哨的友链，也想把自己的弄一下，效果可以参考：友情链接。
尝试了好几种版本，最后定了这种，可以根据自身需求进行修改。（弄样式实在是太费时间了，害。）
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;
}

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