:::

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

3月 13, 2009 , 38 Comments Edit Post

image

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

image

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

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


快速安裝

  1. 到Blogger管理介面裡面的「版面配置」中的「網頁元素」,再最下方點選「新增小工具」。(請不要在意為何我的版面配置如此之怪,因為我不小心又把導覽列卡錯位置了orz)
    image
  2. 選擇新增一個「HTML/JavaScript」小工具吧。
    image
  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>
    最後結果應該會如下圖:
    image
  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>

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

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

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

手動摘要功能 需要插入的HTML程式碼
隱藏所有文章
  • <!--Hidden All-->
  • <!-- Hidden All -->
  • <span class="digest-mode hidden-all">&lt;-- HIDDEN ALL --&gt;<span>
顯示所有文章
  • <!--Show All-->
  • <!-- Show All -->
  • <span class="digest-mode show-all">&lt;-- SHOW ALL --&gt;<span>
此處之前設定為摘要
  • <!--Digest-->
  • <!-- Digest -->
  • <!--more-->
  • <span>DIGEST<span>

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


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

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

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

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

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

總共38 則留言, (我要發問)

  1. 學長我新增了沒有反應..

    回覆刪除
  2. 自問自答一下好了...
    我後來還是用回CJH大的懶人包了
    我太懶惰XD

    回覆刪除
  3. 抱歉抱歉,之前有個檢查碼寫錯了,現在重新更正。
    追加舊版Blogger版面的適應能力,以及一些細部的調整。
    另外重新改寫一下設定參數的方法。

    對了,qheroq提到的CJH的繼續閱讀懶人包的位置在此
    http://cjhtech.blogspot.com/2007/02/blogger-3-htmlfor-blogger.html
    同樣是以jQuery,但是我們處理自動縮文的技巧可是大不相同
    布丁式自動摘要功能是根據HTML的tag跟字數混合計算,適合每次撰寫Blog時都是一個複雜網頁的人(就是我啦orz),但缺點是容易出錯;CJH的懶人包只是算br標籤的行數,穩定、快速且不容易出錯,不過遇到像我這種複雜網頁的情況就只能沉默了,我的Blog又不用br標籤……
    另外CJH又加入了許多功能,這種懶人包真是貼心又好用啊!

    儘管如此,我還是自己練習寫寫程式,比較有趣吧。
    這個Blogger像是我的玩具一樣,被我改得七零八落呢XD

    最後感謝qheroq的提醒,其實我有看到你的留言,只是一時間沒辦法改程式而已orz
    有問題請回報一下喔,感謝!

    回覆刪除
  4. 我可以用了
    果然用這個才能配合WLW!
    CJH大的懶人包碰到wlw編輯的文章都會有問題
    感謝感謝!!

    回覆刪除
  5. 沒錯,同為WLW使用者,我們很少使用br標籤。但是網頁要用p標籤加段落、ul或ol列出清單,才是一個有語意的正規網頁。br只是權宜應用、方便行事而已,不建議使用!

    回覆刪除
  6. 找了好久Read More,這是最滿意的,簡捷乾淨,不論懶人或自定摺文都很方便,非常感謝大大的分享:)

    回覆刪除
  7. 感谢分享,已应用,效果甚爽

    回覆刪除
  8. 請問一下,如果用標籤點進去看分類文章,是不是就不會自動摘要了呢?

    回覆刪除
  9. 還是從標籤點入還是有自動摘要啊?
    有圖為証
    http://1.bp.blogspot.com/_yr4MQB4zDus/ShTGwfmBUYI/AAAAAAAAFis/jLaFJrOWhhY/s1600-h/2009-05-21_111211.png

    回覆刪除
  10. 太神奇了,傑克~
    感謝格主分享~

    - ECShopMall.com -

    回覆刪除
  11. 有下有推.........
    阿不是啦
    是謝謝你的分享........
    也不是啦
    謝謝布丁
    一分鐘就解決了長久的困擾
    你真的好人

    回覆刪除
  12. 您好,我安裝了似乎也是沒有反應呢,能麻煩您幫我看看嗎?謝謝!

    我的Blog: http://jeterchou.blogspot.com/

    回覆刪除
  13. 請問, 我貼了之後, "文章網頁"的連結, 變成了留下意見的連結, 請問有遇過這種狀況嗎? 謝謝!

    回覆刪除
  14. 了解了, 當:
    1. "意見" 是隱藏, 而且
    2. "上一頁連結" 是隱藏 時,

    "文章網頁" 的連結就會導到意見欄了

    回覆刪除
  15. 回 jenhung

    似乎是他找不到jQuery("div.post").find("a.comment-link:last");
    也就你的blogger版面似乎沒有把「回應連結」加進去的樣子
    導致程式執行錯誤了

    回覆刪除
  16. use Google AJAX Libraries API to load jquery, haven't tried it, but it may be better?

    回覆刪除
  17. Thank's for your suggestion.

    http://code.google.com/intl/zh-TW/apis/ajaxlibs/
    Google AJAX Libraries API (in Chinese)

    It likes to use Google's API to load jQuery.
    I don't what is different between use Google's API or load jQuery directly .

    回覆刪除
  18. Google AJAX Libraries API
    - CDN - content delivery network, 檔案所在的位置會接近使用者。速度上較快。可以想google聰明的決定使用者和伺服器的位置。
    - 檔案的快取設定完善。比免使用者多次下載jquery
    - gzip 壓縮。google 伺服器已將檔案壓縮傳輸。

    總之速度會比較快

    詳見
    Wikipedia

    回覆刪除
  19. 原來如此,真是厲害呢!感謝您的告知!

    回覆刪除
  20. 你好,由于大陆GFW,所以用大陆IP查看时没有效果,你提到了用自己的空间,能否详细解释下呢

    回覆刪除
  21. 九月你好

    由於jQuery檔案我放在自己的Google Page Creator(快關了),所以可能被擋下來了。可以的話請利用Google API或是把jQuery擺在你自己的空間吧。

    回覆刪除
  22. 布丁我設定了以後
    變成這樣子了......
    http://riesz1985.blogspot.com/

    當初我找了好幾家的程式都沒有用
    布丁你可不可以幫我看問題在哪QQ(有空的話)

    回覆刪除
  23. 莉絲晚安:

    我修正了部份bug,新檔上傳到
    http://sites.google.com/site/puddingchen35/Home/digest/puliBloggerDigest.js

    也就是說,部份程式改成(注意到連結的檔案喔)
    jQuery.getScript("http://sites.google.com/site/puddingchen35/Home/digest/puliBloggerDigest.js", function() {....
    即可。

    請試試看吧!

    回覆刪除
  24. 不好意思拖好久才來回應orz 埃呀 布丁丁我檔案下下來開不了耶囧> 是要怎麼打開或怎麼修改呢 謝謝布丁

    回覆刪除
  25. To 莉絲:

    .js是JavaScript的程式,本身只是純文字檔案
    請使用筆記本或Dreamweaver之類的程式編輯器來開啟吧。

    回覆刪除
  26. 很感謝你的分享~
    我成功的運用了呢~
    http://tbsmymiri.blogspot.com/

    回覆刪除
  27. To 真佛宗華德同修會:

    真的耶,恭喜您!

    回覆刪除
  28. 呃.......我用新檔案後直接貼上變成純文字檔案,不會變程式跑耶orz 我是做錯了什麼嗎

    回覆刪除
  29. To RIESZ:

    請把內文中「看到設定畫面,標題可以留空,在內容的部份請插入以下程式碼」這段貼到Blog旁邊才對QQ

    回覆刪除
  30. 不好意思布丁我還是不會用.....我照貼了以後我原本的文章並沒有變成摘要狀態

    回覆刪除
  31. To 洪仕翰:

    可否讓我看一下你的Blogger,好讓我知道問題出在哪邊嗎?

    回覆刪除
  32. 版主大大~~
    剛剛在使用您的工具時~一直都弄不出來
    經檢查了程式,發現到您在
    快速安裝->3. 的部份pBD.doDgiest();的文字打錯了
    依後文所寫的pBD.doDegiest();才是正確的~~~~(少了e)

    回覆刪除

留言工具: