[转]博客自动显示摘要(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后面的文章,不会加快网页速度,可能还会慢些。

没有评论: