Bilibili-Evolved 动态反折叠 unfoldFeeds：折叠动态自动展开的原理与开启教程

Bilibili-Evolved 动态反折叠 unfoldFeeds：折叠动态自动展开的原理与开启教程

【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved

翻动态时经常遇到这种情况：一条 UP 主的新作品被折叠成一行小字，你得把鼠标移上去、点一下「展开」才能看全。Bilibili-Evolved 内置的「动态反折叠」组件（标识unfoldFeeds）就是替你省掉这一步的——折叠动态一出现在页面上，它就自动帮你点开。

先讲清楚它替你做了什么：见到折叠就自动展开

这个组件的全部行为可以浓缩成一句话：检测到卡片上有折叠区域，就自动点一次，把内容展开。至于动态为什么会被折叠，官方文档（registry/lib/components/feeds/unfold/index.md）列了三种常见原因：

三类原因它一视同仁。组件不关心折叠为什么发生，只关心「这张卡片上有没有可以点的折叠区」，有就点。

哪些页面会自动展开，哪些不会

组件通过urlInclude: feedsUrlsWithoutDetail声明生效范围，这份 URL 清单定义在 src/core/utils/urls.ts：

排除详情页是个刻意的取舍：详情页是单条内容的独立阅读场景，不存在「滚动加载新卡片」，自动展开几乎没有收益，反而可能打断阅读。所以它只盯着动态列表型页面干活。

三步看懂它的实现：感知、定位、点击

整个 组件定义 核心逻辑不到十行，拆成三步：

1. 感知新卡片。组件调用forEachFeedsCard（src/components/feeds/api/manager/index.ts）。这个 API 先确认当前页面属于动态页面，然后启动卡片监测，对页面上已经存在的卡片立即回调一次，之后滚动加载、切换 tab 产生的新卡片也会持续触发回调——动态反折叠正是挂在它的added回调上。
2. 定位折叠按钮。用 spin-query 的select做轮询查询：在卡片 DOM 内部反复查找.fold-hoverable（旧版折叠区类名）或.bili-dyn-item-fold（新版类名），查到非空结果才返回。之所以要轮询而不是查一次，是因为卡片刚插入页面时，内部按钮往往还没渲染出来。
3. 模拟点击。拿到按钮后执行foldButton?.click()触发一次程序化点击。可选链是兜底写法：卡片没有折叠区时foldButton为null，直接静默跳过，不报错。

added: async card => { const foldButton = await select( () => dq(card.element, '.fold-hoverable, .bili-dyn-item-fold'), ) foldButton?.click() }

V1 还是 V2，卡片管理器怎么选

第 1 步的「感知」背后有两代卡片管理器实现，isV2Feeds()按当前页面自动挑选：专栏动态页（www.bilibili.com/opus/{id}）直接走 V2；其余情况下，Cookie 里hit-dyn-v2大于 0（说明你命中过新版动态）且页面是t.bilibili.com或space.bilibili.com，走 V2，否则回退 V1。两代实现都继承自同一个抽象基类（manager/base.ts），差异主要在「怎么认出这是一张卡片」：

无论哪一代，新卡片入列后都会派发AddCard事件、执行注册好的added回调——这就是动态反折叠的切入点，组件本身不需要知道自己面对的是旧版还是新版动态。

怎么开启，以及要清楚它的边界

开启步骤：

1. 安装 Bilibili-Evolved 脚本，打开 B 站任意页面；
2. 点开页面上的脚本设置面板，进入组件列表；
3. 切到「动态」分类（组件标签feeds），找到「动态反折叠」并打开开关；
4. 刷新或继续浏览动态流，折叠卡片出现即自动展开。

用之前有几个边界要心里有数：

• 零配置项：源码里它没暴露任何选项，行为固定为「见到折叠就展开」，没有可调节项，也属正常设计；
• 对审核折叠可能无效：它只做点击动作。如果平台服务端就没返回可展开的内容，点了也不会有可见变化，这是平台侧限制；
• 只在列表型页面生效：动态详情页不在覆盖范围（见上表）；
• 新旧动态都兼容：折叠按钮同时匹配新旧两套类名，卡片管理器又按 Cookie 自动选 V1/V2，所以页面迭代时无需手动切换。

对普通用户，它砍掉了反复悬停、点「展开」的重复操作；对想深挖的开发者，这不到十行的入口是个绝佳的最小样本——沿着 组件定义 一路追到卡片管理器和 spin-query，正好完整走一遍 Bilibili-Evolved「元数据 → 卡片监测 → DOM 操作」的整条链路。

【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved