Firefox 阅读器视图如何操作-解网

问：

总结

我正在寻找可以创建网页的标准，并[公平地]确定它会出现在Firefox Reader中查看（如果用户需要）。

有些网站有此选项，有些则没有。一些文本较多的文本比其他文本少得多的文本没有此选项。Stack Overflow 用于实例在 Reader 中仅显示问题，而不显示任何答案视图。

问题

我已经将Firefox从38.0.1升级到38.0.5，并发现了一个名为ReaderView的新功能 - 这是一种覆盖层，可以消除“页面混乱”并使文本更易于阅读。 Readerview 位于地址栏的右侧，在某些页面上作为可点击的图标。

这很好，但从编程的角度来看，我想知道“读者视图”是如何工作的，它适用于哪些页面的标准。我已经对Mozilla Firefox网站进行了一些探索，但没有明确的答案（我找到了任何类型的编程答案），我当然已经Google/Bingged了这个，这只引用了Firefox插件 - 这不是一个插件，而是新Firefox版本的主要部分。

我假设 readerview 使用 HTML5 并会提取内容，但事实并非如此，因为它在维基百科上工作，它似乎不使用或类似的 HTML5 标签，而是 readview 提取某些 s 并单独显示它们。此功能适用于某些 HTML5 页面（例如维基百科），但不适用于其他页面。<article><article><div>

如果有人知道 Firefox ReaderView 的实际操作方式以及网站开发人员如何使用此操作，您能分享一下吗？或者，如果您能找到这些信息的位置，您能否为我指出正确的方向 - 因为我无法找到这些信息。

javascript 火狐 firefox-reader-view

仅供参考 @RichardNeish ，今天早上通读 gitHub 代码，过程是页面元素按可能的顺序列出 - ,,,位于列表顶部（即最有可能），然后这些“节点”中的每一个都根据适用于节点的逗号计数和类名等内容给出分数。分数值决定了 HTML 页面是否可以在 Firefox 中“查看页面”。我不清楚分数值是由Firefox还是由可读性功能设置的。Javascript 真的不是我的强项，所以其他人应该检查一下。<section><p><div><article>

1赞 svick 6/7/2015

@Martin我认为你应该考虑把它作为一个答案发布（如果你认为别人可以比你做得更好，那就不要接受它）。

4赞 unor 7/12/2015

关于网站管理员：如何使我的网站与Firefox的阅读器视图功能兼容

答：

43赞 Martin 6/7/2015 #1

今天早上通读 gitHub 代码，过程是页面元素按可能的顺序列出 - ,,,在列表的顶部（即最有可能）。<section><p><div><article>

然后，根据适用于节点的逗号计数和类名等内容，为每个“节点”提供分数。这是一个多方面的过程，其中为文本块添加分数，但无效部分或语法的分数似乎也会减少。“节点”子部分的分数反映在整个节点的分数中。我认为，父元素包含所有较低元素的分数。

这个分数值决定了HTML页面是否可以在Firefox中“页面查看”。

我不清楚分数值是由Firefox还是由可读性功能设置的。

Javascript 真的不是我的强项，我认为其他人应该检查一下 Richard （ https://github.com/mozilla/readability ）提供的链接，看看他们是否能提供更彻底的答案。

我没有看到但希望看到的是根据或（或其他）相关标签中的文本内容量进行评分。<p><div>

对这个问题或答案有任何改进，请分享！！

编辑：当页面文本内容有效时，元素中的图像或标记（HTML5）似乎会保留在阅读器视图中。<div><figure><p>

<body>
<p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</body>

请参阅我在 https://stackoverflow.com/a/30750212/1069083

感谢您提供的信息，我遇到了具有多个标签的页面问题，但每个标签都在最小字符数以下，尽管 3 个标签最多包含 1455 个字符。但很高兴知道我需要努力使读者视图在页面上成为可能。我还注意到，外部标签内标签中的图像保留在阅读器视图 .为您的帮助干杯<p><figure><p>

0赞 rubo77 11/28/2016

如何触发 android 上的 chrome 阅读器视图也会很有趣？

0赞 icc97 1/14/2023

你是怎么知道的？这很棒，但似乎有点太像魔术:)

0赞 rubo77 1/19/2023

我通过反复试验发现

41赞 Sean Bone 11/23/2016 #3

我点击了 Martin 指向 Readability.js GitHub 存储库的链接，并查看了源代码。这是我对它的看法。

该算法适用于段落标签。首先，它试图识别页面中绝对不是内容的部分（如表单等）并删除它们。然后，它遍历页面上的段落节点，并根据内容丰富度分配分数：它为逗号数、内容长度等内容加分。请注意，少于 25 个字符的段落会立即被丢弃。

然后，分数会“冒泡”到 DOM 树中：每个段落都会将其分数的一部分添加到其所有父节点中 - 直接父节点将满分添加到其总分中，祖父母仅添加一半，曾祖父父母获得三分之一，依此类推。这允许算法识别可能是主要内容部分的更高级别的元素。

虽然这只是Firefox的算法，但我的猜测是，如果它适用于Firefox，那么它也适用于其他浏览器。

为了使这些读者视图算法适用于您的网站，您希望它们能够正确识别页面中内容较多的部分。这意味着您希望页面上内容较多的节点在算法中获得高分。

因此，这里有一些经验法则，可以在这些算法眼中提高页面质量：

在您的内容中使用段落标签！许多人往往忽略了他们支持标签。虽然它可能看起来很相似，但许多与内容相关的算法（不仅仅是读者视图算法）严重依赖在他们身上。<br />
在标记中使用 HTML5 语义元素，如、 .尽管它们不是唯一的标准（正如您在问题中指出的那样），但这些对于计算机读取您的页面（不仅仅是读者视图）来区分您的内容。可读性.js使用它们来猜测哪些节点可能或不太可能包含重要内容。<article><nav><section><aside>
将主要内容包装在一个容器中，例如 or 元素。这将从所有段落标签中获得分数在其中，并被标识为主要内容部分。<article><div>
在内容密集的区域中保持 DOM 树较浅。如果你有很多分解你的内容的元素，你只会让生活变得更加艰难对于算法：不会有一个突出的元素作为许多内容繁重的段落的父级，但许多将低分分开。

Firefox 阅读器视图如何操作

How does Firefox reader view operate

评论

评论

评论

评论