Bilibili-Evolved 自定义顶栏Custom Navbar完整指南替换 B 站顶栏、配置项详解与源码原理【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved自定义顶栏是哔哩哔哩增强脚本 Bilibili-Evolved 中用于替换原版主站顶栏的样式类功能组件它覆盖了 B 站主站、空间、动态、搜索、直播黑屏页等多个域名的页面导航区域并允许用户精细控制顶栏的高度、配色、模糊、投影、Logo 与消息提醒样式等外观行为。阅读本文后你将掌握该组件的启用方式、全部选项的取值与默认值、与反广告插件配合的性能优化做法以及从入口装载到元素渲染的底层实现原理。输出文章功能定位替换而非修补自定义顶栏组件源码名customNavbar显示名「自定义顶栏」在 index.ts 中定义其核心职责是使用脚本渲染的顶栏替换原版的主站顶栏并且只在 B 站主站范围内生效非主站页面不替换。生效范围urlInclude从 urls.ts 可见组件覆盖//www.bilibili.com、//t.bilibili.com、//search.bilibili.com、//space.bilibili.com、//account.bilibili.com、//pay.bilibili.com、//member.bilibili.com、//big.bilibili.com、//message.bilibili.com、//app.bilibili.com、//passport.bilibili.com、//live.bilibili.com/blackboard/、//music.bilibili.com等站点。排除范围urlExclude组件不会替换投票 H5 页//t.bilibili.com/vote/h5/index/#/result、抽奖 H5 页、视频投稿页//member.bilibili.com/video/upload、创作中心//member.bilibili.com/platform、space.bilibili.com/ajax/、game.bilibili.com/、mooc网课、气泡发布页与玩具商城等页面。iframe 与 HTML 判断entry.ts 中isIframe()或isNotHtml()命中时直接返回不挂载组件避免在嵌套页面中破坏布局。值得注意的是B 站部分页面如空间、动态详情等存在定制顶栏此时脚本顶栏仍会渲染但个别选项如「全局固定」会因页面自身样式而被忽略——这正是文档中「除了一部分有 b 站定制顶栏的页面会忽略此选项」的由来对应的排除列表在 entry.ts 中维护如space.bilibili.com、/read、/opus、/account/history等。与反广告插件配合拦截消息 iframe 提升性能原版顶栏中内嵌了一个消息中心的 iframe它会随页面加载并持续请求消息数据。启用自定义顶栏后原版顶栏整体被隐藏此 iframe 便失去了展示意义。此时可在反广告插件如 ABP、uBlock Origin中配置如下两条规则直接阻止该 iframe 的加载以提升页面性能*://message.bilibili.com/pages/nav/index_new_pc_sync *://message.bilibili.com/pages/nav/index_new_sync两条规则分别对应PC 端与移动/新版同步两套消息 iframe 入口。由于脚本顶栏自带消息中心入口见下文「内置元素」拦截后功能不受影响。选项详解全部配置项、默认值与取值范围所有选项都在 index.ts 中通过defineOptionsMetadata定义。下表汇总了文档列出的全部公开选项及源码中的默认值/取值范围选项显示名默认值类型/范围说明globalFixed全局固定false开关顶栏固定显示滚动页面时仍可见fill主题色填充false开关用通用设置中的主题色填充顶栏背景transparent透明填充true开关有顶部横幅时顶栏背景变为透明 阴影blur背景模糊false开关背景半透明模糊非常消耗图形性能慎用shadow投影true开关顶栏下方增加一小段投影seasonLogo使用季节 Logofalse开关用 B 站首页特殊 Logo 替换顶栏 LogothemeLogo使用主题色 Logotrue开关隐藏选项控制 Logo 是否跟随主题色touch触摸模式false开关一级入口点击不跳转方便触屏openInNewTab新标签页打开true开关顶栏内链接是否在新标签页打开refreshOnPopup自动刷新数据true开关有弹窗的入口在鼠标经过时自动刷新数据height顶栏高度 (px)50数字50–64自定义顶栏高度B 站原版为64pxnotifyStyle消息提醒样式数字枚举数字 / 隐藏 / 点状searchBarWidth搜索栏宽度 (%)15滑块8–64搜索栏占顶栏的比例linkPopupContentAlignStyle链接对齐样式左侧对齐枚举纯链接弹窗内链接文字对齐方式hidden隐藏的元素见下文隐藏选项控制哪些内置元素不显示order元素顺序{}隐藏选项控制元素排列顺序padding边缘间距 (%)10隐藏选项顶栏左右边缘留白其中hidden的默认值在源码中为[blank1, blank4, drawing, music, gamesIframe, bangumi, match, creations]即默认隐藏四个弹性空白中的两个以及绘画、音乐、游戏、番剧、赛事、创作中心等入口。选项如何落到页面上从 entry.ts 可以看到选项生效的底层机制——脚本通过addComponentListener监听每个选项的变化并将其写入 CSS 变量或 body 类名customNavbar.padding→ 写入--navbar-bounds-padding百分比customNavbar.searchBarWidth→ 写入--navbar-search-widthvw 单位customNavbar.globalFixed→ 切换 body 的fixed-navbar类customNavbar.height→ 由 CustomNavbar.vue 写入--navbar-heightpx其默认值50px也在该文件顶部的html选择器中声明fill/shadow/blur三个布尔选项 → 通过customNavbar.toggleStyle(value, style)动态增删 Vue 实例上的fill、shadow、blur样式类。正因为监听机制存在用户在设置面板中实时修改选项即可即时生效无需刷新页面。外观行为的实现细节主题色填充fill当fill开启且非透明状态时顶栏背景使用var(--theme-color)即通用设置中的主题色前景文字使用var(--foreground-color-d)若同时开启模糊背景变为var(--theme-color-60)半透明主题色。投影则使用var(--theme-color-30)的主题色阴影。透明填充transparent透明填充逻辑集中在 transparent-fill.ts在音乐、空间等transparentFillUrls页面中直接启用在 B 站主站页面通过sq()轮询查找.animated-banner video、.banner-img img、#banner_link等横幅元素只有检测到横幅图片时才切换为透明样式透明样式下背景为transparent并在顶栏上方叠加一段linear-gradient(to bottom, #000a 0, #0004 65%, transparent 100%)的渐变色罩保证顶部横幅上的图标文字可读透明填充与「隐藏横幅」hideBanner组件联动若用户启用了隐藏横幅则透明填充自动失效。背景模糊blur模糊效果通过backdrop-filter: blur(24px)实现同时将背景色改为半透明白色#fffc暗色模式下则使用--be-color-navbar-bg-blur默认#2228。文档特别强调该效果非常非常消耗图形性能因为backdrop-filter需要对顶栏下方的整块区域进行实时采样与模糊运算低端设备上建议保持关闭。投影shadow非透明状态下亮色主题使用#0002 0 1px 10px 1px阴影暗色主题使用var(--be-color-navbar-shadow)默认rgba(shadow, 0.4)与主题色填充组合时使用主题色阴影。上述样式均可在 CustomNavbar.vue 的 SCSS 中查到。消息提醒样式notifyStyle该选项由 notify-style.ts 实现枚举值为数字、隐藏、点状。切换时脚本向document.documentElement写入data-navbar-notify-style属性值为number/hidden/dot各入口的提醒徽标样式由 CSS 依据该属性切换。链接对齐样式linkPopupContentAlignStyle由 link-popup-content-align-style.ts 实现枚举值为左侧对齐、居中对齐、右侧对齐通过data-navbar-link-popup-content-align-style属性left/center/right作用于纯链接弹窗内的文字对齐。顶栏的结构与内置元素自定义顶栏的模板在 CustomNavbar.vue 中整体是一个rolenavigation的.custom-navbar容器左右两侧是受--navbar-bounds-padding约束的.left-pad/.right-pad中间是.custom-navbar-items列表每个元素渲染为一个CustomNavbarItem组件。内置元素的清单在 built-in-items.ts 中定义共 24 项按渲染顺序依次为弹性空白blank1→Logo→首页→番剧→排行→音乐→游戏→直播→商城→赛事→漫画→ 弹性空白blank2→搜索→ 弹性空白blank3→用户信息→消息→动态→订阅→稍后再看→收藏→历史→创作中心→投稿→ 弹性空白blank4。每个元素都实现了 CustomNavbarItemInit 接口可配置项包括name/displayName元素标识与显示名称content渲染内容Vue 组件或字符串flexStyleCSS flex 样式grow/shrink/basis默认0 0 autohref点击跳转链接active当前页高亮底部边框 加粗clickAction点击执行代码notifyCount顶部提醒数字徽标popupContent/boundingWidth/noPopupPadding/transparentPopup/lazy弹窗内容、宽度边缘检测、padding 控制、透明背景与懒加载loginRequired仅登录后显示。从代码结构可以推断该组件具备可扩展性其他功能模块可以通过registerAndGetData(CustomNavbarItems, ...)向顶栏注册自定义元素launchBar等插件体系同样能向顶栏注入入口。搜索入口search.ts即是一个典型示例它将disabled设为true从而禁用元素自身的 hover 效果但仍让内部的NavbarSearch组件正常响应交互。生命周期与设置面板卸载unload组件卸载时通过 index.ts 将页面上所有.custom-navbar与.custom-navbar-settings元素设为display: none重载reload恢复显示顶栏flex、设置面板block设置面板组件自带settings/Widget.vue作为组件图标settings/ExtraOptions.vue提供额外选项页同时注册了一个「自定义顶栏 - 功能扩展」插件向启动栏Launch Bar添加「自定义顶栏设置」动作方便在不进入设置面板的情况下快速呼出settings/NavbarSettings.vue的设置界面。常见使用建议性能优先建议保持blur背景模糊关闭同时按文档所述在反广告插件中拦截message.bilibili.com的两个消息 iframe减少后台请求。顶栏高度默认50px若追求与 B 站原版一致的视觉可手动调至64px选项上限但过高的顶栏会挤压页面可视区域。季节 Logo 的取舍seasonLogo使用首页特殊 Logo但特殊活动期间 Logo 可能与顶栏背景撞色例如白色 Logo 配白色顶栏如遇看不清的情况可关闭该选项。触屏设备开启touch后一级入口点击不再跳转避免误触如需在新标签页打开链接保持openInNewTab为默认的true即可。搜索栏宽度searchBarWidth取值范围为8%–64%默认15%可按屏幕宽度与个人习惯调整。以上所有选项均可在脚本的「自定义顶栏」设置页中即时调整无需刷新页面相关实现可进一步查阅 index.ts、CustomNavbar.vue 与 entry.ts 源码。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考