在 Bilibili-Evolved 中为视频推荐列表添加投稿时间显示：`show-upload-time` 组件配置与源码解析
前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载在哔哩哔哩视频播放页面的右侧推荐列表中每张推荐卡片通常只显示 up 主名称无法直接判断视频的新旧。Bilibili-Evolved哔哩哔哩增强脚本内置的「显示视频投稿时间」组件showUploadTime解决了这一问题它会自动拉取推荐视频的投稿时间并按用户自定义的格式文本替换 up 名显示。本文以 组件说明文档 为主体结合其源码实现完整讲解该组件的功能、时间格式语法、配置方法及底层工作原理读完你既能熟练配置该组件也能理解其如何通过 Vue 数据层与IntersectionObserver实现跨页面适配。功能概述该组件的目标场景是视频播放页面的推荐列表含普通视频页与合集/稍后再看等列表页。开启后推荐视频卡片上的 up 主名称位置会被替换为「up 名 投稿时间」的组合文本例如默认格式up · yyyy-MM-dd渲染出的效果为某up主 · 2024-10-17组件元数据定义位于 registry/lib/components/video/player/show-upload-time/index.ts关键信息如下displayName显示视频投稿时间urlInclude: videoUrls仅在与 视频 URL 模式 匹配的页面上启用覆盖//www.bilibili.com/video/、拜年纪等活动页/festival/以及稍后再看、收藏夹连播、UP 主连播等合集类页面/list/、/medialist/play/options.formatString可配置的文本格式默认值为up · yyyy-MM-dd并带有校验器——若用户输入为空或纯空白字符则回退为旧值见 index.ts时间格式占位符详解组件说明文档中定义了完整的占位符语法即「时间格式替换 up 名的文本格式」配置面板中输入的任意非空字符串都会按下面的规则逐项解析占位符含义说明y年支持y、yy、yyyy等多位写法按位数截取年份后几位M月1–12无前导零d日1–31无前导零h时0–23无前导零m分0–59无前导零s秒0–59无前导零q季度1–4按(月份 3) / 3向下取整计算upup 名替换为推荐视频原始 up 主名称\r回车符写入 ASCII 回车符\n换行符写入换行符实现两行显示\t制表符写入制表符实现对齐这些规则与 格式化函数getFormatStr的实现一一对应。该函数接收三个参数投稿时间time、格式串format与 up 名upName处理分三步年份处理通过正则/(y)/匹配连续的y用String(fullYear).substring(4 - y.length)按位数截取——写一个y得后一位、两个y得后两位yyyy得到完整四位数年份其余时间单元遍历formatMapM、d、h、m、s、q单字符写法输出原数字如1多字符写法输出补零后的两位如01自定义文本遍历constMap将up替换为 up 名将\\r、\\n、\\t转义序列替换为真正的回车、换行、制表符。注意这里的月、日、时、分、秒与季度均不自动补零除非写重复字符这一点与多数编程语言的Date格式化惯例一致配置时可按需书写MM-dd或M-d。常用格式示例up · yyyy-MM-dd默认某up主 · 2024-10-17yyyy年M月d日2024年10月17日up\n发布于yyyy将up名与年份分成两行显示配合下方样式规则中的white-space: preq季度 yyyy4季度 2024投稿时间数据的获取链路推荐列表卡片本身并不暴露pubdate因此组件需要按 aid 逐个请求视频信息。该功能复用了 VideoInfo 类通过fetchInfo()请求https://api.bilibili.com/x/web-interface/view?aidxxx或?bvid将响应的data.pubdate保存到实例见 video-info.ts。pubdate是秒级 Unix 时间戳源码中统一通过new Date(pubdate * 1000)转为Date对象后再交给getFormatStr格式化见 defaultVideo.ts 与 mediaListVideo.ts。两种页面结构的适配实现从源码结构看组件针对两类页面分别实现了Video接口video.ts 定义接口契约含settingChange与urlChange两个方法并在入口处通过 URL 模式匹配选择具体实现index.ts普通视频页面DefaultVideo对应 defaultVideo.ts适用//www.bilibili.com/video/等普通视频页通过 DOM 选择器#reco_list定位推荐列表容器若为空则回退到.recommend-list-v1以兼容 2024.10.17 之后的 B 站前端改动见 defaultVideo.ts使用getVue2Data()从 DOM 节点反解出 Vue 2 组件实例读取$children中类名为video-page-operator-card-small/video-page-card-small的卡片通过 Vue 的$watch监听recListItemsdeep immediate推荐列表数据变更时自动重新渲染投稿时间defaultVideo.ts。合集/列表类页面MediaListVideo对应 mediaListVideo.ts适用稍后再看/list/watchlater、收藏夹连播/list/ml、UP 主连播/list/uid等合集页面定位容器为.recommend-list-container卡片类名为recommend-video-card video-card同样用getVue2Data()反解 Vue 实例$watch的对象是visibleRelated关键差异是懒加载优化合集列表较长、卡片可能未进入视口组件为每张卡片创建IntersectionObserverthreshold: 0.1仅当卡片进入视口时才发起VideoInfo请求并更新名称请求完成后立即disconnect()释放观察者已获取pubdate的卡片则同步更新、直接返回mediaListVideo.ts。统一的运行时机入口使用urlChange()监听页面跳转并在playerReady()等待播放器就绪后再执行首次渲染同时通过addComponentListener(showUploadTime.formatString, ...)监听设置面板中格式串的实时修改修改后立即以forceUpdate true强制重绘所有卡片index.ts。这是理解「改格式即时生效」这一交互行为的关键调用链。样式适配多行显示的支撑投稿时间替换 up 名后可能包含换行符但 B 站卡片的 up 名区域默认单行截断-webkit-line-clamp。组件通过 show-upload-time.scss 覆盖样式使其支持多行对旧版.video-page-card、2023.04.30 版本的.video-page-card-small、2024.10.17 版本的.video-page-operator-card-small以及合集页.recommend-video-card分别声明white-space: pre !important并解除-webkit-line-clamp限制保证\n换行与\t缩进能如实呈现该样式通过instantStyles异步按需加载index.ts不影响其他页面。使用与配置总结安装Bilibili-Evolved 安装后在设置面板的「功能」分类中找到「显示视频投稿时间」并开启组件tags为 video入口脚本见 bilibili-evolved.ts配置展开组件选项「文本格式」按上表占位符自由组合例如up · yyyy-MM-dd、yyyy年M月d日或带换行的两行布局留空或纯空白会被校验器拒绝并回退旧值生效范围普通视频页、活动页与合集类列表页切换视频、列表懒加载滚动时会自动更新限制组件依赖 B 站前端 DOM 结构与 Vue 数据字段如reco_list、recListItems、visibleRelated当 B 站改版导致getRecoList返回结构异常时源码会在控制台输出「结构获取失败」及页面 URL 日志便于定位适配问题见 defaultVideo.ts 与 mediaListVideo.ts。该组件是理解 Bilibili-Evolved「侵入 B 站 Vue 组件数据层 按需懒加载 滚动监听」这一类功能实现思路的典型示例其格式化逻辑getFormatStr亦可在自己的用户脚本中直接借鉴复用。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐Bilibili-Evolved 关注时间显示组件从功能说明到源码级实现剖析Bilibili Evolved 关注时间显示组件从功能说明到源码级实现剖析 导读 “关注时间显示”是哔哩哔哩增强脚本 Bilibili Evolved 内置前端音视频Bilibili-Evolved 播放器投影player-shadow组件详解为播放器添加主题色投影Bilibili Evolved 播放器投影player shadow组件详解为播放器添加主题色投影 播放器投影player shadow是 Bili前端音视频Bilibili-Evolved 组件解析总是显示视频时长alwaysShowDuration的样式实现与使用指南Bilibili Evolved 组件解析总是显示视频时长alwaysShowDuration的样式实现与使用指南 导读 总是显示视频时长 always前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考