如何在我的網站上實施 Mozilla readability.js？

Question

https://github.com/mozilla/readability （readability.js 用於為 web 頁創建閱讀視圖）

我怎樣才能對這個測試網頁實施 readability.js 問題是，readability.js 刪除了這個網站的元素，我想保留並留下那些應該刪除的元素。 我希望有一個人可以幫助我。 謝謝你。 有沒有關於如何使用 readability?js 的文檔？

<html><head>
<title>Reader View shows only the browser in reader view</title>
    <script src="https://raw.githack.com/mozilla/readability/master/Readability.js"></script>
</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>
    <script>
    var article = new Readability(document).parse();
    </script>
</html>

測試頁來源：優化網站以顯示Firefox中的讀者視圖

Answer 1

您可以像他們在文檔中提到的那樣一起使用 DOMPurify 和 Readability -

import { Readability } from '@mozilla/readability'
import DOMPurify from 'dompurify';

function readable(doc) {
  const reader = new Readability(doc)
  const article = reader.parse()
  return article
}

let cloneDoc = document.cloneNode(true)
let parsed = readable(cloneDoc)
const markup = DOMPurify.sanitize(parsed.content)

markup將是可讀內容的 html 字符串。 嘗試console.log(parsed)查看可用的屬性。

Answer 2

你試過這個嗎？

從他們的 github 頁面：

“Readability 的 parse() 通過修改 DOM 來工作。這會刪除 web 頁面中的一些元素。您可以通過在創建 Readability object 時傳遞文檔 object 的克隆來避免這種情況。”

var documentClone = document.cloneNode(true); 
var article = new Readability(documentClone).parse();

您可以復制 dom object 這樣您實際上就不會修改真實的 dom

Answer 3

好的....

    document.getElementById("body").innerHTML = "<font face='Calibri' size='4'> 
    <h1>"+article.title+"</h1>"+article.content;

如何在我的網站上實施 Mozilla readability.js？

問題描述

3 個解決方案

解決方案1
5 2020-08-26 14:23:19

解決方案2
3 2020-08-16 21:00:08

解決方案3
0 2020-06-11 17:25:01

如何在我的網站上實施 Mozilla readability.js？

問題描述

3 個解決方案

解決方案1 5 2020-08-26 14:23:19

解決方案2 3 2020-08-16 21:00:08

解決方案3 0 2020-06-11 17:25:01

解決方案1
5 2020-08-26 14:23:19

解決方案2
3 2020-08-16 21:00:08

解決方案3
0 2020-06-11 17:25:01