2008年7月24日星期四

在首页展开收缩文章即增加阅读全文选项的简化更新版

主要就是一个js脚本的代码简化了,所以改不改都无所谓。像我追求完美就当然改了~~

感谢原作者neo的出色工作。

第一步,也是我说的代码简化的部分,以前已经使用此hack的朋友只需要把这一步js脚本改一下即可。



切换到 布局 的 修改HTML 项目,把下方的js脚本整体复制到 代码的上方。

<script type="text/javascript">



var fade = false;

function showFull(id) {

var post = document.getElementById(id);

var spans = post.getElementsByTagName('span');

for (var i = 0; i &lt; spans.length; i++) {

if (spans[i].id == "fullpost") {

if (fade) {

spans[i].style.background = peekaboo_bgcolor;

Effect.Appear(spans[i]);

} else spans[i].style.display = 'inline';

}

if (spans[i].id == "showlink")

spans[i].style.display = 'none';

if (spans[i].id == "hidelink")

spans[i].style.display = 'inline';

}

}





function hideFull(id) {

var post = document.getElementById(id);

var spans = post.getElementsByTagName('span');

for (var i = 0; i &lt; spans.length; i++) {

if (spans[i].id == "fullpost") {

if (fade) {

spans[i].style.background = peekaboo_bgcolor;

Effect.Fade(spans[i]);

} else spans[i].style.display = 'none';

}

if (spans[i].id == "showlink")

spans[i].style.display = 'inline';

if (spans[i].id == "hidelink")

spans[i].style.display = 'none';

}

post.scrollIntoView(true);

}



function checkFull(id) {

var post = document.getElementById(id);

var spans = post.getElementsByTagName('span');

var found = 0;

for (var i = 0; i &lt; spans.length; i++) {

if (spans[i].id == "fullpost") {

spans[i].style.display = 'none';

found = 1;

}

if ((spans[i].id == "showlink") &amp;&amp; (found == 0))

spans[i].style.display = 'none';

}

}



</script>







第二步:第一步完成后保存,然后在代码框右上方的 扩展窗口小部件模板 选项上打勾。接着在博客文章 添加红色部分代码到 博客文章 页面元素下寻找类似代码,把红色部分代码添加进去即可。(如果你实在找不到类似的代码,就把整个代码全选复制到记事本里,然后通过记事本的搜索找

<b:includable id="post" var="post"> 这一行代码就可以找到了。)



<b:includable id='post' var='post'>

<div class='post uncustomized-post-template' 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 + "\");"'>阅读全文...</a></p>



</span>

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

<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>阅读概要...</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">前即可。

3 评论:

匿名 说...

呵,最近我正在努力地找这个东东

匿名 说...

不成功?
closing不完整?

匿名 说...

什么意思?我帮chenbo搞了一次,完全按这篇文章写的代码复制做的。

完全成功。不成功话请检查是否完全按文章写的做的。

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