Question

Firefox 38.0.5在地址栏中添加了“阅读器视图”：

enter image description here

但并非所有网站都会显示此图标，只有在检测到可读内容网页时才会显示。那么我如何为我的网站启用？

我尝试使用介质打印和打印视图的额外样式表，但这没有效果：

<html>
<head>
<style>
  @media print { /* no effect: */
    .no-print { display:none; }
  }
</style>
<!-- no effect either:
<link rel="stylesheet" href="print.css" media="print"><!--  -->
</head><body>
<h1>Some Title</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<br><br><br>This is the only text
</body></html>

我必须将哪些代码段添加到我的网站源代码中，以便我的网站访问者可以看到图书图标？

Answer 1

您必须添加<div>或<p>标记才能获得一个与ReaderView相关的页面。

我创建了一个有效的简单html：

<html><head>
<title>Reader View shows only the browser in reader view</title>
</head>
<body>
Everything outside the main div tag vanishes in Reader View<br>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<div>
   <h1>H1 tags outside ot a p tag are hidden in reader view</h1>
   <img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">
   <p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</div>
</body>
</html>

这是激活它所需的最低要求。这是一个多方面的过程，为文本块添加分数。

如果您在视图帖子模板中的每个消息块周围添加<p>标记，则可以激活论坛软件中的阅读器视图。

Here are some more details about the mechanism

Answer 2

由于代码位于Nov '17，触发器功能（isProbablyReaderable）仅对包含至少一个死者的p或pre元素和div元素进行评分br。

评分启发式的略微过度简化是：

对于['p'，'pre'，'div＆gt;中的每个元素BR']：
- 如果textContent长度为＆gt; 140个字符，score
如果累计score＆gt; 20，返回true

优化网站以在Firefox中显示读者视图

2 个答案: