28 Nov 06 关于本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标记这个步骤中你可以研究一下我所使用的这段代码

<div class="post">
<a name="<$BlogItemNumber$>"></a>
<blogItemTitle>
<h3 class="post-title">
<blogItemUrl>
<a href="<$BlogItemUrl$>" title="external link">
</blogItemUrl>
<a href="<$BlogItemPermalinkUrl$>"><$BlogItemTitle$>
</a>
</h3>
</blogItemTitle>
<div class="post-body">
<itemPage>
<div><$BlogItemBody$></div>
</itemPage>
<mainOrArchivePage>
<div>
<a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
+/- 展开文章/返回</a>
<br />
<span class="posthidden" id="<$BlogItemNumber$>1">
<$BlogItemBody$>
</span>
</div>
</mainOrArchivePage>
</div>

28 Nov 06 关于本blog首页中的"展开/隐藏帖子"

相关日志

Leave a Comment

订阅

赞助

留言

新文

标签

友链