打造你自己的阅读模式 —— 把页面精简到只剩内容
浏览器有阅读模式，但它不靠谱 —— 在一个页面上不触发，在另一个上裁太多，而且你没法调它。在 JustZix 里你打造自己的：一个把页面精简到文章本身的动作按钮，按你的规则来。
为什么要自己的
内置的阅读模式是个黑盒。你不知道它何时出现，你影响不了它把什么当作「内容」，你改不了排版。你的规则是十几行你能理解、能按口味调整的代码。
最好做成 BUTTON 动作
你很少想要阅读模式自动激活 —— 你想要它按需。这让它成为 JustZix 动作栏里一个 BUTTON 动作的理想候选。把它标记为，比方说，READ，代码在点击时执行：
const art = document.querySelector(
'article, [role="main"], main, .entry-content, .post-content'
);
if (!art) { alert('未找到内容容器。'); }
else {
document.body.replaceChildren(art);
document.body.style.cssText =
'max-width:70ch;margin:40px auto;padding:0 24px;' +
'font:19px/1.7 Georgia, serif;background:#fbfaf7;color:#222';
}它如何工作
选择内容容器
querySelector 收到一个从最可靠到最不可靠的候选列表：<article>、一个带 role="main" 的元素、<main>，然后是常见的 CMS 类名。它取存在的第一个。对于一个什么都不匹配的页面，把它的选择器加到列表顶部。
replaceChildren
document.body.replaceChildren(art) 把 <body> 里的一切扔出去，只放进文章容器。一次调用而不是一个逐个移除元素的循环。
排版
max-width:70ch 给出大约 70 字符长的行 —— 可读性的最优值。其余是边距、一个衬线字体和一个暖色背景。按你的口味改它。
纯 CSS 变体
如果页面有一个干净的 <article>，你可以跳过 JS —— 在规则的 CSS 标签页里：
body > *:not(:has(article)) { display: none !important; }
article {
max-width: 70ch !important;
margin: 40px auto !important;
font-size: 19px !important;
line-height: 1.7 !important;
}CSS 变体不那么可靠（依赖页面结构）但不碰 DOM —— 容易关掉。
坑
- 内容里的图片保留。它们是文章的子元素，所以会存活下来 —— 这是好事。
- replaceChildren 是单向的。精简之后，你通过刷新（F5）回到正常页面。对一个按需动作来说这可以接受。
- 页面脚本可能抗议。页面的一部分代码依赖于我们移除的元素，会在控制台抛一个错误。它不破坏内容。
另见
安装 JustZix —— 读文章而不带页面其余部分。
为这篇文章评分
暂无评分 — 成为第一个。