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

于 2024-12-13 12:52:59 发布
阅读量757 收藏 21
点赞数 22
分类专栏： hexo 文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50082325/article/details/144447255
版权

一、介绍

image-20241022151735279

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

改进版：Friend-Circle-Lite

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

二、实操

方案一

{% link Friend-Circle-Lite部署说明,#自部署使用方法,https://github.com/willow-god/Friend-Circle-Lite %}

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

image-20241023002012733

前端

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 文件已生成。');

在博客根目录下运行

node link.js

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

2、创建新页面

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

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

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文件

hexo cl && hexo g && hexo d
3、文章定时抓取

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

image-20241025111547975

后端

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

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

1、前置工作

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

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 是抓取服务所用包，请均下载一遍。

pip install -r ./requirements.txt
pip install -r ./server/requirements-server.txt
5、部署服务

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

chmod +x ./deploy.sh
./deploy.sh

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

image-20241023003212633

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

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

curl 127.0.0.1:1223

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

image-20241023003721685

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

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

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

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

image-20241023003918868

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

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

方案二

后端

{% link hexo-circle-of-friends后端部署教程,#Server部署,https://fcircle-doc.yyyzyyyz.cn/#/backenddeploy %}

后端建议采用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、安装依赖
pip install -r ./requirements.txt
pip install -r ./hexo_circle_of_friends/requirements.txt
4、部署服务

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

python3 deploy.py

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

尝试访问API：

curl 127.0.0.1:8000/all

出现数据即为部署成功。

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

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

image-20241023010406124

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

image-20241023010549059

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

image-20241023010606106

使用如下命令查看日志

cat /tmp/crawler.log

最后配置下反向代理

image-20241023010742385

前端

{% link 安知鱼主题指南,#朋友圈页面配置,https://gavinblog.github.io/anzhiyu-docs/page-configuration.html#%E6%9C%8B%E5%8F%8B%E5%9C%88%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE %}

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

1、创建朋友圈页面

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

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/fcircle-theme-yyyz@1.0.13/dist/fcircle.min.js"></script>

效果如下：

image-20241023033353845
或者：

不能与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>

效果如下：

image-20241023035614333

2、生成js文件

将https://npm.elemecdn.com/anzhiyu-blog-static@1.0.0/js/friends_vue/index.js保存到一个js文件，将中的 url替换为您的后端 url

image-20241022143006243

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

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

image-20241023012226802

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
参数备选值/类型解释
enableboolean【必须】是否启用
vue_jsurl【必须】朋友圈前端构建后的 url
apiurlstring【必须】朋友圈后端 url
top_backgroundurl【可选】朋友圈顶部背景图
4、访问并测试

执行三连命令

hexo cl && hexo g && hexo s

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

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

image-20241022145436138

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

再次修改配置

image-20241022161817532

前端改密码方式

友链朋友圈项目的前端第一次登录时即设置密码，如果想要改的话则需要自行删除数据库 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

参考

鱼塘朋友圈部署前端方案

鱼塘朋友圈后端部署方案

安知鱼主题朋友圈页面配置

Friend-Circle-Lite:轻量友链朋友圈

友链朋友圈

林木木前端部署方案

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值