Blogger安裝文章自動摘要的方法
布丁式自動文章摘要
- 自動模式：可選擇要摘要的字數範圍，則程式會自動幫你顯示一定範圍的文字喔！還會聰明地辨識出文章告一段落，做一範圍內的切割點喔。
- 手動模式：分成<!--Digest-->手動制定切割點、<!--Hidden All-->隱藏全文、<!--Show All-->顯示全文三種模式。
- 特殊的HTML標籤問題完全解決，可以放心在你的文章中擺入任何標籤喔。
接下來開始安裝的方法：
一、取得JavaScript程式碼
http://puddingchen.35.googlepages.com/digest_blogbody.js
以下是該支程式的原始碼
二、修改Blogger範本 (自行上傳檔案的時候)
因為Blogger舊式範本(template)與新式範本差別非常大，我在這邊僅示範新式範本的修改方式。
首先，到Blogger的管理畫面中，[範本]→[修改HTML]→[修改範本]，把旁邊的[展開小裝置範本]打勾。畫面請看下圖：
三、增加.link_fullpost的CSS樣式表
然後到[修改範本]下面的大表單的一堆程式碼當中，找到這個標籤：
</head>
在他下面加入一段程式碼，變成：
</head>
<script type="text/javascript" src="http://puddingchen.35.googlepages.com/digest_blogbody.js"></script>
<style tyle="text/css">
.post-body .link_fullpost {
font-size: 80%;
margin: 1em;
display:block;
}
</style>
四、加上返回摘要的錨點
然後找到下面這段程式碼：
<b:includable id='post' var='post'> <div class='post'>
加入一段程式碼：
<b:includable id='post' var='post'>
<div class='post'>
<a expr:id='data:post.id + "-post-body-post-title"' expr:name='data:post.id + "-post-body-post-title"'></a>
五、安裝自動文章摘要
再找到下面這段程式碼：
<div class='post-body'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
修改成下面的程式碼：
<div class='post-body' expr:id='data:post.id + "-post-body"'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type="text/javascript">
digest_blogbody('<data:post.id/>'+'-post-body', '<data:post.url/>', location.href);
</script>
以上，這樣就大功告成了，接下來就交給程式去運作就好了，十分簡單吧。
如果你覺得那個閱讀全文的標籤不好看的話，那麼可以修改第三部裡面寫的.link_fullpost樣式內容，就請發揮創意吧。
Q&A：
1. 要怎麼使用手動摘要？
- <!--Digest-->，請於你設定的文章切割點插入這段文字。那麼切割點之前會是摘要內容，之後會隱藏起來
- <!--Hidden All-->與<!--Show All-->，一個是隱藏全文、一個是顯示全文，插入在文章任何地方皆可
2. 手動摘要與自動摘要的順序是？
<!--Digest--> ＞ <!--Hidden All--> ＞ <!--Show All--> ＞ 自動摘要
3. 什麼叫做自動摘要的字數範圍？
就是指定你摘要內容最少要顯示幾個字、最多則是不能超過幾個字。在這個範圍內，如果遇到結尾標籤(如：</p>)，則程式會自動判定該標籤之後為切割點。
4. 要怎麼設定自動摘要的字數範圍？
可以在程式開頭第三行以下設定：
//自動文章摘要的變數設定 var word_min = 50; //字數最少要到這種程度 var word_max = 100; //字數最多要到這種程度
所以預設值最少是50字，最多是100字
您好，
回覆刪除看過您做的摘要覺得很好用，
但是請問一下，
步驟一所說的javaScript整段程式要複製到那邊呢？？
謝謝您
步驟一的JavaScript請製作成一個js檔，並上傳，以供步驟三時連結js時使用。你也可以直接用我的js檔就好。
回覆刪除你好，這個摘要滿好用的，我已經安裝了但是在繼續閱讀的連結部份變成了亂碼~"~
回覆刪除http://chingx0117.blogspot.com/
javaScript我是牽貴站的聯結過去的，因為我自己改了英文版的js檔無法執行...
可能是字碼再存取的時候被破壞了還是CHMOD權限錯誤~"~
可以教一下正確的寫法嗎？
我把在我空間上的js檔改成以UTF-8編碼之後就可以了
回覆刪除恩，看到摟@v@
回覆刪除非常感謝^^~
有效～～
回覆刪除谢谢～～
不客氣！
回覆刪除第四點後面
回覆刪除a expr:id='data:post.id + "-post-body-post-title"' expr:name='data:post.id + "-p
這後面是不是有缺少東西呢
我照做後，無法儲存耶
不知到哪邊出錯了
建議您改用布丁式Blogger自動摘要功能(jQuery版)看看！
回覆刪除http://pulipuli.blogspot.com/2009/03/bloggerjquery.html
謝謝你的教學
回覆刪除很清楚,滿好懂的
謝謝您的支持！
回覆刪除以後我只會維護jQuery版本，有興趣的話也可以參考看看喔。連結在上面。
这个方法很不错，但是他默认会将独立页面默认显示摘要，有没有其他好多办法，如做个判断语句什么的，我想的是做个判断语句，但是还不清楚在哪里判断！
回覆刪除这是独立页面的效果：
http://blog.kban.info/p/about-me_21.html
在文章中加入
回覆刪除他就會判斷摘要到此為止了。
文內我也有說明喔XD
請再仔細看一次吧
博主的这个代码真是完善，已经弄好了，多谢博主！
回覆刪除