【Hexo】鱼塘朋友圈部署全攻略

時光2024-10-212024-11-17

一、介绍

初始项目：**hexo-circle-of-friends**

改进版：**Friend-Circle-Lite**

轻量化：对比原版友链朋友圈的功能，该友圈功能简洁，去掉了设置和fastAPI的臃肿，仅保留关键内容。
无数据库：因为内容较少，我采用json直接存储文章信息，减少数据库操作，提升action运行效率。
部署简单：原版友链朋友圈由于功能多，导致部署较为麻烦，本方案仅需简单的部署action即可使用，vercel
用于部署前端静态页面和实时获取最新内容。
文件占用：对比原版4MB的bundle.js文件大小，本项目仅需要5.50KB的fclite.min.js文件即可轻量的展示到前端。
前端分离: 将前后端分离，前端文件放在page分支，后端文件放在主分支

二、实操

方案一

引用站外地址

Friend-Circle-Lite部署说明

#自部署使用方法

后端采用最新的 Friend-Circle-Lite 项目进行部署，效果如下：

前端

1、友圈json生成

在博客根目录创建link.js，复制下面的代码（原项目地址说明文档没有定义blacklist会执行出错）

const YML = require('yamljs')
const fs = require('fs')

// 定义黑名单
const blacklist = []; // 替换为实际要过滤的名字

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	node link.js

生成friend.json文件，可以把这个文件移动到一个你喜欢的目录，比如我放到了/api/friends目录下

2、创建新页面

创建一个新的页面，尽量不要和主题默认朋友圈页面页面相同，比如安知鱼主题默认页面为fcircle

此处我直接用之前创建好的页面flink

1	hexo new page flink

页面 Front-matter配置如下

---
title: 時光的鱼塘
type: flink
aside: false
top_img: false
comments: false
date: 2024-05-08 15:23:31
---

继续粘贴以下内容：

<div id="friend-circle-lite-root"></div>
<script>
    if (typeof UserConfig === 'undefined') {
        var UserConfig = {
            // 填写你的fc Lite地址
            private_api_url: 'https://friends.shiguangdev.cn/',
            // 点击加载更多时，一次最多加载几篇文章，默认20
            page_turning_number: 20,
            // 头像加载失败时，默认头像地址
            error_img: 'https://i.p-i.vip/30/20240815-66bced9226a36.webp',
        }
    }
</script>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.css">
<script src="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.js"></script>

其中private_api_url是要修改后端服务地址，这里可以先不填注意尾部带/，不要遗漏。

执行命令三连部署一次，因为后面要用到friend.json文件

1	hexo cl && hexo g && hexo d

3、文章定时抓取

可以借助1Panel获取宝塔面板创建定时任务，实现文章定时抓取

后端

这里我采用自部署使用方法

如果你有一台境内服务器，你也可以通过以下操作将其部署到你的服务器上，操作如下：

1、前置工作

确保你的服务器有定时任务 crontab 功能包，一般是linux自带，如果你没有宝塔等可以管理定时任务的面板工具，可能需要你自行了解定时工具并导入，本教程提供了简单的介绍。

2、克隆仓库

可以在本地下载好上传到云服务器

1 2	git clone https://github.com/willow-god/Friend-Circle-Lite.git cd Friend-Circle-Lite

3、修改`conf.yaml`配置文件

设置spider_settings.json_url为你friend.json文件访问地址，例如此处我的是：https://blog.shiguangdev.cn/api/friends/friend.json

其他配置项不需要的话可以都改为false

4、安装依赖

下载服务相关包，其中 requirements-server.txt 是部署API服务所用包， requirements.txt 是抓取服务所用包，请均下载一遍。

1 2	pip install -r ./requirements.txt pip install -r ./server/requirements-server.txt

5、部署服务

进入目录路径后直接运行deploy.sh脚本启动API服务：

1 2	chmod +x ./deploy.sh ./deploy.sh

我这里执行./deploy.sh时报了个错误

