前言

美化之前

美化的时候需要修改网站的源文件、添加样式、js之类的,需要一点基础,可以参考

在添加完js、css后,一定要记得在_config.butterfly.ymlinject里引用

效果

顶栏图片教程在下面链接里

参考链接

不懂的先去文档里找一找,里面都很详细

后端搭建

因为我没有服务器,所以采用的是云函数部署,数据库用的是之前搭建Twikoo评论的Mongodb,具体怎么搭建数据库可以查看云函数部署 | Twikoo 文档,视频教程里很详细。

前端搭建

因为文档里各位佬的样式我都不是很喜欢所以我集思广益,将各位佬的方案融合了一下

主要参考了友链朋友圈5 - 我的部署历程与主题样式分享 | 张洪Heo (zhheo.com)

1. 新增fcircle页面

新建[blogRoot]\source\fcircle\index.md

1
2
3
4
5
6
---
title: 朋友圈
date: 2024-03-03 20:41:11
comments: true
aside: false
---

2. 添加fcircle.pug

新建[blogRoot]\themes\butterfly\layout\includes\page\fcircle.pug

记得将private_api_url改为你自己后端的接口

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
.fcircle_page
.title-h2-a
.title-h2-a-left
h2(style='padding-top:0;margin:.6rem 0 .6rem') 🎣 钓鱼
a.random-post-start(href='javascript:fetchRandomPost();')
i.fa.fa-refresh
.title-h2-a-right
a.random-post-all(href='/link/') 全部友链
#random-post

.title-h2-a
.title-h2-a-left
h2(style='padding-top:0;margin:.6rem 0 .6rem') 🐟 鱼塘

#hexo-circle-of-friends-root
script.
let UserConfig = {
// 填写你的api地址
private_api_url: "https://fcircle.june-pj.cn/",
// 点击加载更多时,一次最多加载几篇文章,默认10
page_turning_number: 12,
// 头像加载失败时,默认头像地址
error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
// 进入页面时第一次的排序规则
sort_rule: 'created'
}
link(rel='stylesheet' href='https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@master/mainColor/heoMainColor.css')
script(defer data-pjax src=url_for("/static/js/random_friends_post.js"))
script(type='text/javascript' src='https://cdn1.tianli0.top/gh/zhheo/JS-Heo@master/moments5/app.min.js')
script(type='text/javascript' src='https://cdn1.tianli0.top/gh/zhheo/JS-Heo@master/moments5/bundle.js')

3. 修改page.pug

修改[blogRoot]\themes\butterfly\layout\page.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
extends includes/layout.pug

block content
#page
if page.top_page && page.top_page === true
include includes/page/top_page.pug
else
if top_img === false
h1.page-title= page.title

case page.type
+ when 'fcircle'
+ include includes/page/fcircle.pug
...

4. 新增random_friends_post.js

钓鱼相关函数,参考自:鱼塘朋友圈部署前端方案 | 安知鱼 (anheyu.com)从源码里找到的[doge]

