31

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

在此处输入图像描述

但并非所有网站都有此图标，它仅在检测到可读内容页面时出现。那我该怎么做为我的网站启用此功能？

我尝试了媒体打印和打印视图的额外样式表，但这没有效果：

<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>

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

4

2 回答 2

19

正如20 年 5 月的代码所示，触发器函数 ( ) 仅对包含至少一个死者的元素和元素进行isProbablyReaderable评分。ppredivbr

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

  • 对于 ['p', 'pre', 'div > br'] 中的每个元素：
    • 如果textContent长度 > 140 个字符，则score增加sqrt(length - 140)
  • 如果累计score> 20，则返回true
于 2017-11-17T21:26:31.400 回答
16

你必须添加<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>例如，如果您在 view-posts 模板中的每个消息块周围添加 -tag，您可以激活论坛软件中的阅读器视图。

以下是有关该机制的更多详细信息

于 2015-06-10T07:47:02.797 回答