继续折腾安知鱼——配置朋友圈页面

折腾感言

群友谪仙提供了一些教程，搞清楚了朋友圈页面的基本原理：

  • 抓取友链地址里的rss，生成一个json文件
  • 配置一个API服务，挂载这个json
  • 主题里设置这个API地址，调用json，并通过css渲染到页面

所有的教程基本都是基于两个项目：

  • 项目1，带前端管理面板，默认适配安知鱼：这个配置比较复杂，需要在vercel配置后端，且数据文件比较大，加载较慢，具体看相关仓库教程。所有功能都正常，包括前端管理面板。部署后端后在主题里设置以下字段：

    1
    2
    3
    4
    5
    6
    7
    enable: false
    # 这个js文件需要下载下来，将其中的 https://friends.anheyu.com/ 修改为你自己部署的后端，并上传git或网盘生成直链后引用 
    vue_js: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.2/friends/index.f9a2b8d2.js
    apiurl: https://friends.anheyu.com/  # 你部署的后端地址，必须带 / 
    error_img: https://cdn.bsgun.cn/Hexo-static/img/error-404.avif     # 404错误图
    top_background: https://pan.811520.xyz/2024-10/1728111447377.webp  # 顶部横幅图
    top_tips: 看看小伙伴们都写了些什么神仙文章

  • 项目2，轻量级朋友圈，推荐使用：这个配置简单，可以直接部署在cf pages，本身就不支持前端管理（好像也没这个必要，因为友链数据在git库里会定时更新），朋友圈钓鱼功能不可用，因为不适配安知鱼，根据群友x Jin的提示，找到了适配方法。梦爱吃鱼大佬有此插件的详细魔改教程，我只是在他基础上做了一些总结和自己的理解

本文部署采用项目2

开始部署

一、克隆项目

点击这里打开项目，直接克隆它

二、配置克隆好的项目

1. 创建需要爬取的链接json文件

在本地新建一个friend.json文件，格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "friends": [
    [
      "安知鱼",
      "https://blog.anheyu.com/",
      "https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg"
    ],
    [
      "杨幂的脚",
      "https://blog.cmliussss.com/",
      "https://raw.cmliussss.com/IMG_0038.png"
    ],
    [
      "东方月初",
      "https://hexo.200038.xyz/",
      "https://serv.200038.xyz/2024/09/19/040857.webp"
    ]
  ]
}

每一个数组的第一行：网站名称；第二行：网站地址；第三行：网站图标。没错，你的博客友链里都有这些数据，复制过来就可以了。注意格式不要出错，将这个文件上传到你刚刚克隆的仓库，生成一个直链地址，假如是：

1
https://raw.githubusercontent.com/yourname/yourepo/refs/heads/main/friend.json

重要提示：这一步不是必须的，如果你不想在朋友圈更新友链的文章，而是想把朋友圈做成一个新闻聚合站、游戏资讯站，这一步可以省略，但我建议建议先照做，熟练就再去做DIY的事

2. 配置仓库根目录的conf.yaml文件

这个文件作者已经做了详尽的注释，要改的地方就1个：

1
2
3
4
5
6
7
8
9
spider_settings:
  enable: true
  # 将json_url替换为你刚刚生成的 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"

其他什么邮箱推送功能，建议保持false状态

还有一个地方可以配置，可以直接抓取任意支持rss订阅的网站内容，这就是我前面说的可以打造新闻聚合站、游戏资讯站，前提网站支持rss，安知鱼主题都支持，就是这里

他通常是一个类似于这样的https://blog.imsyy.top/rss.xml的xml文件，这里就可以配置一些你自定义的rss订阅

1
2
3
4
5
specific_RSS:
  - name: "Redish101"
    url: "https://reblog.redish101.top/api/feed"
  # - name: "無名小栈"
  #   url: "https://blog.imsyy.top/rss.xml"

3. 配置action，生成我们需要的 all.json

如果你需要邮件推送的，需要在action的Repository secrets中配置一个变量，SMTP_PWD = 邮件服务器发信密码，一般与邮箱密码相同。如果邮件推送功能未开启，则不需要此变量

直接手动运行一次action（作者默认设置是间隔4小时运行一次，我改成了6小时），以后就不用管了，它会自动运行。注意：action一定要配置读+写的权限

运行完成后会自动在我们的仓库生成一个page分支，切到到这个分支：

目录结构是这样的：

点开all.json文件看看是否成功生成了类似下图的内容，如果是，证明成功了

三、部署API服务

现在开始切换到 CF

新建一个pages，链接GIT仓库，选择刚刚克隆的项目，

重要提示：一定要选择 page 分支

点击部署，等待几分钟，打开你的项目，如果出现以下页面，说明你部署成功

点击上图中的测试接口，你会得到一个类似https://*****.pages.dev/all.json的地址，并会出现类似下图的内容

给这个 pages 绑定一个自定义域名，假设为：friend.anzhiyu.xyz

那么，你的后端地址就是：https://friend.anzhiyu.xyz/，注意，最后面必须带/

OK，完全成功，现在距离最终成果还差最后一步

设置安知鱼主题

1. 修改主题配置文件

打开安知鱼主题配置文件_config.anzhiyu.yml，找到朋友圈配置，将enable: true改为false, 或者全部用#注释掉

1
2
3
4
5
6
friends_vue:
  enable: false  # 这里改为关闭
  vue_js: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.2/friends/index.f9a2b8d2.js
  apiurl: https://friends.anheyu.com/  # 最后必须带 /
  top_tips: 使用 友链朋友圈 订阅友链最新文章  # 这个文字可以自定义
  top_background: https://img02.anheyu.com/adminuploads/1/2022/08/21/630249e2df20f.jpg  # 朋友圈页面的顶部封面图

新增以下字段：

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://friend.anzhiyu.xyz/         # 你部署的朋友圈后端API地址
  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: 使用 轻量友链朋友圈 订阅友链最新文章        # 顶部提示文本

2. 修改theme\anzhiyu主题文件夹相关文件

点此下载js文件替换`themes\anzhiyu\source\js\anzhiyu\random_friends_post.js`同名文件

修改themes\anzhiyu\layout\includes\page\flink.pug文件

  • 搜索#random-post修改为下面所示(标注+的内容是需要新增的)：

    1
    2
    3
    4
    5
    6
    7
    8
      #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}',
    +      }
    +    }

  • 搜索.banner-button-group修改为以下内容(标注+的内容是需要新增的)：

    1
    2
    3
            .banner-button-group
    -         if (theme.friends_vue.apiurl) 
    +         if (theme.friends_lite.private_api_url)

3. 修改\source\fcircle\index.md文件

注意：原默认的type字段要去掉

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>

然后一键三连，启动本地预览

1
hexo cl && hexo g && hexo s

最终效果

到这里，大功告成

感谢：一粒微尘，东方月初，梦爱吃鱼