2009-07-19

如何为blogger创建可扩展的帖子摘要?

使用此技巧,您可以选择显示自帖子开头截至帖子任意处的一小段文字,作为一个引子,引起读者对全文的好奇心。如果用户要阅读帖子的余下部分,可以点击链接查看全文。如果您需要在某一页安排很多长文章,利用这一方法就会非常方便。请注意,要实现此功能,需要先启用帖子页

此功能包含三个组成部分:条件 CSS、每个帖子的"了解更多信息"链接、对使用此功能的帖子进行的修改。现在让我们来逐一了解它们。

条件 CSS

我们将使用条件标记来更改帖子在不同页上的显示方式。根据您所拥有的模板类型,在样式表中添加以下代码:

(用于传统模板)

<MainOrArchivePage>      span.fullpost {display:none;}  </MainOrArchivePage>    <ItemPage>      span.fullpost {display:inline;}   </ItemPage>

(用于布局)

<b:if cond='data:blog.pageType == "item"'>      span.fullpost {display:inline;}  <b:else/>     span.fullpost {display:none;}   </b:if>

样式表通常接近模板顶部,在 <style></style> 标记之间。如果您的样式表在一个单独的文件中,则仍需将这些代码行添加到模板中,这样条件标记才可以使用。请确保 <style> 标记添加到了它们周围。

我们在这里做的工作就是定义一个名为"fullpost"的类,它只会在帖子页(固定链接)上显示。每个帖子都有一个部分使用此类(这一点我们会在后面看到)。

"了解更多信息"链接

在模板中 <$BlogItemBody$><data:post.body/> 标记后的某个位置添加以下代码:

(用于传统模板)

<MainOrArchivePage><br />  <a href="<$BlogItemPermalinkURL$>">了解更多信息!</a>  </MainOrArchivePage>

(用于布局)

<b:if cond='data:blog.pageType != "item"'><br />     <a expr:href='data:post.url'>了解更多信息!</a>  </b:if>

此链接仅出现在主页和存档页上,它可以将读者引向包含帖子全文的帖子页。当然,您也可以使用自己喜欢的任何文字来替换"了解更多信息!"。

帖子修改

我们需要的最后一部分是实际帖子中的一小段代码。要使用此功能的每个帖子都需要以下代码:

<span class="fullpost"></span>

如果您不希望为每个帖子键入此代码,可以将它放入帖子模板中。您需要在 span 标记的外侧输入摘要文字,在 span 标记的内侧输入其余内容,例如:

这是帖子的开头。<span class="fullpost">这是它的其余部分。</span>

现在,当读者访问您的 blog 时,将看到如下所示的帖子:

这是帖子的开头。
了解更多信息!
点击此链接即会转到包含完整内容的帖子页:
这是帖子的开头。这是它的其余部分。
 
From Blogger help files.