前言

有小伙伴这周问我友链页的顶部轮播图的制作细节，这得马上安排一波友链顶部的友链头像轮播图教程才行呀！

预览效果

效果如下：
友链头像轮播图

修改友链页代码

找到友链页面的代码文件 themes\butterfly\layout\includes\page\flink.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#article-container
  .flink
+    if site.data.link
+      .flink-card
+        .flink-card-title
+          .flink-card-title-small 友情链接
+          .flink-card-title-big 与各类技术博主共同进步
+        .flink-card-container
+          .flink-card-wrapper
+            if site.data.link
+              - let linkList = []
+              - site.data.link.map(function (list) { if (list.class_name != "友链认领检查") list.link_list.map(function (item) { linkList.push(item) }) })
+              - if (linkList.length % 2 !== 0) linkList.shift()
+              - let evenList = linkList.filter((x, index) => index % 2 === 0)
+              - let oddList = linkList.filter((x, index) => index % 2 === 1)
+              each item, index in evenList
+                .flink-icon-pair
+                  .flink-icon 
+                    a(href=url_for(evenList[index].link) target='_blank' title=evenList[index].name)
+                      img.no-lightbox(src=url_for(evenList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+                  .flink-icon 
+                    a(href=url_for(oddList[index].link) target='_blank' title=oddList[index].name)
+                      img.no-lightbox(src=url_for(oddList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+              each item, index in evenList
+                .flink-icon-pair
+                  .flink-icon 
+                    a(href=url_for(evenList[index].link) target='_blank' title=evenList[index].name)
+                      img.no-lightbox(src=url_for(evenList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+                  .flink-icon 
+                    a(href=url_for(oddList[index].link) target='_blank' title=oddList[index].name)
+                      img.no-lightbox(src=url_for(oddList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+        .flink-card-btn-group
+          .flink-card-btn.secondary
+            a(href="javascript:toRandomFlink();" title='随机访问')
+              i.fas.fa-random
+              span= _p('随机访问')
+          .flink-card-btn
+            a(href="javascript:shine.applyFlink();" title='申请友链')
+              i.fas.fa-plus-circle
+              span= _p('申请友链')

    - let pageContent = page.content
    if page.flink_url

上述代码只要删掉 + 加号，就是正常的缩进格式了。

添加随机访问功能

在上述的 themes\butterfly\layout\includes\page\flink.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//- 省略上面所有代码...
//- 在末尾添加如下代码
script.
  var flinks = [
    "https://blog.shineyu.cn/",
    "https://blog.leonus.cn/",
    "https://blog.slqwq.cn",
    "https://www.acozycotage.net/",
    "https://blog.xlenco.top/",
    "https://opeach.cn",
    "https://lengmo714.top",
    "https://262259.xyz/",
    "https://blog.marcus233.top/",
    "https://blog.wzwzx.cn",
    "https://yisous.xyz",
    "https://blog.moyuql.top",
    "https://lynxcatthethird-person.netlify.app/",
    "https://www.fomal.cc/",
    "https://blog.zhheo.com/",
    "https://akilar.top/",
    "https://noionion.top/",
    "https://kmar.top/",
    "https://blog.dreamfall.cn",
    "https://anzhiy.cn/",
    "https://gtcblog.js.cool",
    "https://blog.itciraos.cn",
    "https://www.chuckle.top",
    "https://blog.eurkon.com",
    "https://snow.js.org/",
    "https://blog.gmcj0816.top/",
    "https://www.yyyzyyyz.cn/",
    "https://dusays.com",
    "https://hulebaji.xyz",
    "https://www.lyshark.com",
    "https://zhangshier.vip",
    "https://blog.jayhrn.com",
    "https://blog.sunguoqi.com/",
    "https://blog.4t.pw/",
    "https://blog.lovelu.top",
    "https://www.crowhsu.top"
  ];
  function toRandomFlink() {
      window.open(flinks[Math.floor(Math.random() * flinks.length)])
  }

需要自行修改 flinks 数组中的url，随机访问就是从该数组中随机获取一个元素进行跳转访问。

添加申请友链功能

新建 source\js\shine.js 文件，在文件中添加如下功能函数，即可实现申请友链的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"use strict";

var shine = {
    applyFlink: function() {
        var input = document.getElementsByClassName('el-textarea__inner')[0];
        let evt = document.createEvent('HTMLEvents');
        evt.initEvent('input', true, true);
        input.value = '昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n描述：\n';
        input.dispatchEvent(evt);
        shine.scrollTo("#post-comment");
        input.focus();
        input.setSelectionRange(-1, -1);
    },
}

添加css样式

新建css样式文件，比如：在 source\css 中新建一个 flink_avatar_carousel.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
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
@keyframes rowup {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.flink-card {
  position: relative;
  margin-bottom: 20px;
  border-radius: 12px;
  border: var(--style-border);
  /* background-image: url(/img/flink_page.webp); */
  background-color: var(--heo-card-bg);;
  background-size: cover;
  -webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  box-shadow: 0 8px 16px -4px #2c2d300c;
}

.flink-card-title {
  margin-top: 2rem;
  margin-left: 2rem;
  display: flex;
  flex-direction: column;
}

.flink-card-title .flink-card-title-small {
  font-size: 12px;
  line-height: 1;
  color: var(--heo-secondtext);
  margin-top: 8px;
  margin-bottom: 0.5rem;
}

.flink-card-title .flink-card-title-big {
  font-size: 36px;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 8px;
}

.flink-card-btn-group a:hover {
  text-decoration: unset !important;
}

.flink-card-desc {
  font-size: 80%;
  opacity: .8
}

.flink-card-btn-group {
  position: absolute;
  top: 2.5rem;
  right: 2rem;
  display: flex
}

.flink-card-btn {
  height: 3em;
  padding: .5em .8em;
  margin-left: 1.5rem;
  border-radius: 12px;
  background: var(--font-color);
  /* background: rgba(125,125,125,.2); */
  backdrop-filter: var(--backdrop-filter);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

.flink-card-btn * {
  color: #F2F6FC;
  margin: .2em
}

.flink-card-btn:hover {
  background: #425AEF;
  -webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05)
}

.flink-card-btn:hover * {
  color: #fff
}

.flink-card-container {
  overflow: hidden;
  display: flex;
  padding-bottom: 2rem;
}

.flink-card-wrapper {
  display: flex;
  margin-top: 1.5rem;
  flex-wrap: nowrap;
  animation: rowup 120s linear infinite;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.flink-icon-pair {
  margin-left: 1rem
}

.flink-icon-pair .flink-icon:nth-child(even) {
  -webkit-transform: translate(-60px);
  -moz-transform: translate(-60px);
  -ms-transform: translate(-60px);
  -o-transform: translate(-60px);
  transform: translate(-60px);
  margin-top: 1rem;
}

.flink-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: .5rem 0;
  -webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05)
}

.flink-icon img {
  width: 120px;
  height: 120px;
  border-radius: 50%!important;
  margin: auto!important
}

#article-container .flink-list .flink-item-circle {
  color: #57bd6a;
  opacity: .8;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  z-index: 1;
  cursor: url(https://npm.elemecdn.com/eurkon-cdn/hexo/images/user/pointer.cur),pointer!important;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease
}

#article-container .flink-list .flink-item-circle:hover {
  color: #397d45;
}

@media screen and (max-width: 768px) {
  #article-container > div.flink > div.flink-card > div.flink-card-btn-group {
    margin-top: 20px;
    right: 2rem;
    top: unset !important;
    bottom: 20px;
  }

  .flink-card {
    padding: 0px 0px 80px 0px;
  }
}
animation: rowup 120s linear infinite; 属性可以调整头像轮播的速度，只需要将 120s 调成自己想要的速度即可，时间越小越快。

引入css样式和js脚本

修改 _config.butterfly.yml 主题配置文件，修改内容如下：

1
2
3
4
5
6
7
8
9
10
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css
+    - <link rel="stylesheet" href="/css/flink_avatar_carousel.css">  #添加的自定义css文件
  bottom:
    # 自定义js
+    - <script async data-pjax src="/js/shine.js"></script>  #添加的自定义js文件

Hexo三连

1
hexo clean && hexo g && hexo s