前言:

原来我是使用冰老师的前端方案,但是前天晚上我看见友链朋友圈的版本已经更新到4.0.0了,于是我进行了更新,回来发现冰老师的方案不能用了,还好店长Akilar的前端方案还留着,但是有些布局和配色,跟我的博客不太搭(另外移动端我还是希望能看到作者的信息,以免标题党);更新时间显示的不是北京时间;另外今天下午我发现按文章生成时间排序的功能好像失效了。然后大佬好像还没出新方案,那么我干脆一不做二不休,自己动手改了🤣

有什么错误欢迎各位大佬指出😀

【转载说明】本文优先发布于我的个人博客www.226yzy.com ,转载请注明出处并注明作者:星空下的YZY。

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0许可协议。

其他大佬的方案

由于我也不确定我改的会不会有什么bug

店长Akilar好像目前也还没出新方案(还是用大佬的方案更放心😂)

不过目前文档林木木大佬的前端方案已经完成适配,看各位喜欢哪种风格了

适配

注:css部分我用的是适配 butterfly 主题样式的

本文有关代码基于店长Akilar的前端方案

店长的有关代码如下:

https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/css/default.min.css

https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/js/fcircle.min.js

https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/js/fetch.min.js

没弄过店长Akilar的前端方案的,可以按大佬的原方案走一遍再来改😆

预览

参考之前还是先看看效果有没有问题或者合不合自己胃口

可以直接去我的友链朋友圈查看效果【我的友链朋友圈

移动端预览:

友链朋友圈移动端预览

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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
 @font-face {
font-family: 'SAOUI';
src: url("https://cdn.jsdelivr.net/npm/akilar-candyassets/fonts/SAOUI.ttf");
font-display: swap;
}
#fMessageBoard {
font-size: 20px;
background: rgba(249,249,249,0.8);
color: rgba(60,60,61,0.7);
border-radius: 5px;
font-weight: bolder;
box-shadow: 2px 2px 10px #888;
font-family: 'SAOUI' !important;
width: 90%;
max-width: 810px;
margin: auto;
height: 260px;
overflow: hidden;
}
#fMessageBoard .fUpdatedTime {
text-align: center;
height: 40px;
}
#fMessageBoard .fMessageItem {
background: rgba(207,207,207,0.8);
box-shadow: 0px 0px 15px #bcbcbc inset;
}
#fMessageBoard .fMessageItem .fItem {
height: 60px;
background: transparent;
display: flex;
}
#fMessageBoard .fMessageItem .fItem .fLabel {
padding: 0 3%;
align-self: center;
text-align: center;
width: 25%;
overflow: hidden;
}
#fMessageBoard .fMessageItem .fItem .fMeasureBar {
align-self: center;
text-align: center;
height: 20px;
width: 50%;
display: block;
background: rgba(117,117,117,0.6);
border-radius: 5px;
overflow: hidden;
display: block;
box-shadow: 2px 2px 5px rgba(21,21,21,0.6);
}
#fMessageBoard .fMessageItem .fItem .fMeasureBar .fMeasure {
display: block;
height: 20px;
text-align: center;
font-size: 12px;
}
#fMessageBoard .fMessageItem .fItem .fMessage {
align-self: center;
text-align: center;
padding: 0 3%;
width: 25%;
}
#fMessageBoard #switchRankBtn {
width: auto;
max-width: 250px;
height: 40px;
display: flex;
text-align: center;
margin: auto;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-around;
}
#fMessageBoard #switchRankBtn #rankByCreated {
font-size: 20px;
height: 30px;
width: 80px;
display: inline-block;
padding: 2px 5px;
}
#fMessageBoard #switchRankBtn #rankByUpdated {
font-size: 20px;
height: 30px;
width: 80px;
display: inline-block;
padding: 2px 5px;
}
#fMessageBoard #switchRankBtn input#switchRankMode[type=checkbox] {
display: none;
}
#fMessageBoard #switchRankBtn label#switchRank {
cursor: pointer;
text-indent: -9999px;
width: 40px;
height: 20px;
margin: 15px 0px;
background: #f39c39;
display: inline-block;
border-radius: 10px;
position: relative;
}
#fMessageBoard #switchRankBtn label#switchRank:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 8px;
transition: 0.3s;
}
#fMessageBoard #switchRankBtn label#switchRank:active:after {
width: 50px;
}
#fMessageBoard #switchRankBtn input#switchRankMode:checked + label {
background: #239eeb;
}
#fMessageBoard #switchRankBtn input#switchRankMode:checked + label:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
#fcircleMoreBtn {
width: 90%;
max-width: 810px;
height: 30px;
margin: auto;
background: rgba(249,249,249,0.8);
color: rgba(60,60,61,0.7);
box-shadow: 2px 2px 10px #888;
border-radius: 5px;
font-weight: bolder;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#fcircleContainer {
font-family: 'SAOUI' !important;
width: 100%;
max-width: 900px;
height: auto;
margin: auto;
}
#fcircleContainer a {
text-decoration: none;
}
#fcircleContainer a:hover {
text-decoration: none !important;
}
#fcircleContainer .fArticleItem {
margin: 20px 5%;
height: 150px;
display: flex;
background: rgba(249,249,249,0.8);
color: rgba(60,60,61,0.7);
border-radius: 5px;
font-weight: bolder;
box-shadow: 2px 2px 10px #888;
overflow: hidden;
}
#fcircleContainer .fArticleItem:hover {
color: rgba(0, 0, 0, 0.7);
transition: transform .3s;
webkit-transform: scale(1.3);
transform: scale(1.03)
}
#fcircleContainer .fArticleItem .fArticleAvatar {
width: 30%;
display: flex;
flex-direction: column;
}
#fcircleContainer .fArticleItem .fArticleAvatar .fAvatar {
align-self: center;
text-align: center;
height: 70%;
}

#fcircleContainer .fArticleItem .fArticleAvatar .fAvatar img {
width: 75px;
height: 75px;
margin: 15px 5px !important;
border-radius: 25px;
}
#fcircleContainer .fArticleItem .fArticleAvatar .fAvatar .img-alt.is-center {
display: none;
}
#fcircleContainer .fArticleItem .fArticleAvatar .fArticleAuthor {
width: 80%;
margin: 3px 0px;
align-self: center;
text-align: center;
transform: skewX(-10deg);
height: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#fcircleContainer .fArticleItem .fArticleMessage {
display: flex;
flex-direction: column;
width: 70%;
}
#fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle {
align-self: center;
text-align: center;
font-size: 20px;
line-height: 50px;
max-width: 80%;
padding: 0;
color: rgba(60,60,61,0.7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle:hover:before {
position: fixed;
width: fit-content;
max-width: 80%;
margin: auto;
left: 0;
right: 0;
top: 20%;
border-radius: 10px;
text-align: center;
z-index: 100;
content: attr(data-title);
font-size: 20px;
color: #fff;
padding: 10px;
background-color: rgba(60,60,61,0.7);
white-space: break-spaces;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime {
width: 100%;
height: 100px;
text-align: center;
display: flex;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime .fArticleCreated {
width: 40%;
margin: 5% 0% 5% 10%;
text-align: center;
align-self: center;
padding: 15px 0;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime .fArticleUpdated {
width: 40%;
margin: 5% 10% 5% 0%;
text-align: center;
align-self: center;
padding: 15px 0;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime i:before {
margin-right: 5px;
}
@media screen and (max-width: 768px) {
#fMessageBoard {
font-size: 16px;
}
}
@media screen and (max-width: 400px) {

#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime i {
display: none;
}
#fcircleContainer .fArticleItem .fArticleAvatar .fAvatar {
height: 70%;
}
#fMessageBoard {
font-size: 12px;
}
#fMessageBoard #switchRankBtn #rankByCreated {
font-size: 12px;
}
#fMessageBoard #switchRankBtn #rankByUpdated {
font-size: 12px;
}
#fcircleContainer .fArticleItem .fArticleAvatar {
/* display: none; */
}
#fcircleContainer .fArticleItem .fArticleAvatar .fArticleAuthor {
width: 100%;
}
#fcircleContainer .fArticleItem .fArticleMessage {
width: 70%;
}
#fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle:hover:before {
font-size: 16px;
}


