← 全部文章

教程

永久隐藏侧边栏和评论区

一篇文章是几百字的文本,被一片干扰的竞技场包围:热门栏、粘性分享栏、自动播放面板,以及很少值得滚动去看的评论区。JustZix 让你删掉竞技场,留下文章。

找到要移除的东西

打开页面,右键点击那个碍事的块,选择"检查"。记下它的标签、id 或一个稳定的 class。你要找的是一个足够具体、只命中噪音的选择器。像 sidebarrelatedrecommendedpromo 这样的通用词出现在大多数网站的类名里。

核心隐藏块

从一份常见嫌疑对象的列表开始。display: none 完全移除元素,夺回它的空间:

aside,
.sidebar,
#sidebar,
.related-articles,
.recommended,
.trending,
.most-popular,
.promo, .ad-slot {
  display: none !important;
}

按站点添加或移除选择器。如果你想要的东西消失了,删掉捕获到它的那一行。

放逐评论区

评论小部件沉重、缓慢,而且常常是恶意的泥潭。隐藏它们能加快页面,并保护你的心情:

#comments,
.comments,
.comment-section,
#disqus_thread,
.fb-comments,
[id*="livefyre"] {
  display: none !important;
}

干掉粘性杂物

粘性页头、浮动分享栏和聊天气泡跟着你往下走。有些你想去掉;对另一些,只是让它们不再粘住:

.share-bar,
.floating-cta,
.chat-widget,
[class*="cookie-banner"] {
  display: none !important;
}
header.sticky,
.site-header {
  position: static !important;
}

把页头从 fixedsticky 切换到 static,导航仍然可用,但阻止它在你阅读时吃掉屏幕空间。

夺回栏目

侧边栏消失后,主栏常常停留在原来的窄宽度,旁边留着空白。把它重新拉宽:

.main-content,
.content-area,
article {
  width: 100% !important;
  max-width: 72ch !important;
  margin-inline: auto !important;
  float: none !important;
}

float: none 撤销遗留的浮动布局;max-width 随后让现在已居中的文本保持在可读的尺度。

比 display none 更安全的替代方案

如果隐藏某个元素破坏了一个期待它存在的脚本,就改为在视觉上中和它:

.related-articles {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

把它保存为一条规则

新建一条 JustZix 规则,把 URL 模式设为你的目标网站,把你需要的块粘贴进 CSS 面板,然后保存。重新加载文章——噪音没了,文本独立呈现。为你经常阅读的每个网站建立一条规则,因为选择器各不相同。

整理过的页面与温暖的背景和调校好的栏目完美搭配。参见构建你自己的阅读模式了解完整处理,从我们的现成示例获取预设,并下载 JustZix 开始裁掉杂物。

为这篇文章评分

暂无评分 — 成为第一个。

自己动手试试

安装 JustZix,粘贴本文中的任意代码片段。两分钟,从零到一条在你所有设备上生效的规则。

获取 JustZix

功能 · 工作原理 · 示例 · 应用场景