添加轻量朋友圈

第一步本地生成 Json 文件

  • 在博客目录下添加文件 link.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
const YML = require('yamljs')  
const fs = require('fs')

const blacklist = ["友站名称1", "友站名称2", "友站名称3"]; // 由于某种原因,不想订阅的列表

let friends = [],
data_f = YML.parse(fs.readFileSync('source/_data/link.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n'));

data_f.forEach((entry, index) => {
let lastIndex = 2; // 想订阅几个分组就改成几个
if (index < lastIndex) {
const filteredLinkList = entry.link_list.filter(linkItem => !blacklist.includes(linkItem.name));
friends = friends.concat(filteredLinkList);
}
});

// 根据规定的格式构建 JSON 数据
const friendData = {
friends: friends.map(item => {
return [item.name, item.link, item.avatar];
})
};

// 将 JSON 对象转换为字符串
const friendJSON = JSON.stringify(friendData, null, 2);

// 写入 friend.json 文件
fs.writeFileSync('./source/friend.json', friendJSON);

console.log('friend.json 文件已生成。');
  • 终端执行:安装依赖
1
npm install yamljs
  • 终端执行 (新增了友链就需要执行)
1
node link.js
  • 然后在根目录会多出一个 friend.json,复制一份出来,保存到任意地方
  • 或者推送上线,使用 https://博客域名/friend.json

第二步:Fork 项目

Friend-Circle-Lite

  • 把第一步生成的 friend.json 副本上传到你自己仓库里面,获取文件直链
    443311.png
  • 如果是推送之后的情况不需要上传,直接用 https://博客域名/friend.json
  • 打开仓库的 conf.yaml 文件,把刚才的直连地址替换了
1
2
3
4
5
6
7
8
9
spider_settings:  
enable: true
# 将json_url替换为你刚刚生成的 friend.json 的直链地址,或者https://博客域名/friend.json,必须推送上线过,这个地址才有效
json_url: "https://raw.githubusercontent.com/yourname/yourepo/refs/heads/main/friend.json"
article_count: 5
merge_result:
enable: false
# merge_json_url 这里可以合并其他人的API接口,后面会讲到,这个地址就是 cf pages 部署出来的 API 服务地址,不会用就不要管他,不要乱改
merge_json_url: "https://fc.liushen.fun"v

第三步:开启 Github 工作流

869350.png

  • 不一样就点同意开启,跑完之后切换对应的分支看看 all.json 内容,如果正常就进行下一步
    904464.png

部署项目

  • cloudflare 的话,直接 page 部署的时候选择 page 分支,过会打开这样就说明成功了
    230769.png
  • vercel 部署就比较麻烦一点,但是推荐,速度快,先正常部署,然后切换成 page 分支再部署一次
    915016.png
    161962.png
    836320.png
    跑完之后点击分配的域名查看是否正常
    230769.png
  • 没问题的话,这二个方式上 自定义域,仅 DNS 即可,https://自定义域/

创建朋友圈页面

  • 本来有可以不建
1
hexo new page fcircle
  • source\fcircle\index.md 替换
1
2
3
4
5
6
7
---  
title: 朋友圈
comments: false
aside: false
top_img: false
type: "fcircle"
---
  • 替换 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:rem 0 rem') 🎣 钓鱼
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))
  • 替换 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();

适配友链的钓鱼

  • 修改 themes\anzhiyu\layout\includes\page\flink.pug
  • 这二个替换很 关键,缩进和原来的对比一下
  • 搜索 #random-post 修改为下面所示
1
2
3
4
5
6
7
8
9
10
#random-post  
script(defer data-pjax src=url_for(theme.asset.random_friends_post_js))
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}'
}
}
  • 搜索 .banner-button-group 修改为以下内容
1
2
.banner-button-group  
if (theme.friends_lite.private_api_url)
  • 最后在 _config.anzhiyu.yml 底部添加
  • 前面的后端 API 自定义域就填这里
1
2
3
4
5
6
7
8
9
10
# Lite朋友圈配置
friends_lite:
  enable: true
  fclite_css_url: 前面步骤获取的API/main/fclite.css  # 轻量朋友圈的CSS
  fclite_js_url: 前面步骤获取的API/main/fclite.js    # 轻量朋友圈的js
  private_api_url: 前面步骤获取的API/               # 获取json的API URL  
  page_turning_number: 20                              # 每页显示的文章数量  
  error_img: 图片链接  # 404图片 URL  
  top_background: 图片链接  # 顶部背景图片 URL  
  top_tips: 使用 轻量友链朋友圈 订阅友链最新文章        # 顶部提示文本

可能出现的问题

  • 如果友链里面的钓鱼没显示,就打开
1
2
3
# 朋友圈配置  
friends_vue:
enable: true

一键三连

1
hexo clean; hexo g; hexo s

参考了 3 位大佬的
安知鱼主题朋友圈配置心得 | 青云志
Friend-Circle-Lite:轻量友链朋友圈 | LiuShen’s Blog
魔改主题兼容轻量友链朋友圈 | 梦爱吃鱼