博客自动显示摘要(read more)的方法-blogger.com优化

blogger.com已经推出了官方的read more功能，当你在控制台写文章的时候，点击插入换行符，就可以达到显示摘要的功能。但是本人比较懒，都是通过Google docs写文章，再加上以前写了好多文章了，不想再为每篇文章加上read more断点了，找到了一个一劳永逸的方法解决博客自动显示摘要(read more)的问题。

这个博客自动显示摘要也有手动模式和自动模式，自动模式修改完代码就不要在进行任何操作了，手动模式是对特殊的页面进行操作，代码对博客最近推出的静态页面支持不够好，需要手动模式。

---

方法如下，由于每个人的模板代码都可能不同，红色代码为搜寻的切入口：
1.“控制台”-“布局”-“修改 HTML”，勾选“扩展 小窗口部件模板”，同时请保存原有模板以防不测！
2.查找到下面的代码添加.link_fullpost的css样式表：

</head>

在后面添加如下代码：

<script type="text/javascript" src="http://forbloggeruse.googlecode.com/svn/trunk/digest_blogbody.js"></script>
<style tyle="text/css">
.post-body .link_fullpost {
  font-size: 100%;
  margin: 1em;
  display:block;
}
</style>

3.加上返回摘要的锚点，找到如下代码

<b:includable id='post' var='post'>
  <div class='post'>
<a expr:name='data:post.id'/>

修改为如下代码:

<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>

4.安装自动文章摘要，找到如下代码：

<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>

---

通过以上修改后，就会自动产生摘要，对于一些特殊的页面，如今年刚刚出现的静态页面支持不是太好，默认为显示摘要，如果你想直接显示出来，可以在文章的任何地方添加如下代码即可

<!--Show All-->

其他手动摘要的说明：

<!--Digest-->，在你设定的文章锚点出插入此代码，在这之前的文章会显示出来，后面的会隐藏起来。
<!--Hidden All-->与<!--Show All-->，一個是隐藏全文、一個是显示全文，插入在文章任何地方皆可

说明：这个方法和官方显示摘要的方法不同，官方提供的read more方法只是加载read more前面的代码，可以加快网页加载速度，而这个方法原理是全部显示文章后再通过css样式隐藏read more后面的文章，不会加快网页速度，可能还会慢些。

本文地址：http://blog.kban.info/2010/06/read-more-bloggercom.html
相关文章：http://pulipuli.blogspot.com/2007/02/blogger.html

本文地址：http://oceanban.blogspot.com/2010/06/read-more-bloggercom.html 原创文章如转载，请注明链接： 转自OceanBan的空间