2009年3月31日 星期二

012

-------------------------------------------------------------------------
http://pulipuli.blogspot.com/2007/02/blogger.html
-------------------------------------------------------------------
Blogger安裝文章自動摘要的方法
標籤: Blog, 作品 張貼者： 布丁布丁吃布丁

布丁式自動文章摘要

1. 自動模式：可選擇要摘要的字數範圍，則程式會自動幫你顯示一定範圍的文字喔！還會聰明地辨識出文章告一段落，做一範圍內的切割點喔。
2. 手動模式：分成手動制定切割點、隱藏全文、顯示全文三種模式。
3. 特殊的HTML標籤問題完全解決，可以放心在你的文章中擺入任何標籤喔。

接下來開始安裝的方法：
一、取得JavaScript程式碼

http://puddingchen.35.googlepages.com/digest_blogbody.js

以下是該支程式的原始碼

function digest_blogbody(id, url, location_href) { //自動文章摘要的變數設定 var word_min = 50; //字數最少要到這種程度 var word_max = 100; //字數最多要到這種程度 count = location_href.split("/"); if (count.length > 5 && count[4] != "label") return; blogitembody = document.getElementById(id).innerHTML; var digest_point = -1; var digest_mode = "auto"; //判斷是否有隱藏全文 if (digest_mode == "auto") { digest_point = blogitembody.indexOf("", 0); if (digest_point != -1) { digest_point = 0; digest_mode = "hidden_all"; } } if (digest_mode == "auto") { digest_point = blogitembody.indexOf("", 0); if (digest_point != -1) { digest_point = blogitembody.length; digest_mode = "show_all"; } } if (digest_mode == "auto") { digest_point = blogitembody.indexOf("", 0); if (digest_point != -1) { digest_point = digest_point + 13; digest_mode = "digest"; } } //手動設定，輸出 if (digest_mode != "auto") { //alert(blogitembody); //if (digest_mode == "hidden_all") //digest_point = 0; if (blogitembody.toLowerCase().substr(blogitembody.length-56, 56) == '
') var body_len = blogitembody.length - 56; else var body_len = blogitembody.length; //alert(blogitembody.toLowerCase().substr(blogitembody.length-56, 56) + " -- " + body_len + " -- " + digest_point); //alert(body_len); if (digest_point < body_len && digest_point != -1) { if (digest_mode != "hidden_all" || digest_mode != "digest") continue_reading1 = "……"; else continue_reading1 = ""; //continue_reading2 = '(繼續閱讀)'; if (digest_mode == "hidden_all") continue_reading2 = '| 閱讀全文 | 文章網頁 |'; else if (digest_mode == "digest") continue_reading2 = '| 繼續閱讀全文 | 文章網頁 |'; //隱藏全文 hidden_reading = '| 僅顯示摘要 | 文章網頁 |'; blogitembody_digest_ohter = blogitembody.substr(0, digest_point) + ''+blogitembody.substr(digest_point, blogitembody.length-digest_point); blogitembody_digest_ohter = ''; } else { continue_reading1 = ""; continue_reading2 = ""; blogitembody_digest_ohter = ""; } //處理end tag var end_tag = ""; if (digest_mode == "digest") { var text = blogitembody.substr(0, digest_point); each_tag = text.split("<"); //end_tags = new Array; //var tag_i = 0; for (var i = 1; i < each_tag.length; i++) { if (each_tag[i].substr(0, 1) == "/" || each_tag[i].substr(0, 1) == "!") continue; temp = each_tag[i].split(" ", 2); temp2 = each_tag[i].split(">", 2); if (temp[0].length < temp2[0].length) tag = temp[0]; else tag = temp2[0]; end_tag = "" + end_tag; //end_tags[tag_i] = temp[0]; //tag_i++; } } blogitembody_digest = blogitembody.substr(0, digest_point) + continue_reading1 + end_tag; //alert(blogitembody_digest); //document.getElementById(id).innerHTML = blogitembody_digest+continue_reading2; document.getElementById(id).innerHTML = '
'+blogitembody_digest+continue_reading2+'
' + blogitembody_digest_ohter; return; } //-------------------------------------------------------- //以上是手動切斷設定，以下是自動切斷的程式 //1. 初始化設定 //blogitembody //本文 var word_num = 0; //字數 var words = ""; //待顯示的文字與標籤 var tags = new Array; //儲存每個tag，以方便還原 tag_i = 0; var dp = 0; //現在判斷的位置 var stop_tag = new Array; stop_tag[0] = "img"; stop_tag[1] = "br"; var no_save = "false"; var stop_chr = new Array; stop_chr[0] = " "; stop_chr[1] = "\n"; stop_chr[2] = "\t"; stop_chr[3] = ">"; stop_chr[4] = "<"; var chr_no_save = "false"; var skip_tag = new Array; skip_tag[0] = "script"; skip_tag[1] = "style"; var temp_str = ""; //暫存字元，用來比較關鍵字用 var now_chr = ""; //現在檢查的字元 //alert(digest_point); //一個字一個字抓取 for (i = 0; i < blogitembody.length && digest_point == -1; i++) { now_chr = blogitembody.substr(i, 1); //檢查是否要跳過 if (now_chr == "<") { //檢查是否為省略標籤 is_skip_tag = "false"; for (sk_i = 0; sk_i < skip_tag.length; sk_i++) { temp_str = blogitembody.substr(eval(i+1), skip_tag[sk_i].length); if (temp_str == skip_tag[sk_i]) { //跳躍到同樣的標籤結束為止 i = blogitembody.indexOf("", i); i = eval(i) + skip_tag[sk_i].length + 3; //word_num--; is_skip_tag = "true"; break; } } if (is_skip_tag == "true") continue; //檢查標籤是否要儲存 tagname_point1 = blogitembody.indexOf(" ", i); tagname_point2 = blogitembody.indexOf(">", i); if (tagname_point2 < tagname_point1 || tagname_point1 == -1) tagname_point = tagname_point2; else tagname_point = tagname_point1; tagname = blogitembody.substr(eval(i+1), tagname_point - eval(i+1)); no_save = "false"; for (st_i = 0; st_i < stop_tag; st_i++) { if (tagname == stop_tag[st_i]) { no_save = "true"; break; } } if (no_save == "false") { tags[tag_i] = tagname; tag_i++; } //跳躍到標籤結束為止 i = blogitembody.indexOf(">", eval(i)); continue; } //儲存字元 chr_no_save = "false"; for (sc_i = 0; sc_i < stop_chr.length; sc_i++) { if (now_chr == stop_chr[sc_i]) { chr_no_save = "true"; break; } } if (chr_no_save == "false" && now_chr != "<") { word_num++; //alert("'"+blogitembody.substr(i-1, 3)+"'"); } //檢查是否超過限制字元 if (word_num > word_max + tags.length) break; } //alert(word_num); digest_point = eval(i+1); //檢查是否有結尾標籤 var temp_dp = blogitembody.indexOf(" -1; i--) { //alert(""); if (tags[i].substr(0,1) != "/") end_tag = end_tag + ''; } //alert(end_tag); //alert(blogitembody.substr(0, digest_point)); if (blogitembody.toLowerCase().substr(blogitembody.length-56, 56) == '
') { var body_len = blogitembody.length - (tag_i * 5) - 56; } else var body_len = blogitembody.length - (tag_i * 5); //alert(blogitembody.toLowerCase().substr(blogitembody.length-56, 56) + " -- " + body_len + " -- " + digest_point); if (digest_point < body_len && digest_point != -1) { continue_reading1 = "……"; continue_reading2 = '| 繼續閱讀全文 | 文章網頁 |'; //隱藏全文 hidden_reading = '| 僅顯示摘要 | 文章網頁 |'; blogitembody_digest_ohter = blogitembody.substr(0, digest_point) + ''+blogitembody.substr(digest_point, blogitembody.length-digest_point); blogitembody_digest_ohter = ''; } else { continue_reading1 = ""; continue_reading2 = ""; blogitembody_digest_ohter = ''; } //alert(end_tag); blogitembody_digest = blogitembody.substr(0, digest_point) + continue_reading1 + end_tag; document.getElementById(id).innerHTML = '
'+blogitembody_digest+continue_reading2+"
\n\n" + blogitembody_digest_ohter; } function digest_show(id) { if (document.getElementById(id+"-show").style.display == "" || document.getElementById(id+"-show").style.display == "block") { document.getElementById(id+"-show").style.display = "none"; document.getElementById(id+"-hidden").style.display = "block"; //location.href = "#"+id+"-digest_point"; } else { document.getElementById(id+"-hidden").style.display = "none"; document.getElementById(id+"-show").style.display = "block"; location.href = "#"+id+"-post-title"; } }
二、修改Blogger範本 (自行上傳檔案的時候)

因為Blogger舊式範本(template)與新式範本差別非常大，我在這邊僅示範新式範本的修改方式。

首先，到Blogger的管理畫面中，[範本]→[修改HTML]→[修改範本]，把旁邊的[展開小裝置範本]打勾。畫面請看下圖：

三、增加.link_fullpost的CSS樣式表

然後到[修改範本]下面的大表單的一堆程式碼當中，找到這個標籤：



在他下面加入一段程式碼，變成：





四、加上返回摘要的錨點

然後找到下面這段程式碼：




加入一段程式碼：





五、安裝自動文章摘要

再找到下面這段程式碼：






修改成下面的程式碼：







以上，這樣就大功告成了，接下來就交給程式去運作就好了，十分簡單吧。

如果你覺得那個閱讀全文的標籤不好看的話，那麼可以修改第三部裡面寫的.link_fullpost樣式內容，就請發揮創意吧。
Q&A：
1. 要怎麼使用手動摘要？

* ，請於你設定的文章切割點插入這段文字。那麼切割點之前會是摘要內容，之後會隱藏起來
* 與，一個是隱藏全文、一個是顯示全文，插入在文章任何地方皆可

2. 手動摘要與自動摘要的順序是？

＞ ＞ ＞ 自動摘要
3. 什麼叫做自動摘要的字數範圍？

就是指定你摘要內容最少要顯示幾個字、最多則是不能超過幾個字。在這個範圍內，如果遇到結尾標籤(如：

)，則程式會自動判定該標籤之後為切割點。
4. 要怎麼設定自動摘要的字數範圍？

可以在程式開頭第三行以下設定：

//自動文章摘要的變數設定
var word_min = 50; //字數最少要到這種程度
var word_max = 100; //字數最多要到這種程度

所以預設值最少是50字，最多是100字
相關連結:

* 布丁式Blogger自動摘要功能(jQuery版) - 2009-03-13
* 布丁的自我簡介(2008年版) - 2008-10-12
* 政大圖檔與布丁布丁吃？ - 2008-05-24
* 解決Zoundry圖片上傳問題──改用LiveJournal ScrapBook - 2008-03-22
* 當「布丁布丁吃？」的讀者變多的時候 - 2008-03-21

9 意見:

Brandon 提到...

您好，
看過您做的摘要覺得很好用，
但是請問一下，
步驟一所說的javaScript整段程式要複製到那邊呢？？

謝謝您
2007年12月23日 下午 1:44
布丁布丁吃布丁 提到...

步驟一的JavaScript請製作成一個js檔，並上傳，以供步驟三時連結js時使用。你也可以直接用我的js檔就好。
2007年12月24日 上午 1:42
Ching 提到...

你好，這個摘要滿好用的，我已經安裝了但是在繼續閱讀的連結部份變成了亂碼~"~
http://chingx0117.blogspot.com/

javaScript我是牽貴站的聯結過去的，因為我自己改了英文版的js檔無法執行...
可能是字碼再存取的時候被破壞了還是CHMOD權限錯誤~"~

可以教一下正確的寫法嗎？
2008年7月22日 下午 9:34
布丁布丁吃布丁 提到...

我把在我空間上的js檔改成以UTF-8編碼之後就可以了
2008年7月22日 下午 9:43
Ching 提到...

恩，看到摟@v@
非常感謝^^~
2008年7月22日 下午 9:57
Dim 提到...

有效～～
谢谢～～
2008年12月10日 下午 6:46
布丁布丁吃布丁 提到...

不客氣！
2008年12月10日 下午 8:27
星逝 提到...

第四點後面
a expr:id='data:post.id + "-post-body-post-title"' expr:name='data:post.id + "-p

這後面是不是有缺少東西呢

我照做後，無法儲存耶

不知到哪邊出錯了
2009年3月2日 上午 12:05
布丁布丁吃布丁 提到...

建議您改用布丁式Blogger自動摘要功能(jQuery版)看看！
http://pulipuli.blogspot.com/2009/03/bloggerjquery.html
2009年3月13日 上午 3:31

張貼意見
永久連結

這是測試文章(但是有好東西)
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)