Blogger安裝文章自動摘要的方法
布丁布丁吃布丁
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字
Comments