#fcircleContainer .fArticleItem {
height: 125px;
}
#fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle {
line-height: 5;
width: 100%;
height: 80%;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime {
width: 100%;
height: 50px;
text-align: center;
display: flex;
}




}
@media screen and (max-width: 300px) {
#fMessageBoard .fUpdatedTime span.fLabel {
display: none;
}
#fMessageBoard .fMessageItem .fItem .fLabel {
width: 50%;
}
#fMessageBoard .fMessageItem .fItem meter.fMeasureBar {
display: none;
}
#fMessageBoard .fMessageItem .fItem .fMessage {
width: 50%;
}
#fMessageBoard span#rankByCreated {
display: none !important;
}
#fMessageBoard span#rankByUpdated {
display: none !important;
}



#fcircleContainer .fArticleItem .fArticleAvatar {
display: none;
}


#fcircleContainer .fArticleItem .fArticleMessage {
width: 100%;
}
}
[data-theme="dark"] #fMessageBoard {
background: rgba(21,21,21,0.7);
color: rgba(249,249,249,0.8);
box-shadow: 0px 0px 5px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fMessageBoard .fMessageItem {
background: rgba(21,21,21,0.7);
box-shadow: 0px 0px 5px rgba(222,221,174,0.5) inset;
}
[data-theme="dark"] #fMessageBoard #switchRankBtn input#switchRankMode[type=checkbox] {
display: none;
}
[data-theme="dark"] #fMessageBoard #switchRankBtn label#switchRank {
background: #f39c39;
}
[data-theme="dark"] #fMessageBoard #switchRankBtn label#switchRank:after {
background: rgba(21,21,21,0.7);
}
[data-theme="dark"] #fMessageBoard #switchRankBtn input#switchRankMode:checked + label {
background: #239eeb;
}
[data-theme="dark"] #fcircleMoreBtn {
background: rgba(21,21,21,0.7);
color: rgba(249,249,249,0.8);
box-shadow: 2px 2px 5px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fcircleMoreBtn:hover {
box-shadow: 0px 0px 2px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fcircleContainer .fArticleItem {
background: rgba(21,21,21,0.7);
color: rgba(249,249,249,0.8);
box-shadow: 2px 2px 5px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fcircleContainer .fArticleItem:hover {
box-shadow: 0px 0px 2px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle {
color: rgba(249,249,249,0.8);
}
[data-theme="dark"] #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle:hover:before {
color: rgba(60,60,61,0.7);
background-color: rgba(249,249,249,0.8);
}




.img-alt.is-center::before {content: "" !important;}
#article-container ul > li:not(.tab)::before {
top: unset !important;
width: unset !important;
height: unset !important;
border: unset !important;
border-radius: unset !important;
background: unset !important;
content: unset !important;
line-height: unset !important;
}
.social-share {
font-size: 0.85em !important;
}
.reward-item {
padding: 1rem .5rem 0 .5rem !important;
}
.post-reward .reward-main .reward-all {
display: inline-block;
margin: 0;
padding: 0 .5rem 1rem .5rem !important;
}
.post-reward .post-qr-code-desc {
margin-bottom: 0 !important;
}
.post-qr-code-img.entered.loaded {
display: unset !important;
margin: unset !important;
}
.wechat-qrcode .help p {
margin: unset !important;
}

JS

这里需要对fcircle.jsfetch.js两个文件进行修改

fcircle.js

主要改动描述:

  • 最近更新时间的提示时间改为北京时间【借鉴至冰老师的方案

  • 增添更新描述(可去掉)比如我的<span class="fLabel">【预计每半小时更新一次】</span>

代码:

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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
// ======================================================

// 打印友链基本信息
function loadStatistical(sdata) {
// 友链页面的挂载容器
var container = document.getElementById('fcircleContainer');
// 最近更新时间
var Last_updated_time = formatDate(sdata.last_updated_time);
// 基本信息的html结构
var messageBoard = `
<div id="fMessageBoard">
<div class="fUpdatedTime">
<span class="fLabel">最近更新时间:</span><span class="fMessage" style="color: #1E90FF">${Last_updated_time}</span><span class="fLabel">【预计每半小时更新一次】</span>
</div>
<div class="fMessageItem">
<div class="fActiveFriend fItem">
<span class="fLabel">活跃友链数</span>
<span class="fMeasureBar"><span class="fMeasure" style="width:${(sdata.active_num/sdata.friends_num * 100).toFixed(2)}%; background: rgba(0,191,255,0.8);">${(sdata.active_num/sdata.friends_num * 100).toFixed(2)}%</span></span>
<span class="fMessage">${sdata.active_num}/${sdata.friends_num}</span>
</div>
<div class="fErrorSite fItem">
<span class="fLabel">失联友链数</span>
<span class="fMeasureBar"><span class="fMeasure" style="width:${(sdata.error_num/sdata.friends_num * 100).toFixed(2)}%; background: rgba(193,205,205, 0.8);">${(sdata.error_num/sdata.friends_num * 100).toFixed(2)}%</span></span>
<span class="fMessage">${sdata.error_num}/${sdata.friends_num}</span>
</div>
<div class="fArticleNum fItem">
<span class="fLabel">当前库存</span>
<span class="fMeasureBar"><span class="fMeasure" style="width:${(sdata.article_num/Math.ceil(sdata.article_num / 100)).toFixed(2)}%; background: rgba(255,165,0, 0.8);">${(sdata.article_num/Math.ceil(sdata.article_num / 100)).toFixed(2)}%</span></span>
<span class="fMessage">${sdata.article_num}/${Math.ceil(Number( sdata.article_num) / 100) * 100}</span>
</div>
</div>
<div id="switchRankBtn">
<span id="rankByCreated">created</span>
<span>
<input type="checkbox" id="switchRankMode" checked="true" onchange="checkRankMode()"/><label for="switchRankMode" id="switchRank">Toggle</label>
</span>
<span id="rankByUpdated">updated</span>
</div>
</div>
`;
// 加载更多按钮
var loadMoreBtn = `
<div id="fcircleMoreBtn" onclick="loadMoreArticle()">
<i class="fas fa-angle-double-down"></i>
</div>
`

var hexobutterfly=`<div class="post-reward">
<div class="reward-button button--animated">
<i class="fas fa-qrcode"></i>打赏</div>
<div class="reward-main">
<ul class="reward-all">
<li class="reward-item">
<img class="post-qr-code-img entered loaded" src="/medias/reward/wechat.png" ></a>
<div class="post-qr-code-desc">微信</div></li>
<li class="reward-item">
<img class="post-qr-code-img entered loaded" src="/medias/reward/alipay.jpg" ></a>
<div class="post-qr-code-desc">支付宝</div></li>
</ul>
</div>
</div>
</div>`
loadMoreBtn+= hexobutterfly

// 原则上信息面板应该在最前面,所以用beforebegin表示从开始符前面插入
if (container) {
container.insertAdjacentHTML('beforebegin', messageBoard);
// 为了不影响文章加载,选择afterend表示从结束符后面插入
container.insertAdjacentHTML('afterend', loadMoreBtn);
}
}

// ======================================================
// 打印友链内容
function loadArticleItem(datalist, start, end) {
var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
// 声明友链页面的挂载容器
var container = document.getElementById('fcircleContainer');
// 循环读取输出友链信息
for (var i = start; i < end; i++) {
var item = datalist[i];
var articleItem = `
<div class="fArticleItem">
<div class="fArticleAvatar">
<a class="fArticlelink fAvatar" target="_blank" rel="noopener nofollow" href="${item.link}">
<img src="${item.avatar}" alt="avatar" onerror="this.src='${fdatalist.error_img}'; this.onerror = null;">
</a>
<div class="fArticleAuthor">
${item.author}
</div>
</div>
<div class="fArticleMessage">
<a class="fArticleTitle" href="${item.link}" target="_blank" rel="noopener nofollow" data-title="${item.title}">
${item.title}
</a>
<div class="fArticleTime">
<span class="fArticleCreated"><i class="far fa-calendar-alt">发表于</i>${item.created}</span>
<span class="fArticleUpdated"><i class="fas fa-history">更新于</i>${item.updated}</span>
</div>
</div>
</div>
`;

if (container) {
// 为了便于和后续拼接,选择从容器尾部插入
container.insertAdjacentHTML('beforeend', articleItem);
}
}

}


// 初始化方法
function initFriendCircle() {
// 获取友链挂载容器
var fcircleContainer = document.getElementById('fcircleContainer')
// 获取本地存储的友链基本信息
var statistical_data = JSON.parse(localStorage.getItem("statisticalList"));
// 从本地内存读取配置信息
var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
// 只有当容器、基本信息均存在时才执行初始化
if (fcircleContainer && statistical_data && fdatalist) {
// 加载基本信息面板
loadStatistical(statistical_data);
// 获取切换排序按钮
var switchRankMode = document.getElementById("switchRankMode");
//根据当前选择的排序方案加载对应的排序内容
if (switchRankMode.checked) {
// console.log("按更新时间排序");
var article_sortupdated = JSON.parse(localStorage.getItem("updatedList"));
loadArticleItem(article_sortupdated, 0, fdatalist.initnumber)
} else {
// console.log("按创建时间排序");
var article_sortcreated = JSON.parse(localStorage.getItem("createdList"));
loadArticleItem(article_sortcreated, 0, fdatalist.initnumber)
}
}
}

// 加载更多文章
function loadMoreArticle() {
// 获取当前已加载的文章数
var currentArticle = document.getElementsByClassName('fArticleItem').length;
// 获取当前选择的排序方式
var switchRankMode = document.getElementById("switchRankMode");
// 从本地内存读取配置信息
var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
// 只有当两者均存在时才继续执行
if (switchRankMode && fdatalist) {
if (switchRankMode.checked) {
// console.log("按更新时间排序");
var article_sortupdated = JSON.parse(localStorage.getItem("updatedList"));
// 从当前文章的下一篇开始,加载下一阶程篇数
loadArticleItem(article_sortupdated, currentArticle, currentArticle + fdatalist.stepnumber)
} else {
// console.log("按创建时间排序");
var article_sortcreated = JSON.parse(localStorage.getItem("createdList"));
// 从当前文章的下一篇开始,加载下一阶程篇数
loadArticleItem(article_sortcreated, currentArticle, currentArticle + fdatalist.stepnumber)
}
}
// 向上滚动一篇文章的距离
window.scrollBy(0, 180)
}

//切换按钮
function checkRankMode() {
// 首先清空现有的文章内容
document.getElementById('fcircleContainer').innerHTML = ''
// 获取当前选择的排序方式
var switchRankMode = document.getElementById("switchRankMode");
// 从本地内存读取配置信息
var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
// 只有当两者均存在时才继续执行
if (switchRankMode && fdatalist) {
//按更新时间排序
if (switchRankMode.checked) {
// console.log("按更新时间排序");
var article_sortupdated = JSON.parse(localStorage.getItem("updatedList"));
//加载配置项中指定的初始化篇数
loadArticleItem(article_sortupdated, 0, fdatalist.initnumber)
} else {
// console.log("按创建时间排序");
var article_sortcreated = JSON.parse(localStorage.getItem("createdList"));
//加载配置项中指定的初始化篇数
loadArticleItem(article_sortcreated, 0, fdatalist.initnumber)
}
}
}


//时区优化
var formatDate = (strDate) => {
try {
var date = new Date(Date.parse(strDate.replace(/-/g, "/")));
var gettimeoffset;
if (new Date().getTimezoneOffset()) {
gettimeoffset = new Date().getTimezoneOffset();
} else {
gettimeoffset = 8;
}
var timeoffset = gettimeoffset * 60 * 1000;
var len = date.getTime();
var date2 = new Date(len - timeoffset);
var sec = date2.getSeconds().toString();
var min = date2.getMinutes().toString();
if (sec.length === 1) {
sec = "0" + sec;
}
if (min.length === 1) {
min = "0" + min;
}
return date2.getFullYear().toString() + "-" + (date2.getMonth() + 1).toString() + "-" + date2.getDate().toString() + " " + date2.getHours().toString() + ":" + min + ":" + sec
} catch (e) {
return ""
}
};

//执行初始化方法
initFriendCircle()

fetch.js

主要改动描述:

适配最新版本,按文章创建时间排序

这里其实不需要改多少,也就是// 按创建时间排序那一部分的代码中time改成created即可

代码:

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
//===========================================================
// 排序算法
function quickSort(arr, keyword){
// keyword传入值'time'(按发布时间排序)或'updated'(按更新时间排序)
if(arr.length == 0){return [];}
var left = [];
var right = [];
var selectItem = arr[0];
for(var i = 1; i < arr.length; i++){
if(arr[i][keyword] > selectItem[keyword]){
left.push(arr[i]);
}
else{
right.push(arr[i]);
}
}
return quickSort(left, keyword).concat(selectItem, quickSort(right, keyword));
}
// ======================================================
// 从本地内存读取配置信息
var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
// 抓取友链api信息并进行分割处理。存入本地存储
if (fdatalist){
fetch(fdatalist.apiurl)
.then(res => res.json())
.then(json =>{
// 获取友链朋友圈基本信息
var statistical_data = json.statistical_data;
//存入本地存储
localStorage.setItem("statisticalList",JSON.stringify(statistical_data))
// console.log(statistical_data);
// 获取友链朋友圈文章列表
var article_data = eval(json.article_data);
// console.log(article_data);
// 按创建时间排序
var article_sortcreated = quickSort(article_data,'created');
//存入本地存储
localStorage.setItem("createdList",JSON.stringify(article_sortcreated))
// 按更新时间排序
var article_sortupdated = quickSort(article_data,'updated');
//存入本地存储
localStorage.setItem("updatedList",JSON.stringify(article_sortupdated))
// console.log(article_sortcreated);
// console.log(article_sortupdated);
}
)
}

配置:

然后就是把上面的文件在配置中引入

我的参考如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# fcircle
# see https://zfe.space/friendcircle/
# see https://akilar.top/posts/8480b91c/
fcircle:
enable: true #控制开关
apiurl: https://blog-friends-xi.vercel.app/all #api地址
initnumber: 20 #【可选】页面初始化展示文章数量
stepnumber: 10 #【可选】每次加载增加的篇数
error_img: /img/404.jpg #【可选】头像图片加载失败时的默认头像
opentype: '_blank' #【可选】'_blank'打开新标签,'_self'本窗口打开,默认为'_blank'
nofollow: false #【可选】开启禁止搜索引擎抓取,默认开启
preload: #【可选】加载动画图片链接
css: /css/butterfly.css #https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/css/butterfly.min.css # 【可选】开发者接口,自定义css链接
js: /js/fcircle.js #https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/js/fcircle.min.js #/js/fcircle.js #【可选】开发者接口,自定义js链接
fetchJs: /js/fetch.js
path: #【可选】fcircle的路径名称。默认为 fcircle,生成的页面为 fcircle/index.html
front_matter: #【可选】fcircle页面的 front_matter 配置
title: 友链朋友圈
comments: true

最后

暂时就写到这了,有什么错误欢迎各位大佬指出😀

欢迎访问我的小破站https://www.226yzy.com/ 或者GitHub版镜像 https://226yzy.github.io/ 或Gitee版镜像https://yzy226.gitee.io/

我的Github:226YZY (星空下的YZY) (github.com)

【转载说明】本文优先发布于我的个人博客www.226yzy.com ,转载请注明出处并注明作者:星空下的YZY。

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0许可协议。