魔改主题兼容轻量友链朋友圈

轻量朋友圈

开始操作前,你需要部署好轻量朋友圈

效果

跟原版没什么区别,可以前往我的朋友圈页面查看

正文

修改前须知,改完后原版的朋友圈配置将无效,本次共修改两个文件添加一个配置项

创建页面

在 Hexo 博客根目录 [blog]下打开终端,输入

1
hexo new page fcircle

打开[blog]\source\fcircle\index.md,添加一行type: 'fcircle'

1
2
3
4
5
6
7
---
title: 朋友圈
comments: false
aside: false
top_img: false
type: "fcircle"
---

主题配置文件中开启menu中友链,导航栏朋友圈,注意缩进!!!

替换fcircle.pug

文件目录themes\anzhiyu\layout\includes\page\fcircle.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
45
46
47
48
49
50
51
52
53
54
55
56
57
if theme.friends_lite.enable
link(rel="stylesheet", href=theme.friends_lite.fclite_css_url)
style.
#random-article {
display: none!important;
}
.card:hover,
#random-article:hover {
border: var(--style-border-hover)!important;
}
#modal-author-name-link,
.modal-article .modal-article-title:hover,
.card-title:hover{
color: var(--anzhiyu-theme)!important;
}
.modal-article,
#modal-articles-container {
border-top-color: var(--anzhiyu-theme)!important;
border-bottom-color: var(--anzhiyu-theme)!important;
}
#load-more-btn:hover {
background: var(--anzhiyu-theme)!important;
}
.fcircle_page
.author-content.author-content-item.fcirclePage.single(style=`background: url(${theme.friends_lite.top_background}) center / cover no-repeat !important;`)
.card-content
.author-content-item-tips 朋友圈
span.author-content-item-title 最新文章订阅
.content-bottom
.tips= theme.friends_lite.top_tips
.banner-button-group
a.banner-button(onclick='pjax.loadUrl("/about")')
i.anzhiyufont.anzhiyu-icon-arrow-circle-right(style='font-size: 22px; margin-right: 0.25rem')
span.banner-button-text 关于本人
.title-h2-a
.title-h2-a-left
h2(style='padding-top:0;margin:.6rem 0 .6rem') 🎣 钓鱼
a.random-post-start(href='javascript:fetchRandomPost();')
i.anzhiyufont.anzhiyu-icon-arrow-rotate-right
.title-h2-a-right
a.random-post-all(href='/link/') 全部友链
#random-post
.title-h2-a
.title-h2-a-left
h2 🐟 鱼塘
#friend-circle-lite-root

script.
if (typeof UserConfig === 'undefined') {
var UserConfig = {
private_api_url: '#{theme.friends_lite.private_api_url}',
page_turning_number: #{theme.friends_lite.page_turning_number},
error_img: '#{theme.friends_lite.error_img}',
}
}
script(src=theme.friends_lite.fclite_js_url)
script(defer data-pjax src=url_for(theme.asset.random_friends_post_js))

替换random_friends_post.js

文件目录themes\anzhiyu\source\js\anzhiyu\random_friends_post.js

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
var fdata = { defaultFish: 100, hungryFish: 100 };
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) return;
randomPostWorking = true;

let randomRotate = randomPostTimes * 360;
let randomPostTipsItem = randomPostTips[Math.floor(Math.random() * randomPostTips.length)];
let randomPostLevel = getRandomPostLevel(randomPostTimes);

document.getElementById("random-post").innerHTML = randomPostTimes >= 5 ?
`钓鱼中... (Lv.` + randomPostTimes + ` 当前称号:` + randomPostLevel + `)` :
`钓鱼中...`;