通常是由于脚本文件中包含了 Windows 样式的行尾符（CRLF），而 Linux/Unix 系统期望的是 Unix 样式的行尾符（LF）。这种情况下，^M 字符表示的是回车符（CR），它在 Linux 系统上是不可见的，并且会导致解释器无法正确识别。可以使用支持多种换行符格式的文本编辑器，如 VSCode、Sublime Text 或 Notepad++，打开文件并将其保存为 Unix 格式（LF），然后重新运行即可

其中的注释应该是较为详细的，如果部署成功你可以使用以下命令进行测试，如果获取到了首页html内容则成功：

1	curl 127.0.0.1:1223

或者可以直接浏览器访问，将IP替换为服务器公网IP即可

这个端口号可以修改，在server.py最后一行修改数字即可，如果你想删除该API服务，可以使用ps找到对应进程并使用Kill命令杀死进程：

1 2	ps aux \| grep python kill -9 [这里填写上面查询结果中对应的进程号]

为了后面方便，可以再给当前服务配置反向代理，例如我代理到域名friends.shiguangdev.cn

我这里直接借助1Panel创建反向代理并配置域名证书了。

最后修改页面中的private_api_url为你的后端服务域名或公网ip即可。

本地直接访问http://localhost:4000/flink/进行预览

方案二

后端

引用站外地址

hexo-circle-of-friends后端部署教程

#Server部署

后端建议采用Server部署，采用Docker部署无法修改默认配置路径地址(试了很多次，都采用的默认配置)

首先请确保你的服务器安装好docker和git，如果未安装可参考如何安装docker和如何安装git

1、克隆仓库

clone项目仓库，地址：https://github.com/Rock-Candy-Tea/hexo-circle-of-friends

2、修改配置

修改配置文件中的友链地址：hexo-circle-of-friends/hexo_circle_of_friends/fc_settings.yaml

注意，theme根据你实际用到的主题尽心配置，此处我采用默认配置common2

LINK: [
     { link: "https://blog.shiguang666.eu.org/link/", theme: "common2" },  # 友链页地址1，修改为你的友链页地址
    #  { link: "https://blog.class1v1.com/link/", theme: "common2" }, # 友链页地址2
#     { link: "https://immmmm.com/about/", theme: "common1" }, # 友链页地址3
#     ...
]

3、安装依赖

1 2	pip install -r ./requirements.txt pip install -r ./hexo_circle_of_friends/requirements.txt

4、部署服务

然后运行位于项目根目录的部署脚本：

1	python3 deploy.py

选择docker--->部署，选择1、Server进行部署，等待运行完毕即可。

尝试访问API：

1	curl 127.0.0.1:8000/all

出现数据即为部署成功。

接下来，开放服务器的对应端口，就可以通过IP:端口或者域名:端口访问到API，前端需要的就是这个地址。

直接访问这个地址是没有数据的

访问/all可以查看所有数据

访问/randompost随机获取一篇文章数据

使用如下命令查看日志

1	cat /tmp/crawler.log

最后配置下反向代理

前端

引用站外地址

安知鱼主题指南

#朋友圈页面配置

由于我使用的是安知鱼主题，所以我这里直接参考安知鱼的教程了。

1、创建朋友圈页面

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

1	hexo new page fcircle

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

---
title: 朋友圈
date: 2022-11-21 17:06:17
comments: false
aside: false
top_img: false
type: "fcircle"
---

在下面粘贴以下内容，修改private_api_url为你的后端api地址

此处我的是：https://fcircle.shiguangdev.cn/

<div id="hexo-circle-of-friends-root"></div>
<script>
    let UserConfig = {
        // 填写你的api地址
        private_api_url: 'https://fcircle.shiguangdev.cn/',
        // 初始加载几篇文章
        page_init_number: 20,
        // 点击加载更多时，一次最多加载几篇文章，默认10
        page_turning_number: 10,
        // 头像加载失败时，默认头像地址
        error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
        // 进入页面时第一次的排序规则
        sort_rule: 'created',
        // 本地文章缓存数据过期时间（天）
        expire_days: 1, 
    }
