如何在Blogger首页显示文章的摘要

Blog提供的模板样式都比较好看，视觉效果挺好的。但是有个问题一直让我耿耿于怀，就是Blog首页不能显示文章摘要，造成首页太长，看到浏览器侧面的导航条缩成小小一块，感觉很不好，而且不容易找到兴趣内容。于是在网上寻找显示摘要的办法，总结一下，存在手动和自动两种方案。

一、自动化方案：

这个方案使用了overflow属性，即定义一个文章显示的样式框，指定高度，超出高度的部分用省略号代替。首先在样式表中添加代码：
.post-body_new{

border-right:0 px;

border-top:0 px;

border-left:0px;

border-bottom:0px;

height:100px;

overflow:hidden;

text-overflow:ellipsis;

}

改动 height，就可以改动首页文章显示的高度，这里是100px。

接着在找到代码<p><data:post.body></p>，改为：

<b:if cond='data:blog.pageType !="item"'>

<div class='post-body2'>


<data:post.body/>


</div><p>......<a expr:href='data:post.url' title='阅读全文'><b>[阅读全文]</b></a></p>

<b:else/>

<data:post.body/>

</b:if>

优点：方便，不用人工介入，系统自动截取文章的一部分进行显示，而且页面非常整齐，一块一块的，真正体现什么叫豆腐块文章。

缺点：很短的文章，下面一样留一块空白，因为样式框的高度是固定的。不能控制显示内容。


二、手动方案：

找到代码<p><data:post.body></p>，改为

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>.fullpost
{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style type='text/css'>.fullpost
{display:none;}</style>

<p><data:post.body/></p>

<p>...<br/><a
expr:href='data:post.url'>阅读全文...</a></p>

</b:if>

保存模板。这个模板的意思就是，在文章页面全文显示，在首页，则隐藏<span
class="fullpost"></span>之间的内容并增加“阅读全文”的链接。因此，以后发表文章的时候，注意手动添加代码<span class="fullpost"></span>将需要需要隐藏的部分包起来。通常做法是在文章模板处添加帖子模板：

<span class="fullpost">

</span>

优点：自行控制显示内容，可以很好的把文章的摘要或者主要内容显示在首页上，一目了然。

缺点：稍复杂一些，在输入文章的时候要注意添加模板。

相关文章：
http://anyjavalee.blogspot.com/2007/05/blogblog-hack-blogstep-by-step-blog.html