利用stylish简化B站UI，减少注意力干扰

最新推荐文章于 2025-04-01 10:40:00 发布

云稽

最新推荐文章于 2025-04-01 10:40:00 发布

阅读量972

点赞数 7

文章标签： ui

本文链接：https://blog.csdn.net/wdz512/article/details/135305963

版权

背景

我是B站的重度用户，经常要在B站上看一些知识类的视频，一般是使用网页版。但是，使用网页版有个问题是经常会被B站的首页推荐、动态栏的红色标记和搜索框的热搜吸引走注意力，不自觉地浪费时间。因此，我希望简化B站的页面，让网页版的B站更契合我使用习惯的同时，减少大数据推荐对我的干扰。于是，我借助chrome的stylish插件配置了一个简化的UI界面。

效果对比

左边是简化后的，右边是原始页面。

首页

可以看到各个分区、推荐都没有了，保证进入B站只能搜索自己需要的视频，去除一切干扰项。

搜索框

移除了热搜，只保留了搜索历史，防止搜索的时候被热门词条吸引。

搜索结果页

搜索结果页则是隐藏了头部导航条。因为登录账号后导航条的动态栏会有显示未读动态的小红点，让人忍不住点进动态页，看看关注的人新发的视频。
点进某个视频后，对应视频页的导航栏也被移除了，原因同上。

具体实现

一、安装stylish插件

该插件可以让用户自定义css样式，并注入到特定的页面中。

二、新建自定义样式

进入B站主页后，点击stylish插件，此时会出现悬浮窗，切换到editor页面，如下图所示：
1是一组自定义css样式的名称，2是代码块，每个代码块包含一组3和4。其中4是自定义的css样式，3则是样式生效的网址。
读者只需要按照以下配置拷贝到stylish中即可，标题是每个代码块的domains。

www.bilibili.com/

/* 屏蔽广告 */
.ad-report, .video-page-special-card-small {
  display: none !important;
}

www.bilibili.com

/* 工具栏可视 */
#i_cecream .bili-header, #i_cecream .bili-header__bar {
	display: block !important;
}

/* 调整搜索栏样式 */
.bili-header__bar {
  background: var(--graph_bg_regular);
}

#nav-searchform {
  margin-top: 50vh;
  transform: translateY(-50%);
  background-color: white !important;
}

/* 屏蔽干扰项 */
.left-entry,
.trending,
.right-entry,
.bili-header__banner,
.bili-header__channel,
.header-channel,
.bili-feed4-layout,
.palette-button-wrap {
  display: none !important;
}

search.bilibili.com

/* 屏蔽搜索热搜 */
.trending {
	display: none !important;
}

bilibili.com

/* 屏蔽导航栏 */
#bili-header-container, .bili-header, .bili-header__bar, #app #biliMainHeader {
	display: none !important;
}

/* 屏蔽底部 */
#biliMainFooter {
	display: none !important;
}

space.bilibili.com

/* 屏蔽个人信息banner */
.h {
	display: none !important;
}

/* 屏蔽个人空间导航*/
/* #navigator {
	display: none !important;
} */

/* 收藏页的左侧导航*/
/* .fav-sidenav {
	display: none !important;
} */