布丁式Blogger自動摘要功能(jQuery版)

3月 13, 2009 作品 , Blogger 37 Comments Edit Copy Download

感謝jQuery這個強大的JavaScript程式庫，現在在Blogger上面裝外掛已經不用去版面配置跟HTML的範本(template)奮鬥了(如下圖)。

你也知道，程式往往因為少改那幾行而出錯，每次要檢查錯誤都蠻麻煩的。

這次我改寫了之前的布丁式自動摘要功能，並以jQuery的方法來實做他，讓各位Blogger套用在自己Blog的時候能更加地簡單、直接，而且更迅速！

快速安裝

1. 到Blogger管理介面裡面的「版面配置」中的「網頁元素」，再最下方點選「新增小工具」。(請不要在意為何我的版面配置如此之怪，因為我不小心又把導覽列卡錯位置了orz)
   
2. 選擇新增一個「HTML/JavaScript」小工具吧。
   
3. 看到設定畫面，標題可以留空，在內容的部份請插入以下程式碼：

   <script src="http://puddingchen.35.googlepages.com/jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
   jQuery.getScript("http://sites.google.com/site/puddingchen35/Home/digest/puliBloggerDigest.js", function() {
   pBD = puliBloggerDigest();
   pBD.delayTime = 0; //執行延遲時間，單位是「毫秒」(1000毫秒=1秒)
   pBD.wordMin = 100; //自動摘要最少字數
   pBD.wordMax = 200; //自動摘要最多字數
   pBD.langBlogURL = "文章網頁"; //連結按鈕
   pBD.langReadAll = "閱讀全文"; //連結按鈕
   pBD.langContiReadAll = "繼續閱讀全文"; //連結按鈕
   pBD.langShowDigest = "僅顯示摘要"; //連結按鈕
   pBD.doDegiest();
   });
   </script>

   最後結果應該會如下圖：
   
4. 按「儲存」，完成安裝。

回到首頁的時候，應該就能看到你的文章順利被縮成100字到200字之間的摘要了。

進階設定：自訂你的自動摘要功能

你可以在程式碼當中修改參數，以自訂你的動摘要功能。參數在前面小節安裝程式碼的時候即可設定，例如「pBD.wordMin = 100; //自動摘要最少字數」即是。以下一一說明各個參數的意義：

• delayTime 延遲處理時間：預設值為「0」毫秒(1000毫秒=1秒)。當你覺得在做自動摘要的時候會讓你網頁讀起來緩慢，你可以增加延遲時間，讓程式分批去處理。
• wordMin 自動摘要最短字數：預設值為「100」字，此字數並不包含標籤內的文字，而是真的顯示的字數。當超過此字數之後，程式會尋找HTML標籤完結處當中自動摘要的切斷點。
• wordMax 自動摘要最長字數：預設值為「200」字，此字數並不包含標籤內的文字，而是真的顯示的字數。當程式找尋自動摘要的切斷點超過此字數之後，程式會強迫設定此字數為切斷點，並且自動增加結尾標籤進來，以維持HTML的完整性。
• 後面的則是各種按鈕的訊息，你可以自訂成其他訊息：
  • langBlogURL：顯示按鈕「文章網頁」；
  • langReadAll：顯示按鈕「閱讀全文」；
  • langContiReadAll：顯示按鈕「繼續閱讀全文」；
  • langShowDigest：顯示按鈕「僅顯示摘要」。

現在來舉一個設定與實際程式碼撰寫的例子：

• 延遲時間為「500」毫秒，也就是0.5秒；
• 最小字數為「50」字，最大字數為「100」字，這可以讓你的首頁看起來不會這麼長；
• 訊息改為「Post Link」、「Read All」、「Read All」(其實跟前面的沒什麼差別嘛)、「Show Digest」，改成英文很有國際化的感覺。

那麼你的程式碼應該如此撰寫：

<script src="http://puddingchen.35.googlepages.com/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.getScript("http://sites.google.com/site/puddingchen35/Home/digest/puliBloggerDigest.js", function() {
pBD = puliBloggerDigest();
pBD.delayTime = 500; //執行延遲時間，單位是「毫秒」(1000毫秒=1秒)
pBD.wordMin = 50; //自動摘要最少字數
pBD.wordMax = 100; //自動摘要最多字數
pBD.langBlogURL = "Post Link"; //連結按鈕
pBD.langReadAll = "Read All"; //連結按鈕
pBD.langContiReadAll = "Read All"; //連結按鈕
pBD.langShowDigest = "Show Digest"; //連結按鈕
pBD.doDegiest();
});
</script>

進階設定：手動插入摘要切斷點

如之前的布丁式自動摘要功能一樣，本功能支援你在撰寫文章時手動插入摘要切斷點。

切斷點分成三個種類，個別有特定的格式跟意含，如下說明：

如果同時插入了這三種切斷點，則效果會由隱藏全部文章優先，其次是顯示所有文章，手動摘要則是最後才會生效的！

進階設定：儲存並修改你自己的自動摘要功能

布丁式自動摘要功能(jQuery版)是由Google Page Creator提供的空間。這空間有流量限制，速度也不快。如果你需要的話，可以自行下載下來並擺置到你的空間，然後修改安裝程式碼當中src的引用位置即可。

• jquery.js：jQuery 1.2.6版本，也許你可以在jQuery的網站上找到更新的版本。
• puliBloggerDigest.js：布丁式自動摘要功能(jQuery版)，因為要搭配jQuery才能運作，所以安裝程式碼的時候一定要一起引用喔！

在我很久以前推出的布丁式自動摘要功能似乎大受好評，希望這次推出的改良版，能夠幫助更多Blogger來改善你們的Blog頁面。

不過還是要提醒一下，安裝太多JavaScript檔案會拖慢你的網站讀取速度，要在美觀與速度之間取得平衡喔！