let randomTime = randomPostTimes == 0 ? 0 : randomNum(1000, 3000);

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 (randomPostClick * fdata.hungryFish + fdata.defaultFish < randomPostTimes && Math.round(Math.random()) == 0) {
document.getElementById("random-post").innerHTML =
"因为只钓鱼不吃鱼,过分饥饿导致本次钓鱼失败...(点击任意一篇钓鱼获得的文章即可恢复)";
randomPostWorking = false;
} else {
fetch(UserConfig.private_api_url + 'all.json')
.then(res => res.json())
.then(json => {
let randomArticle = json.article_data[Math.floor(Math.random() * json.article_data.length)];
let { title, link, author } = randomArticle;
window.setTimeout(() => {
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);
})
.catch(error => {
console.error('Error fetching data:', error);
document.getElementById("random-post").innerHTML = "获取文章失败,请稍后再试。";
})
.finally(() => {
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();
}

function randomClickLink() {
randomPostClick += 1;
localStorage.setItem("randomPostClick", randomPostClick);
}

function randomNum(minNum, maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
}

function getRandomPostLevel(times) {
if (times > 10000) return "愿者上钩";
if (times > 1000) return "俯览天下";
if (times > 100) return "绝世渔夫";
if (times > 75) return "钓鱼王者";
if (times > 50) return "钓鱼宗师";
if (times > 20) return "钓鱼专家";
if (times > 5) return "钓鱼高手";
return "钓鱼新手";
}

initRandomPost();

添加配置项

主题配置文件中添加一段

1
2
3
4
5
6
7
8
9
10
# Lite朋友圈配置
friends_lite:
enable: true
fclite_css_url: https://fc.ruom.top/main/fclite.css # 轻量朋友圈的CSS
fclite_js_url: https://fc.ruom.top/main/fclite.js # 轻量朋友圈的js
private_api_url: https://fc.ruom.top/ # 获取json的API URL
page_turning_number: 20 # 每页显示的文章数量
error_img: https://cdn.bsgun.cn/Hexo-static/img/error-404.avif # 404图片 URL
top_background: https://cdn.bsgun.cn/Hexo-static/img/essay-bg.avif # 顶部背景图片 URL
top_tips: 使用 轻量友链朋友圈 订阅友链最新文章 # 顶部提示文本

请自行替换配置中内容,最后hexo三连,刷新查看效果

不修改主题pug方案

如果你不想修改主题文件,可以无视替换fcircle.pug,直接在\source\fcircle\index.md中添加如下内容

当然random_friends_post.js还是需要替换的,具体内容按照你的配置修改即可

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
---
title: 朋友圈
comments: false
aside: false
top_img: false
---
<style>
h1 {
display: none;
}
div#page {
background: none !important;
box-shadow: none;
padding: 0;
border: none;
}
#random-article:hover {
border: var(--style-border-hover)!important;
}
.card:hover {
border: var(--style-border-hover)!important;
}
#random-article {
display: none!important;
}
#friend-circle-lite-root {
margin-top: 10px;
}
</style>
<link rel="stylesheet" href="https://fc.ruom.top/main/fclite.css">
<div class="author-content author-content-item fcirclePage single" style="background:url(https://cdn.bsgun.cn/Hexo-static/img/essay-bg.avif) center /cover no-repeat!important">
<div class="card-content">
<div class="author-content-item-tips">朋友圈</div><span class="author-content-item-title">最新文章订阅</span>
<div class="content-bottom">
<div class="tips">使用 轻量友链朋友圈 订阅友链最新文章</div>
</div>
<div class="banner-button-group"><a class="banner-button" style="padding: 8px 12px;" onclick="pjax.loadUrl(&quot;/about&quot;)" data-pjax-state=""><i class="anzhiyufont anzhiyu-icon-arrow-circle-right" style="font-size:22px;margin-right:.25rem"></i><span class="banner-button-text">关于本人</span></a></div>
</div>
</div>
<div class="title-h2-a">
<div class="title-h2-a-left">
<h2 style="padding-top:0;margin:.6rem 0 .6rem">🎣 钓鱼</h2><a class="random-post-start no-text-decoration" href="javascript:fetchRandomPost();" data-pjax-state="" style="transition-duration: 0.3s; transform: rotate(5400deg); opacity: 1;"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right"></i></a>
</div>
<div class="title-h2-a-right"><a class="random-post-all no-text-decoration" href="/link/" data-pjax-state="">全部友链</a></div>
</div>
<div id="random-post"></div>
<div class="title-h2-a">
<div class="title-h2-a-left">
<h2>🐟 鱼塘</h2>
</div>
</div>
<div id="friend-circle-lite-root"></div>
<script>
if (typeof UserConfig === 'undefined') {
var UserConfig = {
private_api_url: 'https://fc.ruom.top/',
page_turning_number: 20,
error_img: 'https://cdn.bsgun.cn/Hexo-static/img/error-404.avif',
}
}
</script>
<script src="/js/anzhiyu/random_friends_post.js"></script>
<script src="https://fc.ruom.top/main/fclite.js"></script>

结束

如果文章内容有错误地方,欢迎下方评论