← 全部文章

教程

用 JustZix 构建你自己的阅读模式

17 5月 2026 · 作者 JustZix Team

浏览器的阅读模式很不错,直到它剥掉你想要的那一张图、把代码块搞乱,或者干脆拒绝触发。有了 JustZix,你可以构建一个完全按你喜好工作、在你确切选定的网站上工作的阅读模式。

为什么要自己动手

内置阅读模式是个黑盒。你无法调整它的行长,无法保留插图,而且它常常在非经典文章的页面上失败。相比之下,一条 JustZix 规则只是你掌控的 CSS。它在真实页面上运行,所以链接、代码和媒体都继续工作。你决定什么保留、什么去掉。

第一步:驯服文章栏

唯一最大的可读性收益是约束行长。长于大约 75 个字符的行迫使你的眼睛走得太远,你会在回扫时迷失位置。把主栏居中并限制它的宽度:

article, .post-content, main {
  max-width: 68ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1.5rem !important;
}

ch 单位与 0 字符的宽度绑定,所以 68ch 无论字号如何都接近经典的 66 字符理想值。调整选择器列表以匹配你的目标网站。

第二步:让文字舒展开来

新闻网站的默认行高常常是局促的 1.4。在 1.7 左右、配上略大的正文字号和一种衬线或人文主义无衬线字体,阅读会舒适得多:

article p, .post-content p {
  font-size: 1.18rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.4em !important;
  font-family: Georgia, 'Iowan Old Style', serif !important;
}
article h2, article h3 {
  line-height: 1.3 !important;
  margin-top: 2em !important;
}

第三步:清理桌面

现在隐藏噪音。侧边栏、粘性页头、新闻订阅插入框和相关内容栏都在争夺注意力。一条全面的 display 规则把它们扫走:

aside,
.sidebar,
.newsletter-signup,
.related-posts,
[class*="sticky"],
[id*="recirculation"] {
  display: none !important;
}
body { overflow-x: hidden !important; }

对像 [class*="sticky"] 这样的属性选择器要稍微保守一点——测试页面,移除任何隐藏了你想保留之物的选择器。

把它组合成一条规则

在 JustZix 中,新建一条规则,把 URL 模式设为你最常读的网站(例如 *://*.example-news.com/*),把全部三个 CSS 块粘贴进 CSS 面板,然后保存。现在每篇匹配的文章都会自动以你的个人阅读模式打开。

一个平静的背景

满亮度的纯白在夜晚很刺眼。柔和的奶油色调减少眩光,又没有厚重深色主题的对比度损失:

html, body, article {
  background: #f6f1e6 !important;
  color: #2b2620 !important;
}
article a { color: #7a4a1f !important; }

从这里你可以继续完善:固定目录、给当前段落加聚焦高亮,或叠加一个阅读时间徽章。浏览我们的现成示例获取更多起点,参见关于把栏宽调到恰到好处的配套文章,如果你还没有,下载 JustZix。阅读模式,按你的方式。