apiurl改为你自己后端的接口

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
var fdata = {
apiurl: 'https://fcircle.june-pj.cn/',
defaultFish: 100,
hungryFish: 100,
};
//可通过 var fdataUser 替换默认值
if (typeof fdataUser !== "undefined") {
for (var key in fdataUser) {
if (fdataUser[key]) {
fdata[key] = fdataUser[key];
}
}
}
var randomPostTimes = 0;
var randomPostWorking = false;
var randomPostTips = [
"钓到了绝世好文!",
"在河边打了个喷嚏,吓跑了",
"你和小伙伴抢夺着",
"你击败了巨龙,在巢穴中发现了",
"挖掘秦始皇坟时找到了",
"在路边闲逛的时候随手买了一个",
"从学校班主任那拿来了孩子上课偷偷看的",
"你的同桌无情的从你的语文书中撕下了那篇你最喜欢的",
"考古学家近日发现了",
"外星人降临地球学习地球文化,落地时被你塞了",
"从图书馆顶层的隐秘角落里发现了闪着金光的",
"徒弟修炼走火入魔,为师立刻掏出了",
"在大山中唱山歌,隔壁的阿妹跑来了,带着",
"隔壁家的孩子数学考了满分,都是因为看了",
"隔壁家的孩子英语考了满分,都是因为看了",
"小米研发了全新一代MIX手机,据说灵感",
"修炼渡劫成功,还好提前看了",
"库克坐上了苹果CEO的宝座,因为他面试的时候看了",
"阿里巴巴大喊芝麻开门,映入眼帘的就是",
"师傅说练武要先炼心,然后让我好生研读",
"科考队在南极大陆发现了被冰封的",
"飞机窗户似乎被一张纸糊上了,仔细一看是",
"历史上满写的仁义道德四个字,透过字缝里却全是",
"十几年前的录音机似乎还能够使用,插上电发现正在播的是",
"新版语文书拟增加一篇熟读并背诵的",
"经调查,99%的受访者都没有背诵过",
"今年的高考满分作文是",
"唐僧揭开了佛祖压在五指山上的",
"科学家发现能够解决衰老的秘密,就是每日研读",
"英特尔发布了全新的至强处理器,其芯片的制造原理都是",
"新的iPhone产能很足,新的进货渠道是",
"今年亩产突破了八千万斤,多亏了",
"陆隐一统天上宗,在无数祖境高手的目光下宣读了",
"黑钻风跟白钻风说道,吃了唐僧肉能长生不老,他知道是因为看了",
"上卫生间没带纸,直接提裤跑路也不愿意玷污手中",
"种下一篇文章就会产生很多很多文章,我种下了",
"三十年河东,三十年河西,莫欺我没有看过",
"踏破铁血无觅处,得来全靠",
"今日双色球中了两千万,预测全靠",
"因为卷子上没写名字,老师罚抄",
"为了抗议世间的不公,割破手指写下了",
"在艺术大街上被贴满了相同的纸,走近一看是",
"这区区迷阵岂能难得住我?其实能走出来多亏了",
"今日被一篇文章顶上了微博热搜,它是",
"你送给乞丐一个暴富秘籍,它是",
"UZI一个走A拿下五杀,在事后采访时说他当时回想起了",
"科学家解刨了第一个感染丧尸病毒的人,发现丧尸抗体存在于",
"如果你有梦想的话,就要努力去看",
"决定我们成为什么样人的,不是我们的能力,而是是否看过",
"有信心不一定会成功,没信心就去看",
"你真正是谁并不重要,重要的是你看没看过",
"玄天境重要的是锻体,为师赠你此书,好好修炼去吧,这是",
"上百祖境高手在天威湖大战三天三夜为了抢夺",
"这化仙池水乃上古真仙对后人的考校,要求熟读并背诵",
"庆氏三千年根基差点竟被你小子毁于一旦,能够被我拯救全是因为我看了",
"我就是神奇宝贝大师!我这只皮卡丘可是",
"我就是神奇宝贝大师!我这只小火龙可是",
"我就是神奇宝贝大师!我这只可达鸭可是",
"我就是神奇宝贝大师!我这只杰尼龟可是",
"上古遗迹中写道,只要习得此书,便得成功。你定睛一看,原来是",
"奶奶的,玩阴的是吧,我就是双料特工代号穿山甲,",
"你的背景太假了,我的就逼真多了,学到这个技术全是因为看了",
"我是云南的,云南怒江的,怒江芦水市,芦水市六库,六库傈僳族,傈僳族是",
"我真的栓Q了,我真的会谢如果你看",
"你已经习得退退退神功,接下来的心法已经被记录在",
"人生无常大肠包小肠,小肠包住了",
"你抽到了普通文章,它是",
"你收到了稀有文章,它是",
"你抽到了金色普通文章,它是",
"你抽到了金色稀有文章,它是",
"你抽到了传说文章!它是",
"哇!金色传说!你抽到了金色传说文章,它是",
"报告!侦察兵说在前往300米有一个男子在偷偷看一本书,上面赫然写着",
"芷莲姑娘大摆擂台,谁若是能读完此书,便可娶了她。然后从背后掏出了",
"请问你的梦想是什么?我的梦想是能读到",
"读什么才能增智慧?当然是读",
"纳兰嫣然掏出了退婚书,可是发现出门带错了,结果拿出了一本",
"你要尽全力保护你的梦想。那些嘲笑你的人,他们必定会失败,他们想把你变成和他们一样的人。如果你有梦想的话,就要努力去读",
"走人生的路就像爬山一样,看起来走了许多冤枉的路,崎岖的路,但终究需要读完",
"游戏的规则就是这么的简单,你听懂了吗?管你听没听懂,快去看",
];
var randomPostClick = 0;
function fetchRandomPost() {
if (!document.getElementById("random-post")) return;
if (randomPostWorking == false) {
randomPostWorking = true;
//获取旋转角度
let randomRotate = randomPostTimes * 360;
let randomPostTipsItem = randomPostTips[Math.floor(Math.random() * randomPostTips.length)];
let randomPostLevel = "";
if (randomPostTimes > 10000) {
randomPostLevel = "愿者上钩";
} else if (randomPostTimes > 1000) {
randomPostLevel = "俯览天下";
} else if (randomPostTimes > 1000) {
randomPostLevel = "超越神了";
} else if (randomPostTimes > 100) {
randomPostLevel = "绝世渔夫";
} else if (randomPostTimes > 75) {
randomPostLevel = "钓鱼王者";
} else if (randomPostTimes > 50) {
randomPostLevel = "钓鱼宗师";
} else if (randomPostTimes > 20) {
randomPostLevel = "钓鱼专家";
} else if (randomPostTimes > 5) {
randomPostLevel = "钓鱼高手";
} else {
randomPostLevel = "钓鱼新手";
}
if (randomPostTimes >= 5) {
document.getElementById("random-post").innerHTML =
`钓鱼中... (Lv.` + randomPostTimes + ` 当前称号:` + randomPostLevel + `)`;
} else {
document.getElementById("random-post").innerHTML = `钓鱼中...`;
}

let randomTime = randomNum(1000, 3000);

if (randomPostTimes == 0) {
randomTime = 0;
}

document.querySelector(".random-post-start").style.opacity = "0.2";
document.querySelector(".random-post-start").style.transitionDuration = "0.3s";
document.querySelector(".random-post-start").style.transform = "rotate(" + randomRotate + "deg)";

//判断是否饥饿
if (
document.getElementById("random-post") &&
randomPostClick * fdata.hungryFish + fdata.defaultFish < randomPostTimes &&
Math.round(Math.random()) == 0
) {
document.getElementById("random-post").innerHTML =
"因为只钓鱼不吃鱼,过分饥饿导致本次钓鱼失败...(点击任意一篇钓鱼获得的文章即可恢复)";
randomPostWorking = false;
} else {
var fetchUrl = fdata.apiurl + "randompost";
fetch(fetchUrl)
.then(res => res.json())
.then(json => {
var title = json.title;
var link = json.link;
var author = json.author;
if (document.getElementById("random-post")) {
window.setTimeout(function () {
document.getElementById("random-post").innerHTML =
randomPostTipsItem +
`来自友链 <b>` +
author +
`</b> 的文章:<a class="random-friends-post" onclick="randomClickLink()" target="_blank" href="` +
link +
`" rel="external nofollow">` +
title +
`</a>`;
randomPostTimes += 1;
localStorage.setItem("randomPostTimes", randomPostTimes);
document.querySelector(".random-post-start").style.opacity = "1";
}, randomTime);
}
});
randomPostWorking = false;
}
}
}

//初始化检查
function initRandomPost() {
// 获取已经存储的数据
if (localStorage.randomPostTimes) {
randomPostTimes = parseInt(localStorage.randomPostTimes);
randomPostClick = parseInt(localStorage.randomPostClick);
document.querySelector(".random-post-start").style.transitionDuration = "0.3s";
document.querySelector(".random-post-start").style.transform = "rotate(" + 360 * randomPostTimes + "deg)";
}
fetchRandomPost();
}

initRandomPost();

//添加点击统计
function randomClickLink() {
randomPostClick += 1;
localStorage.setItem("randomPostClick", randomPostClick);
}

// 生成随机数
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}

5. 新增fcircle.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
/* 覆盖引入的一些样式 */
:root{
--heo-main: var(--june-theme) !important;
--heo-background: var(--june-card-bg) !important;
}

#cf-more {
height: 35px !important;
}

#cf-more small {
font-size: 100% !important;
}

.el-button--small {
--el-button-size: 30px !important;
}

.el-input__inner {
border: 1px solid var(--june-card-border) !important;
padding: 0 1rem !important;
transition: border-color .2s !important
}

.el-input-group__prepend {
border: 1px solid var(--june-card-border) !important;
padding: 0 1.5rem !important;
transition: border-color .2s !important
}

