优化网站以在 Firefox 中显示读者视图 [英] Optimize website to show reader view in Firefox
问题描述
Firefox 38.0.5 在地址栏中添加了阅读器视图":
但并不是所有网站都有这个图标，只有在检测到可读内容页面时才会出现.那么我如何为我的网站启用这个功能?
我尝试了媒体打印和额外的打印视图样式表，但没有效果:
<头><风格>@media print {/* 无效:*/.no-print { 显示:无；}}</风格><!-- 也没有效果:<link rel="stylesheet" href="print.css" media="print"><!-- --></head><body><h1>一些标题</h1><img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view"><br><br><br>这是唯一的文字</body></html><小时>
我必须将哪些代码片段添加到我的网站源代码中，以便我网站的访问者可以看到这个书籍图标?
你必须添加
我创建了一个简单的 html:
<头><title>阅读器视图仅显示阅读器视图中的浏览器</title><身体>主 div 标签之外的所有内容都将在阅读器视图中消失
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view"><div><h1>在 p 标签外的 H1 标签隐藏在阅读器视图中</h1><img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+resized+in+print+view"><p>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901294567812345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012945678123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890129456781234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901294567812345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012945678123456789 123456</p></html>
这是激活它所需的最低要求.这是一个多方面的过程，其中为文本块添加分数.
例如，如果您在视图帖子模板中的每个消息块周围添加 <p> 标签，您可以激活论坛软件中的阅读器视图.
Firefox 38.0.5 added a "Reader View" to the address bar:
But not all sites get this icon, It only appears when readable content page is detected. So how do I enable this for my site?
I tried media print and an extra stylesheet for print-view, but that has no effect:
<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>
What code snippets do I have to add into my website sourcecode so this book icon will become visible to the visitors of my site?
You have to add <div> or <p> tags to achieve a page to iniciate the ReaderView.
I created a simple html that works:
<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>
This is the minimum needed to activate it. This is a somewhat multi-faceted process where scores are added for text chunks.
You can for example activate the reader view in forum's software if you add a <p>-tag around each message block in the view-posts template.
Here are some more details about the mechanism
这篇关于优化网站以在 Firefox 中显示读者视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
