关于本blog首页中的”展开/隐藏帖子”

本blog使用了一个hack,可以在首页默认只显示帖子标题,而当你点击”展开”按钮的时候才会为您展示这个帖子,使页面空间更加紧凑。
很多朋友问我这是怎么做的,其实这在Blogger帮助中就有说明,如下:

此功能包含三个组成部分:CSS、Javascript,当然还有 Blogger 模板标记。现在让我们来逐一了解它们。
CSS
这是最简单的部分。不管是隐藏还是显示帖子,我们都需要讲上好几课才能说清楚,所以您可以简单地将下面两行代码粘贴到样式表中:
.posthidden {display:none}
.postshown {display:inline}
样式表通常接近模板顶部,在 <style> 与
</style>
标记之间。如果您的样式表在一个单独的文件中,则将这些代码行添加到该文件中即可,无需添加到模板中。Javascript
在模板的 <head></head> 标记间添加以下代码:
<script type=”text/Javascript”> function expandcollapse (postid) { whichpost = document.getElementById(postid); if (whichpost.className==”postshown”) { whichpost.className=”posthidden”; } else { whichpost.className=”postshown”; } }
</script>
这就是我们将在下面用来显示或隐藏帖子的功能。我们只需给它一个特定帖子的
ID,它就可以把这个帖子的 CSS 样式改为另一种。
Blogger 标记
现在我们的工具都已经到位了,可以把它们真正应用到我们的帖子中了。在模板的 <Blogger></Blogger>
标记间,您将看到显示帖子的那一部分代码。我们要用的代码如下所示:
<BlogItemTitle> <$BlogItemTitle$> </BlogItemTitle> <span class=”posthidden” id=”<$BlogItemNumber$>1″> <$BlogItemBody$><br /> </span>
<a href=”javascript:expandcollapse(‘<$BlogItemNumber$>1’)”>
[+/-] show/hide this post</a>
当然,您也可以根据需要进行修改,使之适合您的模板。比如,您可能想在此处添加其他格式标记,或为您的署名行或评论添加其他代码。显示出的文字”[+/-]
显示/隐藏此帖子”也可以更改。
这段代码最重要的部分就是包围 <$BlogItemBody$> 标记的 <span> 标记。您可以看到此部分开始是隐藏的,然后它使用 <$BlogItemNumber$>1 创建一个唯一的 ID。(额外的”1″是为了确保唯一性,防止模板已在其他处,比如永久链接,使用了此 Blog 项目号)。Javascript 链接于是使用相同的 ID,确保显示或隐藏正确的帖子。
模板上的一切都弄好后,只需保存更改并重新发布即可。无需再进行其他更改,新格式即会自动应用至您所有的帖子。
备注:
在对模板进行任何修改之前,都应该先备份。只需将所有代码复制并粘贴到硬盘上的文本文件中即可,这样,一旦出错还可以使用原来的模板。
显示/隐藏帖子还有另外一种方法:使用帖子摘要。每种方法都有自己的优点和缺点。
此方法的优点:只需更改模板,无需修改帖子。
缺点:只显示每个帖子的主题,没有摘要信息。该功能应用至所有帖子,不允许您选择性应用(比如,只应用于长帖子)。

如果对于这段代码依然感觉一头雾水,在Blogger标记这个步骤中你可以研究一下我所使用的这段代码

No Comment.