看到很多博主都整了属于自己的朋友圈页面，所以在自己的轻量级服务器上也是第一时间部署上了，这里直接说在server部署咯

这个是我自己的：朋友圈 | 七鳄の学习格 (gmcj0816.top)

后端配置

下载GitHub文件到云服务器上

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

1
git clone https://github.com/Rock-Candy-Tea/hexo-circle-of-friends

方法二：这里也是可以先从物理机上下载然后上传到云服务器上

1
https://github.com/Rock-Candy-Tea/hexo-circle-of-friends

然后连接并上传到服务器上

在服务器上下载Python3.x

因为获取相关数据主要就是用python3 爬虫，所以需要下载Python3.x，这里以3.8为例

下载相关依赖

1
yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel libffi-devel yum vim gcc

安装Python3.8.8

1
2
3
4
wget https://www.python.org/ftp/python/3.8.8/Python-3.8.8.tgz
tar -zxf Python-3.8.8.tgz && cd Python-3.8.8
./configure --prefix=/usr/local/python3
make && make install

进行软链接

1
2
ln -s /usr/local/python3/bin/python3.8 /usr/bin/python3
ln -s /usr/local/python3/bin/pip3.8 /usr/bin/pip3

安装完成之后验证是否成功

正常是可以看到版本号的

1
python3 --version

需要下载pip

这个主要是朋友圈5.x之后需要有这个，不然会报错

1
pip install pyyaml

在服务器上下载git

如果有git可以跳过

1
yum install -y git

修改相关配置

编辑/hexo_circle_of_friends/fc_settings.yaml文件，需要修改的配置如下：

1
2
LINK:
    - {link: "https://www.yyyzyyyz.cn/link/", theme: "butterfly"}  # link改为你的友链页地址，theme选择你的博客主题

因为是server部署，这里需要改成server

1
2
3
4
BLOCK_SITE: []
DATABASE: sqlite  # 这里可以默认不需要修改
DEPLOY_TYPE: server  # 需要改成server
GITEE_FRIENDS_LINKS:

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

1
python3 deploy.py

部署画面

选择server--->部署，等待运行完毕即可。

部署完毕后，查看进程，服务器上开始运行两个进程，一个是爬虫程序，另一个是api服务：

进程

查看效果

1
curl 127.0.0.1:8000/all

Nginx代理

因为https访问http接口就会禁止

