朋友圈

发布于 2022-03-13  465 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

先来游览一下效果

本文只介绍github部署方式,如需要server和docker部署,请自行查看 官方文档

github部署

这是默认的部署方式,即:github+leancloud+vercel

整个部署均在云端完成。运行原理:

  1. 通过github action启动爬虫抓取友链文章数据
  2. 数据由爬虫推送至数据库保存(默认为leancloud,可以自行更改)
  3. vercel部署的api从数据库获取数据交付给前端

部署方法:

ork友链朋友圈的项目仓库,地址:https://github.com/Rock-Candy-Tea/hexo-circle-of-friends

fork后仓库中,编辑仓库中的/hexo_circle_of_friends/setting.py文件,必须修改的配置如下:

LINK = [
        {
        "link":"https://www.yyyzyyyz.cn/link/",  # 友链页地址1,修改为你的友链页地址
        "theme":"butterfly"  # 友链页地址为https://www.yyyzyyyz.cn/link/,即为butterfly主题,以此类推
    },
]

修改为

LINK = [
        {
        "link":"https://你的友情链接页/links/",  # 友链页地址1,修改为你的友链页地址
        "theme":"sakura"  # 友链页地址为https://www.yyyzyyyz.cn/link/,即为butterfly主题,以此类推
    },
]

然后打开 hexo-circle-of-friends/hexo_circle_of_friends/utils/get_url.py 修改 75行代码

 def get_sakura_url(self,response, queue):
        avatar = response.css('.link-item img::attr(src)').extract()
        link = response.css('.link-item a::attr(href)').extract()
        name = response.css('.link-item .sitename::text').extract()

中的 src 改为 data-src .

然后点击仓库的Settings-->Secrets-->New repository secret

然后根据 官方文档 添加环境变量secert: 一直到部署前端。

新增面页,添加下面代码保存即可

<!-- 挂载友链朋友圈的容器 -->
<div class="post-content">
<div id="cf-container">与主机通讯中……</div>
</div>
<!-- 加样式和功能代码 -->
<!-- 将apiurl改成你后端生成的api地址 -->
<script type="text/javascript">
  var fdataUser = {
    apiurl: 'https://hexo-circle-of-friends-circle.vercel.app/'
  }
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lmm214/immmmm/themes/hello-friend/static/fcircle-beta.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lmm214/immmmm/themes/hello-friend/static/fcircle-beta.js"></script>

记得取代为你自己的api...

然而,本人所使用的代码又有些不一样。代码也贴出来,你们自己选吧,方法一样

<script defer="" src="/wp-content/themes/Sakura/killua/friends/fetch.js"></script>
<!-- 局部引入页面元素生成方法 -->
<script async="" src="/wp-content/themes/Sakura/killua/friends/fcircle.min.js" charset="utf-8"></script>    <!-- js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">

<!-- 友链朋友圈样式 -->
<link rel="stylesheet" href="/wp-content/themes/Sakura/killua/friends/default.min.css">

<!-- 挂载友链朋友圈的容器 -->
<div id="fcircleContainer"></div>

<!-- 全局引入友链朋友圈配置项 -->
 <script>
  // 全局变量声明区域
  var fdata = {
    apiurl: 'https://hexo-circle-of-friends-flurrychan.vercel.app/all',
    initnumber: 20, //【可选】页面初始化展示文章数量
    stepnumber: 10,//【可选】每次加载增加的篇数
    error_img: '/wp-content/themes/Sakura/killua/images/iloli.gif' //【可选】头像加载失败时默认显示的头像
  }
  //存入本地存储
  localStorage.setItem("fdatalist",JSON.stringify(fdata))
  

</script>
<script>
function reurl(){

url = location.href; //把当前页面的地址赋给变量 url

var times = url.split("?"); //分切变量 url 分隔符号为 "?"

if(times[1] != 1){ //如果?后的值不等于1表示没有刷新

url += "?1"; //把变量 url 的值加入 ?1

self.location.replace(url); //刷新页面

}
}

reurl();//执行这个函数
</script>

由于 点击文章后 返回朋友圈 数据会加载不出来,所以添加强制刷新一次,看那个JS 大佬 有空修一下吧。

文件下载 https://pan.cbbkk.com/friends.rar 解压上传后,修改CSS文件中的字体引用地址。

记得修改代码中的2个js,1个css 跟 error_img 图片 链接位置。 完成!