閱讀優化－Readability-blog[友善閱讀]按紐

因為[Readability]讀取自己的blog不正常，研究發現，原來是文件裡的<div>段寫的亂七八糟，經過修改後，以後的新文件正常了，但以前的就不管了。

參考一些網頁「友善列印」的做法，我們可以用[Readability]為自己的blog也寫一個按紐，提供給網友使用。

￭CSS按紐

CSS按紐的製作，可以到[CSS Button Designer]自製一個。

教學文件：CSS按鈕產生器（CSS Button Designer）

￭插入[Readability]書籤內碼

❏先將[Readability Enjoy Reading. Support Writing.]的書籤內碼（鏈結）複製起來。

❏然後在[CSS Button Designer]取得的內碼中嵌入書籤內碼。例如：

<form name="groovyform">

<a href="javascript:(%28function%28%29%7Bwindow.baseUrl%3D%27https%3A//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/read.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">

<input

   type="button"

   name="groovybtn1"

   class="groovybutton"

   value="友善閱讀(Readability)"

   title="友善閱讀(Readability)"></a>

</form>

￭新增至blog

❏Xuite：在[自由欄位]裡將上面的內碼貼上，如需置中，前後加上<center>……</center>。

❏blogger：在[HTML/JavaScript]裡將上面的內碼貼上，如需置中，前後加上<center>……</center>。

￭問題：新版[Readability]書籤內碼在Xuite無法正確顯示文章標題，先前是出現「???????」，現在則是顯示「最新文章」，應該是Xuite的問題，在blogger則完全正常。請參考我的blogger。不然，也可以使用舊版[Readability]書籤內碼，如下：

javascript:(function(){readConvertLinksToFootnotes=false;readStyle='style-ebook';readSize='size-medium';readMargin='margin-wide';_readability_script=document.createElement('script');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.documentElement.appendChild(_readability_script);_readability_css=document.createElement('link');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';_readability_css.media='all';document.documentElement.appendChild(_readability_css);_readability_print_css=document.createElement('link');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();