1
2
3
4
5
6
7
在你的Hexo 443端口下添加
location ^~/friendlink{
          proxy_pass http://127.0.0.1:端口号/;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header Host $http_host;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

前端配置

新建一个页面，比如hexo在博客根目录使用命令

1
hexo new fcircle

可以看到source/fcircle/index.md 文件，打开该文件，粘贴以下内容（注意修改api地址）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title: 朋友圈
date: 2022-01-29 15:23:17
---

<div id="app"></div>
<script>
    let UserConfig = {
        // 填写你的api地址
        private_api_url: 'https://blog.gmcj0816.top/friendlink',  //这里改成自己的
        // 点击加载更多时，一次最多加载几篇文章，默认10
        page_turning_number: 10,
        // 头像加载失败时，默认头像地址
        error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
        // 进入页面时第一次的排序规则
        sort_rule: 'created'
    }
</script>
<script type="text/javascript" src="https://npm.elemecdn.com/imgscdn@1.1.39/fcircle/app.min.js"></script>
<script type="text/javascript" src="https://npm.elemecdn.com/imgscdn@1.1.39/fcircle/bundle.js"></script>

到这里基本就完事了

下面就是根据自己的实际修改了，在5.x版本是可以前端修改相关信息的

配置面板

补充

这里本站的前端已经更换成安知鱼的教程类型，现在发现越来越Heo化了

这里就参考安知鱼 - 生活明朗 万物可爱 (anzhiy.cn)

安装插件

在博客根目录[Blogroot]下打开终端，运行以下指令（与旧版前端方案不兼容，如有安装旧版请先卸载）：

1
2
3
npm uninstall hexo-butterfly-fcircle --save
npm uninstall hexo-filter-fcircle --save
npm install hexo-filter-fcircle-anzhiyu --save

添加配置信息

在站点配置文件_config.yml或者主题配置文件例如_config.butterfly.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# fcircle
# see https://akilar.top/posts/62f13a97/
fcircle:
  enable: true #控制开关
  apiurl: https://friends.anzhiy.cn/ #api地址(注意后面要有/)
  initnumber: 30 #【可选】页面初始化展示文章数量
  stepnumber: 30 #【可选】每次加载增加的篇数
  css: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.0.9/assets/css/default.css #【可选】开发者接口，自定义css链接
  js: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.0.9/assets/js/fcircle.js #【可选】开发者接口，自定义js链接
  fetchJs: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.0.9/assets/js/fetch.js
  randomFriendsPostJS: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.0.9/assets/js/random-friends-post.js
  path: /fcircle #【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html
  topIcon: fas fa-arrow-right
  topLink: /about/
  front_matter: #【可选】fcircle页面的 front_matter 配置
    title: 朋友圈
    comments: false
    aside: false
    top_img: false

样式适配

安装完成✅以后，会发现顶部样式有亿点奇怪, 需要与自己的主题样式进行适配, 可以尝试加入以下自定义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
.author-content.author-content-item.fcirclePage {
  position: relative;
  border-radius: 15px;
}
.author-content-item .card-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;
}
.author-content-item .author-content-item-tips {
  opacity: .8;
  font-size: .6rem;
  margin-bottom: 0.5rem;
}
.author-content-item .card-content .author-content-item-title {
  margin-bottom: 0.5rem;
}
.author-content-item .author-content-item-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}
.author-content-item .content-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.author-content-item .card-content .banner-button-group {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
}
.author-content-item .card-content .banner-button-group .banner-button {
  height: 40px;
  width: 124px;
  border-radius: 20px;
  justify-content: center;
  background: var(--sevene--bg);
  color: var(--font-color);
  display: flex;
  align-items: center;
  z-index: 1;
  transition: .3s;
  cursor: pointer;
  border-bottom: 0!important;
}
.author-content-item .card-content .banner-button-group .banner-button i {
  margin-right: 8px;
  font-size: 1rem;
}

该项目中css使用了css变量, 添加变量css如下, 您可自行修改。

1
2
3
4
5
6
7
8
/* 颜色 */
[data-theme='light'] {
  --sevene-card-bg: #fff;
}

[data-theme='dark'] {
  --sevene-card-bg: #1d1b26;
}
  • 整页背景调整

加完以后会发现还是有点奇怪并且无法修改背景, 因为需要给当前页面加一个特定的类名来修改当前页面背景和底部页脚的文字颜色。
修改themes/butterfly/layout/page.pug第5行, 注意缩进

1
2
3
4
5
6
  block content
+     - let fcircle_page = (is_current('/fcircle/')) ? true : false
-     #page
+     #page(class= (fcircle_page === true) ? 'fcircle_page' : '')
      if top_img === false
        h1.page-title= page.title

修改themes/butterfly/layout/includes/layout.pug第16行, 注意缩进

1
2
3
4
5
  if theme.background
-   web_bg
+   #web_bg(class= (fcircle_page === true) ? 'fcircle_page-page-background' : '')
    
  !=partial('includes/sidebar', {}, {cache: true})

改完以后就可以通过css来修改当前页面的背景和底部页脚的文字颜色了, 加入以下css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.fcircle_page-page-background#web_bg {
  background: var(--sevene-background) !important;
}
[data-theme='dark'] .fcircle_page-page-background#web_bg {
  background: var(--global-bg) !important;
}
[data-theme=light] .fcircle_page-page-background ~ .page #footer #footer-wrap {
  color: var(--font-color);
}
[data-theme=light] .fcircle_page-page-background ~ .page #footer #footer-wrap a{
  color: var(--font-color);
}
.author-content.author-content-item.fcirclePage {
  background: url("这里修改成自己喜欢的图片") center center no-repeat !important
}

开启了pjax的同学, 需要修改 themes/butterfly/layout/includes/third-party/pjax.pug 加上#web_bg以完成适配

1
2
3
4
5
6
7
  - var pjaxExclude = 'a:not([target="_blank"])'
  if theme.pjax.exclude
    each val in theme.pjax.exclude
      - pjaxExclude = pjaxExclude + `:not([href="${val}"])`

- - let pjaxSelectors = ['head > title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax']
+ - let pjaxSelectors = ['head > title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax', '#web_bg']