特别鸣谢

ID站点备注
【冰】冰卡诺小冰博客友链朋友圈理念奠基人,初代友链朋友圈方案作者(前后端),冰老师YYDS
【糖】AkilarAkilarの糖果屋历代朋友圈前端方案、插件方案编写者。(自己鸣谢自己有点不好意思啊)
【红】heoHEO友链朋友圈视觉设计,UI方案多样化
【茶】贰猹贰猹の小窝友链朋友圈后端维护,3.0方案编写者,多主题友链抓取适配,朋友圈售后中流砥柱
RaXianch快乐咸鱼の RaXianch 窝友链朋友圈后端维护,多主题友链抓取适配

安装

  1. 安装插件,在博客根目录[Blogroot]下打开终端,运行以下指令(与旧版前端方案不兼容,如有安装旧版请先卸载):

    1
    2
    npm uninstall hexo-butterfly-fcircle --save
    npm install hexo-filter-fcircle --save
  2. 添加配置信息
    在站点配置文件_config.yml或者主题配置文件例如_config.butterfly.yml中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # fcircle
    # see https://akilar.top/posts/8480b91c/
    fcircle:
    enable: true #控制开关
    apiurl: https://hexo-friendcircle-api.vercel.app/api #api地址
    initnumber: 20 #【可选】页面初始化展示文章数量
    stepnumber: 10 #【可选】每次加载增加的篇数
    css: https://npm.elemecdn.com/hexo-filter-fcircle/assets/css/butterfly.css #【可选】开发者接口,自定义css链接
    js: https://npm.elemecdn.com/hexo-filter-fcircle/assets/js/fcircle.js #【可选】开发者接口,自定义js链接
    fetchJS: https://npm.elemecdn.com/hexo-filter-fcircle/assets/js/fetch.js #可选】开发者接口,自定义fetchJs链接
    path: #【可选】fcircle的路径名称。默认为 fcircle,生成的页面为 fcircle/index.html
    front_matter: #【可选】fcircle页面的 front_matter 配置
    title: 朋友圈
    comments: false
  3. 参数释义
参数备选值/类型释义
enabletrue/false控制开关
apiurlURLapi链接,配置教程参看友链朋友圈 3.0 食用说明书
initnumbernumber【可选】填写阿拉伯数字,页面展示文章数量,默认20
stepnumbernumber【可选】填写阿拉伯数字,每次加载增加的篇数,默认10
cssURL【可选】开发者接口,自定义css链接
jsURL【可选】开发者接口,自定义js链接
fetchJsURL可选】开发者接口,自定义fetchJs链接
pathstring【可选】字符串,fcircle的路径名称。默认为 fcircle,生成的页面为 fcircle/index.html
front_matterobject【可选】写法见上文示例,fcircle页面的 front_matter 配置

截图

  1. SAO-UI-默认样式

    • Author:Akilar
    • 所用主题:无
    • 样式CDN链接:
      1
      2
      3
      4
      # css
      https://npm.elemecdn.com/hexo-filter-fcircle/assets/css/default.min.css
      # js
      https://npm.elemecdn.com/hexo-filter-fcircle/assets/js/fcircle.min.js
    • 预览效果截图:
  2. SAO-UI-适配butterfly主题样式

    • Author:Akilar
    • 所用主题:hexo-theme-butterfly
    • 样式CDN链接:
      1
      2
      3
      4
      # css
      https://npm.elemecdn.com/hexo-filter-fcircle/assets/css/butterfly.min.css
      # js
      https://npm.elemecdn.com/hexo-filter-fcircle/assets/js/fcircle.min.js
    • 预览效果截图:

欢迎投稿

https://github.com/Akilarlxh/hexo-filter-fcircle/issues