google.load("prototype", "1.6");

Saturday, June 9, 2007

收缩/展开文章,增加“阅读全文”选项

有时文章太长回使博客的首页很不好看,下面可以通过修改代码让文章收缩起来。效果如本博客。
建议每回修改代码前备份你的模版。
第一步:开始吧,在<head></head>间添加以下代码,以引用脚本文件(其中的脚本文件建议自己保存并传到Google pages上去)
<script type='text/javascript' src='http://yours/hackosphere.js' />
第二步:在你的模板(确定已选中 Expand Widget Templates)中找到ID为"Post"的includable,会看到下面类似的代码,将红色的地方加到你的代码中.

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

<b:if cond='data:post.title'>

<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<div class='post-header-line-1'/>



<div class='post-body'>

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

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

<b:else/>

<style>#fullpost {display:none;}</style>

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

<span id='showlink'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

以后在发表文章时,你只要把要隐藏的内容放在<span id="fullpost">
</span>之间,即<span id="fullpost">
你想隐藏的内容
</span>

第三步:找到Settings - Formatting( 格式设定),在最后的Post-template(文章模板)添加以下代码
摘要部分
<span id="fullpost">
隐藏部分
</span>
这样就方便了以后。这样就可以了。本文代码下载,然后上传到你的空间。

5 留言:

Unknown said...

你好!关于这个代码,以前我从其他博客也看到过使用了,一直很正常后来换模板什么的到现在最近突然这功能在首页就无法使用了,Google Pages网页也打不开,不知道是不是那段JS代码链接失效了,我看了下你这的JS不是GooglePages上的,所以整体重新弄了下,但是在保存的时候出现了如下提示:"由于格式错误,我们无法解析您的模板。请确保所有 XML 元素均已正确结束。
XML 错误信息:Attribute name "expr:" associated with an element type "a" must be followed by the ' = ' character." 请教下怎么回事谢谢了~!

X said...

不知道你的是不是这边问题这是我现在的代码,不知对你有用不?
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
不行的话把你修改的代码让我看看。

Unknown said...

呵呵,还是没用,我把代码都U给你了麻烦了,先就谢谢了。友情链接已经添加。

X said...

好像是语言规范的问题,把下面的代码:
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
换成该代码:
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
别的照旧。

Unknown said...

终于好了啊~!而且我那个outbrain评论插件也没失效,以前就是的怎么都用不了了,我以为这2个有冲突呢,现在都可以了。太感谢了~!O(∩_∩)O~

Post a Comment

Creative Commons License© 2007-2023 乐天士 --您是第 位浏览者--↑页首
悦来客栈 by sisea is licensed under a Creative Commons 署名-非商业性使用-禁止演绎 2.5 中国大陆 License.