摘要方式显示文章

文章太长，同时摆7，8篇在首页没法看了

所以尝试以自动截取的方式给每篇文章生成摘要

至于方法嘛，基本是参考下面这篇文章：

WangLu's Tech Blog: 在Blogger首页显示文章摘要二解

Step 1:

新建一个模块，加入一下代码<!-- added by WangLu for displaying summary in the main page -->
<script type="text/javascript">
//決定是否顯示摘要
var all_summaries = document.getElementsByTagName("WL_SUMMARY");
var num_of_char = 500;

for (var i=0; i < all_summaries.length ; ++i)
{
var summary = all_summaries.item(i);

var b = summary.nextSibling; //body
while( (!b) || (b.className!="wl_body")) b = b.nextSibling;
if(!b) continue; //error!

var r = b.nextSibling; //readmore
while( (!r) || (r.className!="wl_read_more")) r = r.nextSibling;
if(!r) continue; //error!

if (b.innerHTML.length < num_of_char)
r.style.display="none"; //don't show 'read more' for short articles
else
{
//b.innerHTML = b.innerHTML.substring(0,num_of_char); //truncate
b.className="summary";
}
}
</script>非常奇怪，这段代码一定要加在模块里面，直接放在模板里面就不干活...做了一些尝试，不明白是什么原因。不过好在放在哪里本质上都是一样，我也就没有深究了。

Step 2

加入以下用于显示摘要的CSS/* 用于显示摘要
----------------------------------------------- */

.summary{
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
OVERFLOW: hidden;
BORDER-LEFT: 0px; BORDER-BOTTOM: 0px;
HEIGHT: 400px;//控制摘要的长短
TEXT-OVERFLOW: ellipsis;
}这个其实就是一个限制高度的框而已，决定了原文最终能有多少被实际显示出来。

Step 3

将模块都展开，把用于显示正文的<span name='zoom'><p><data:post.body/></p></span>给改为 <!-- 用于显示摘要--->
<b:if cond='data:blog.pageType == "item"'>
<span name='zoom'><p><data:post.body/></p></span>
<b:else/>
<WL_SUMMARY/>
<div class='wl_body'>
<span name='zoom'><p><data:post.body/></p></span>
</div>
<div class='wl_read_more'>
<p>...</p>
<a expr:href='data:post.url'>[阅读全文]</a>
</div>
</b:if>
<!-- 用于显示摘要-over-->
以上的代码和参考材料里面的不太一样，是因为这里同时还作了zoom功能