Folo 桌面端 v0.1.2 阅读体验升级解析自定义 CSS 注入、Zen 全屏专注模式与订阅徽标管理本文基于仓库中的官方更新说明 apps/desktop/changelog/0.1.2.md结合桌面端渲染层源码逐项还原 v0.1.2 的三大功能落地细节可为条目内容视图注入自定义 CSS、新增 Zen 全屏专注阅读模式、支持隐藏订阅源旁的 Boost / Claimed 等特殊徽标。读完你将清楚这些功能在设置面板中的入口、它们背后的 UI 设置模型与渲染机制以及 v0.1.2 对离线加载等体验问题的修复范围。Folo项目根 README 将其定位为 “AI RSS Reader”桌面端的每次迭代都会在 apps/desktop/changelog 目录留下一份格式统一的发布说明。v0.1.2 是一份以“阅读体验打磨”为核心的早期版本它没有堆砌新模块而是把力气花在了正文区可定制化、沉浸式阅读与信息噪音收敛上。下面逐条展开。版本概览v0.1.2 更新了什么按 0.1.2.md 的官方分类本次更新分为两个部分分类内容对应正文章节Features新功能支持自定义 CSS 并应用到条目内容视图自定义 CSSFeatures新增 Zen 模式全屏无打扰阅读全文并优化全屏下 ToC 目录组件体验、左侧新增精简时间线Zen 模式Features支持隐藏订阅源周围多余的徽标如 Claim、Boost订阅徽标管理Improvements修复离线状态下条目列表无法加载的问题离线与性能改进Improvements优化部分场景的性能体验同上Improvements微调部分组件 UI使其观感更自然同上下文将每个条目拆解到源码层面说明“设置在哪、数据怎么存、最终怎么生效”。1. 自定义 CSS为条目正文注入任意样式1.1 功能入口与使用方式在桌面端设置面板中打开“外观”Appearance向下滚动到Customization自定义分组即可看到 “Custom CSS” 设置项其按钮文案为 “Edit”功能描述是 “Custom CSS style for content.”详见 locales/settings/en.json 中的appearance.custom_css.*。点击 “Edit” 会弹出一个可调整大小的编辑器模态框默认宽度 700px、高度为窗口高度减 200px内部加载的是项目内置的 CSS 编辑器组件CSSEditor实现在 appearance.tsx编辑器采用懒加载lazy(() import(../../editor/css-editor))仅在实际打开时拉取编辑器代码避免拖慢设置页首屏。输入过程中每敲入一个字符都会立即通过setUISetting(customCSS, value)实时写入设置原子因此正文区样式是即时预览的无需保存即可看到效果。模态框提供Reset重置与Save保存两个按钮重置会恢复打开对话框时记录的initialCSS直接关闭或按 Esc 退出useEffect清理函数也会回滚到initialCSS只有点击 Save 提交后修改才会被保留。1.2 数据模型一个存在本地的 UI 设置自定义 CSS 对应的设置键是UISettings.customCSS它是一个字符串默认值为空字符串定义在 packages/internal/shared/src/settings/defaults.ts。一个值得注意的细节在 apps/desktop/layer/renderer/src/atoms/settings/ui.tsuiServerSyncWhiteListKeys与服务器同步的 UI 设置白名单中customCSS这一项目前是被注释掉的。这意味着可以推断自定义 CSS 在设计上更偏向“纯本地偏好”不会随账号同步到其他设备——因此如果你在多台设备上都有特殊样式需求需要在每台设备上分别配置。这段注释也侧面印证了该功能在引入时被刻意限制在本地作用域。1.3 注入原理ShadowDOM MemoedDangerousHTMLStyleCSS 真正“生效”的位置是文章正文布局组件 ArticleLayout.tsx。其核心调用链为通过useUISettingKey(customCSS)订阅当前自定义 CSS 内容在渲染正文时正文内容被包裹在ShadowDOM中以便隔离样式、避免外部样式污染正文当customCSS非空时在 ShadowDOM 内插入MemoedDangerousHTMLStyle{customCSS}/MemoedDangerousHTMLStyle把用户书写的样式表原样注入到正文的样式作用域内。因此自定义 CSS 的生效范围是条目内容Entry content视图也就是每篇文章正文的渲染区域由于注入发生在 ShadowDOM 内部理论上你可以覆盖正文区的排版、配色、间距、图片表现等任何可被 CSS 影响的细节该设置同时被正文列表之外的预览场景引用如 EntryContentForPreview.tsx说明只要有正文渲染的地方都遵循同一套 CSS 注入逻辑。1.4 典型用法举例结合“CSS 作用于内容区 支持深浅色主题”的前提下面给出可自行尝试的示例请在你的 Custom CSS 编辑器中输入并即时预览/* 示例让正文中的图片更圆润 */ .entry-content img { border-radius: 8px; } /* 示例在浅色模式下给正文链接加下划线深色模式下保持原样 */ media (prefers-color-scheme: light) { .entry-content a { text-decoration: underline; } }需要注意具体可用的类名取决于渲染器的 HTML 结构动手前建议先用开发者工具检查正文 DOM上述仅为说明“任意 CSS 均可注入”这一能力并非文档承诺的固定类名契约。2. Zen 模式全屏无打扰阅读2.1 发布说明中的能力描述按 0.1.2.md 的官方描述Zen 模式要解决的是“沉浸感”问题全屏阅读全文进入 Zen 模式后以全屏形态展示文章正文不受侧栏、工具栏等干扰优化全屏下的 ToCTable of Contents目录组件体验全屏大宽幅下目录组件被重新打磨左侧新增一条精简时间线brief timeline在全屏阅读的同时可以在左侧看到精简的文章时间线方便在长文中定位上下文。2.2 源码中的实现痕迹桌面端渲染层可以观察到 Zen 模式对布局的真实影响。例如条目头部组件 EntryHeaderReadHistory.tsx 中就有专门针对该模式的定位类zen-mode-macos:left-12 absolute left-5 top-0 flex h-full items-center gap-2 text-body leading-none这段 Tailwind 类名说明进入 Zen 模式后阅读历史等信息在macOS 下的水平偏移会被修正由默认left-5调整到left-12从而与全屏布局中的其他元素对齐。可以推断 Zen 模式在实现上以zen-mode一类的前缀标记贯穿相关组件各组件针对该模式给出差异化的排布。除此之外由于 v0.1.2 是早期版本后续 changelog 目录 中更新的版本说明仍持续记录了对全屏 / 阅读体验的优化可视为该功能方向的延续。客观说明Zen 模式属于“视觉布局”类功能代码中主要通过状态 样式类协同实现并不存在独立的数据模型。对“左侧精简时间线”的具体交互形态建议以安装 v0.1.2 客户端后的实际表现为准。3. 隐藏订阅源的特殊徽标3.1 一个名为 hideExtraBadge 的开关该功能对应 UI 设置项hideExtraBadge在设置面板“外观 → 订阅列表Subscription List”分组中以 “Hide Special Badges” 名称出现其英文描述为“Hide the special badges of the feed in the sidebar, e.g. Boost, Claimed.”隐藏侧栏中订阅源的特殊徽标如 Boost、Claimed。翻译文案同样位于 locales/settings/en.json。设置项仅在桌面端展示hide: isMobile配置入口见 appearance.tsx。在设置模型中有三层信息与之相关默认值hideExtraBadge: false默认显示徽标见 defaults.ts付费门槛该设置被标记为SettingPaidLevels.Basic等级见 packages/internal/shared/src/settings/constants.tsBasic 为普通订阅档位增强同步hideExtraBadge属于enhancedUISettingKeys意味着它走增强设置通道本地下发 / 同步逻辑见 ui.ts。3.2 徽标是什么认领证书 Claimed / Boost这些“特殊徽标”并非普通订阅源的 favicon而是与认领Claim机制相关的证书类标记。核心渲染组件是 feed-certification.tsx 中的FeedCertification当订阅源/列表被其所有者本人认领时渲染一枚橙色证书图标i-mgc-certificate-cute-fi text-orange-500Tooltip 文案为 “Claimed feed / Claimed list” 与 “Claimed by you”当被他人认领时渲染琥珀色text-amber-500证书图标Tooltip 会展示 “Claimed by owner” 并附上所有者头像点击头像可打开其用户资料抽屉底层数据依赖feed.ownerUserId与当前登录用户me?.id的比对。3.3 开关如何生效hideExtraBadge的实际消费点在 feed-title.tsx 中const hideExtraBadge useUISettingKey(hideExtraBadge) // ... {!hideExtraBadge feed.type ! inbox FeedCertification feed{feed} /}也就是说当hideExtraBadge为true时订阅源/列表标题后方的证书徽标会被整体跳过渲染同时inbox类型本身就不展示该徽标。由于FeedTitle是订阅列、条目头部等处复用度很高的标题组件这一开关的实际效果就是在界面各处收敛掉 Claimed / Boost 等“社会性噪音”只留下干净的源标题——这正呼应了发布说明中“you may not want to see”你未必想看到它们的产品动机。4. 离线与性能改进4.1 修复条目列表离线不可用v0.1.2 修复了“离线状态下条目列表无法加载Entry list cannot be loaded offline”的问题。RSS 阅读器的离线能力依赖本地已同步数据的再次读取而该问题通常发生在断网后列表数据源优先走网络层、未能正确回退到本地缓存的场景。修复后在弱网 / 断网环境中仍可翻阅此前同步过的条目列表。对离线数据链路感兴趣的读者可以在渲染层以offline为线索继续跟进相关查询与缓存代码例如 modules/entry-content/EntryContentForPreview.tsx 等文件中对离线渲染路径的处理以及同步指示器组件 settings/helper/SyncIndicator.tsx 对联网/离线状态的呈现。4.2 性能与 UI 微调另外两项属于“体验打磨”类改进优化了部分场景的性能体验并对若干组件 UI 做了更自然的微调。这类改动没有固定的可配置项属于回归风险低、体感提升型的变化通常随大版本更新说明一并发布此处不做展开。若需了解更早/更晚各版本间的演进脉络可直接翻阅 apps/desktop/changelog 目录下的版本文件。5. 小结v0.1.2 体现了 Folo 桌面端早期在产品打磨上的一条清晰主线——把“读文章”这件事做深做透可定制customCSS让正文渲染区向用户开放 CSS 注入样式改动实时预览、本地保存ArticleLayout.tsx可沉浸Zen 模式提供全屏无打扰阅读并针对 macOS 等平台在组件布局上做了专项适配EntryHeaderReadHistory.tsx可收敛hideExtraBadge让用户一键隐藏 Claimed / Boost 等特殊徽标实现“所见即所愿”feed-title.tsx更可靠修复离线场景条目列表加载叠加性能与 UI 打磨降低阅读场景的摩擦。这三个功能的共性在于它们都由同一套 UI 设置原子atoms/settings/ui.ts承载并遵循“设置面板修改 → 设置状态订阅 → 渲染层实时响应”的统一链路。理解这条链路后无论你是在调试自定义样式、排查徽标显示还是在为阅读类功能做二次开发都能快速定位到对应开关与组件。创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考