惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

W
WeLiveSecurity
The GitHub Blog
The GitHub Blog
Engineering at Meta
Engineering at Meta
Microsoft Azure Blog
Microsoft Azure Blog
The Register - Security
The Register - Security
Stack Overflow Blog
Stack Overflow Blog
博客园 - 三生石上(FineUI控件)
T
Threat Research - Cisco Blogs
S
SegmentFault 最新的问题
V2EX - 技术
V2EX - 技术
Hacker News: Ask HN
Hacker News: Ask HN
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
P
Proofpoint News Feed
J
Java Code Geeks
Microsoft Security Blog
Microsoft Security Blog
M
MIT News - Artificial intelligence
AI
AI
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
P
Proofpoint News Feed
Hacker News - Newest:
Hacker News - Newest: "LLM"
B
Blog
N
News and Events Feed by Topic
N
News | PayPal Newsroom
Google DeepMind News
Google DeepMind News
酷 壳 – CoolShell
酷 壳 – CoolShell
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
WordPress大学
WordPress大学
C
Cybersecurity and Infrastructure Security Agency CISA
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 【当耐特】
U
Unit 42
腾讯CDC
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
The Cloudflare Blog
H
Help Net Security
Recent Announcements
Recent Announcements
P
Privacy & Cybersecurity Law Blog
IT之家
IT之家
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Security Archives - TechRepublic
Security Archives - TechRepublic
L
LINUX DO - 热门话题
Martin Fowler
Martin Fowler
MongoDB | Blog
MongoDB | Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
H
Heimdal Security Blog
博客园 - 聂微东
S
Securelist
大猫的无限游戏
大猫的无限游戏
Cloudbric
Cloudbric
Cisco Talos Blog
Cisco Talos Blog

Flatpaper Demo

FlatPaper 文章顶部图:top_img 与 post_top_img 配置 | Flatpaper Demo FlatPaper 现在支持 Google Fonts 了 | Flatpaper Demo FlatPaper 首页 Hero:开屏、背景图与贴纸配置 | Flatpaper Demo 主题效果总览:文章块与交互组件预览 | Flatpaper Demo 更新日志:FlatPaper 现已支持赞赏码 | Flatpaper Demo FlatPaper 内置图标速查 | Flatpaper Demo Hello World | Flatpaper Demo 多级标题测试:从一级标题到六级标题 | Flatpaper Demo 多级标题测试:从一级标题到六级标题 外链与脚注测试:链接样式、长 URL 与引用来源 | Flatpaper Demo 外链与脚注测试:链接样式、长 URL 与引用来源 用 VitePress 风格的 note 容器语法 | Flatpaper Demo 用 VitePress 风格的 note 容器语法 图片排版预览:多图、图注与长图测试 | Flatpaper Demo 图片排版预览:多图、图注与长图测试 多语言代码示例:用于测试代码高亮 | Flatpaper Demo 多语言代码示例:用于测试代码高亮 在 Hexo 中使用 NOTE 提示块 | Flatpaper Demo 在 Hexo 中使用 NOTE 提示块 Hello World FlatPaper 主题页面检查清单 | Flatpaper Demo FlatPaper 主题页面检查清单 Markdown 元素展示:表格、代码与引用 | Flatpaper Demo Markdown 元素展示:表格、代码与引用 FlatPaper 设计札记:纸感、留白与轻量界面 | Flatpaper Demo FlatPaper 设计札记:纸感、留白与轻量界面 周末散步记录:从街角咖啡店到河岸 | Flatpaper Demo 周末散步记录:从街角咖啡店到河岸 开发日志:导航、归档与空状态 | Flatpaper Demo 开发日志:导航、归档与空状态
FlatPaper 主题重磅更新:优雅的朋友圈 (Friend Circle) 信息流 | Flatpaper Demo
Author · 2026-06-24 · via Flatpaper Demo
主题开发

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

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

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

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

  1. 手帐胶带与拍立得相框:每篇朋友圈动态都包裹在带有虚线边框、内嵌坐标网格的「纸片」中。左上角贴着标志性的斜角彩色胶带,头像则采用了带有白边和底部投影的拍立得微倾斜相框。
  2. 彩色分页书签(Tab):卡片的右侧点缀了一抹对应主色调的彩色书签。当你将鼠标悬浮(Hover)在卡片上时,卡片会轻微浮起回正,右侧的标签则会像抽屉一样灵动地向外探出 14px
  3. 色彩循环系统:动态列表遵循了「黄、蓝、粉、绿」的四色 4n 循环体系,每一片纸都有属于自己独特的微小倾斜角度(-0.25deg0.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 进行抓取,无需使用服务器,依托免费的 GitHub Actions 进行更新。

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

在 GitHub 上部署 Firend Circle Lite

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

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

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

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

直接使用 RAW 链接即可:

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

创建朋友圈所需的页面

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

1
2
3
4
5
6
7
8
---
title: 朋友圈
type: friends-feed
comments: fasle
fcl_all_json: https://raw.githubusercontent.com/<UserName>/<RepoName>/refs/heads/page/all.json
page_size: 20
source_label:
---

由于链接配置在页面里,支持不同的页面可以使用不同的链接,实现不同内容的展示。

然后更新导航链接

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

  1. 确保你的导航菜单(menu)里添加了朋友圈页面(主题新增了 userscompassaperture 作为图标!):
    1
    2
    3
    4
    5
    6
    7
    menu:
    Friends:
    link: /friends/
    icon: users
    Moments:
    link: /friends/feed/
    icon: compass

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

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