</script>
<script type="text/javascript" src="https://npm.elemecdn.com/[email protected]/dist/fcircle.min.js"></script>

效果如下：

或者：

不能与fcircle名称相同

<div id="hexo-circle-of-friends-root"></div>
<script>
    let UserConfig = {
        // 填写你的api地址
        private_api_url: 'http://192.168.142.88:8000/',
        // 点击加载更多时，一次最多加载几篇文章，默认10
        page_turning_number: 12,
        // 头像加载失败时，默认头像地址
        error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
        // 进入页面时第一次的排序规则
        sort_rule: 'created'
    }
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@master/mainColor/heoMainColor.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@master/moments5/app.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@master/moments5/bundle.js"></script>

效果如下：

2、生成js文件

将https://npm.elemecdn.com/[email protected]/js/friends_vue/index.js保存到一个js文件，将中的 url替换为您的后端 url

将js文件放到博客某个目录或者上传到代码托管平台，此处我直接放到/api/friends/friends_front.js

也可以下载前端项目：hexo-circle-of-friends-front到本地，修改代码中src/utils/config.ts的 url 变量路径，改为你自己的，然后执行npm run build构建后将dist文件夹中的js粘贴到你的js文件中

3、启用朋友圈功能

主题配置文件中开启menu中友链和朋友圈的注释，导航栏朋友圈，注意缩进！！！

menu:
  # 文章:
  #   隧道: /archives/ || anzhiyu-icon-box-archive
  #   分类: /categories/ || anzhiyu-icon-shapes
  #   标签: /tags/ || anzhiyu-icon-tags

  友链:
    #   友人帐: /link/ || anzhiyu-icon-link
    朋友圈: /fcircle/ || anzhiyu-icon-artstation
    #   留言板: /comments/ || anzhiyu-icon-envelope

  # 我的:
  #   音乐馆: /music/ || anzhiyu-icon-music
  #   追番页: /bangumis/ || anzhiyu-icon-bilibili
  #   相册集: /album/ || anzhiyu-icon-images
  #   小空调: /air-conditioner/ || anzhiyu-icon-fan

  关于:
    #   关于本人: /about/ || anzhiyu-icon-paper-plane
    闲言碎语: /essay/ || anzhiyu-icon-lightbulb
    #   随便逛逛: javascript:toRandomPost() || anzhiyu-icon-shoe-prints1

主题配置文件中开启friends_vue.enable

# 朋友圈配置
friends_vue:
  enable: true
  vue_js: /api/friends/friends_front.js
  api_url: https://fcircle.shiguangdev.cn/
  top_tips: 使用 友链朋友圈 订阅友链最新文章
  top_background: https://img.shiguangdev.cn/i/2024/10/21/6715cffbdb61a.webp

参数	备选值/类型	解释
enable	boolean	【必须】是否启用
vue_js	url	【必须】朋友圈前端构建后的 url
apiurl	string	【必须】朋友圈后端 url
top_background	url	【可选】朋友圈顶部背景图

4、访问并测试

执行三连命令

1	hexo cl && hexo g && hexo s

访问域名下的/fcircle即可看到效果

新版前端在顶部右下角卡片新增管理面板：

点击即可进入。第一次部署成功后，输入第一个密码的同时设置密码。请设置一个安全可靠的密码，并防止泄露。

再次修改配置

前端改密码方式

友链朋友圈项目的前端第一次登录时即设置密码，如果想要改的话则需要自行删除数据库 auth、secret 表格。

进入服务器 hexo-circle-of-friends 根目录，找到 data.db 文件

sqlite3
sqlite> .open data.db # 打开数据库
sqlite> .tables
# auth  friends  posts  secret
sqlite> DROP TABLE auth;
sqlite> DROP TABLE secret;
sqlite> .tables
# friends  posts
sqlite> .exit

参考