FlatPaper(v0.3.1) 主题重磅更新：优雅的朋友圈 (Friend Circle) 信息流 | Flatpaper Demo

在这个信息茧房愈发封闭的时代，独立博客之间的互联显得尤为珍贵。如果你也拥有一群热爱写作的博主好友，那你一定对「朋友圈（Friend Circle）」这个概念不陌生——它能将你友链中朋友们的最新文章汇聚在一起，形成一个像社交媒体 Feed 流一样的页面。

今天，FlatPaper 主题已正式集成 Friend-Circle-Lite (FCL) 朋友圈功能！

纸质感与动态设计的完美碰撞

Flatpaper 的朋友圈信息流与主题标志性的「纸质手账风」视觉设计完美融合：

1. 手帐胶带与拍立得相框：每篇朋友圈动态都包裹在带有虚线边框、内嵌坐标网格的「纸片」中。左上角贴着标志性的斜角彩色胶带，头像则采用了带有白边和底部投影的拍立得微倾斜相框。
2. 彩色分页书签（Tab）：卡片的右侧点缀了一抹对应主色调的彩色书签。当你将鼠标悬浮（Hover）在卡片上时，卡片会轻微浮起回正，右侧的标签则会像抽屉一样灵动地向外探出 14px。
3. 色彩循环系统：动态列表遵循了「黄、蓝、粉、绿」的四色 4n 循环体系，每一片纸都有属于自己独特的微小倾斜角度（-0.25deg 到 0.3deg 不等），打破了常规列表的死板，让整个 Feed 流像是一叠随意堆放但又错落有致的卡片。
4. 友链页面设计统一：在引入朋友圈的同时，我们也同步升级了传统的 /links/ 友链页面。现在两边的卡片视觉语言已经达到 100% 的高度统一，无论是单页导航还是信息流速览，都能获得连贯的视觉享受。

演示站的预览界面：Flatpaper - DEMO

极致轻量的技术实现

除了在视觉上做到极致，FlatPaper 在底层架构上也坚持了一贯的 「零外部依赖、极致轻量」 的原则：

• Vanilla JS 动态渲染：放弃了引入 Vue、React 等繁重的框架，我们在 main.js 中手写了纯原生 JavaScript 的异步渲染逻辑。从拉取 JSON 到构建 DOM 节点，一切都在浏览器最底层的 API 上高效运行。
• Hexo 纯静态桥接：自带了 fcl-friend-json.js 生成脚本。你只需要正常配置 Hexo 的友链数据，主题会在构建时自动生成标准的 all.json 静态数据接口，真正实现了零后端的全静态化托管。
• 原生暗色模式：深色模式下，信息流卡片的线格、投影和标签边框会平滑过渡到夜间纸张风格，不仅护眼，而且完全无需加载额外的 CSS 负担。

如何开启体验？

使用 Firend Circle Lite 抓取 RSS

不需要服务器，友链通过 Firend Circle Lite 进行抓取，无需使用服务器，依托免费的 GitHub Actions 进行更新。

主题会在生成静态文件时，生成 FCL 所需的 friend.json 。

在 GitHub 上部署 Firend Circle Lite

在 GitHub 上部署通过 Fork 部署 Firend Circle Lite 即可。

编辑 FCL 的 conf.yaml ，设置域名即可

spider_settings:
  enable: true
  json_url: "https://flatpaper.nep.me/friend.json"
  article_count: 5

运行 Action 后，可以在 page 分支获取到 all.json ，也不需要解析域名。

直接使用 RAW 链接即可：

https://raw.githubusercontent.com/<UserName>/<RepoName>/refs/heads/page/all.json

创建朋友圈所需的页面

在主题的 source/friends/ 下面创建 index.md ，填写下面的内容，替换 fcl_all_json 的链接。

---
title: 朋友圈
type: friends-feed
comments: false
fcl_all_json: https://raw.githubusercontent.com/<UserName>/<RepoName>/refs/heads/page/all.json
page_size: 20
source_label:
---

链接配置在页面里进行设置，所以支持不同的页面可以使用不同的链接，实现不同内容的展示。

然后更新导航链接

在主题的配置文件 _config.flatpaper.yml 中：

1. 确保你的导航菜单（menu）里添加了朋友圈页面（主题新增了 users、compass 或 aperture 作为图标！）：

   menu:
     Friends: 
       link: /friends/
       icon: users
     Moments:
       link: /friends/feed/
       icon: compass

这不仅是一个功能的增加，更是 Flatpaper 对独立博客「去中心化阅读」体验的一次致敬。

快去升级你的 FlatPaper 主题，享受属于你和朋友们的优雅阅读时光吧！