.cf-article-author:hover{
color: white;
}

.cf-article:hover {
border: 1px solid var(--june-theme) !important;
}

.cf-article:hover .cf-img-avatar {
opacity: 0.7;
}

::selection {
color: #fff !important;
background: var(--june-theme) !important;
}

/* 顶部样式 */
.fcircle_page .author-content.fcirclePage {
height: 19rem;
color: var(--june-white);
overflow: hidden;
margin-top: 0px;
}
body[data-type="fcircle"] #web_bg {
background-color: #f7f9fe;
}

[data-theme="dark"] body[data-type="fcircle"] #web_bg {
background-color: #000;
}

body[data-type="fcircle"] #page .page-title {
display: none;
}

body[data-type="fcircle"] #page {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
.fcircle_page a {
border-bottom: none !important;
}
.fcircle_page .cf-article-avatar a:hover {
background: none !important;
color: var(--june-fontcolor) !important;
}
/* 随机文章样式 */

.title-h2-a {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
}
.title-h2-a-left {
display: flex;
align-items: center;
}
.title-h2-a-left h2 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.title-h2-a a {
margin-left: 0.5rem;
color: var(--june-fontcolor);
font-weight: 700;
}
#random-post {
min-height: 32px;
background: var(--card-bg);
border: var(--style-border-always);
box-shadow: var(--june-shadow-border);
padding: 15px 30px;
border-radius: 12px;
margin-top: 8px;
}
#random-post .random-friends-post {
text-decoration: none;
border-bottom: 2px solid var(--june-lighttext) !important;
color: var(--june-fontcolor);
font-weight: 700;
padding: 0 4px;
}

#random-post .random-friends-post:hover {
text-decoration: none;
border-bottom: 2px solid var(--june-none) !important;
color: var(--june-white) !important;
background: var(--june-main) !important;
border-radius: 4px;
box-shadow: var(--june-shadow-main);
}
#article-container .title-h2-a a:hover {
color: var(--june-hovertext) !important;
}
.title-h2-a-right a.random-post-all {
color: var(--june-fontcolor);
}
#cf-overshow.cf-show-now p a.cf-article-title:hover,
.fcircle_page #fcircleContainer .cf-article a.cf-article-title:hover,
.fcircle_page .title-h2-a-right a.random-post-all:hover,
.fcircle_page .title-h2-a-left a.random-post-start:hover {
background: none;
box-shadow: none;
color: var(--june-theme);
}
.fcircle_page .fish-pond-item .cf-article .cf-article-title {
line-height: 2;
}