Blogger 值得注意的模板 - 发布分页修复或替换？答案

【问题标题】：Blogger Notable Template - Post Pagination Fix or Replacement?Blogger 值得注意的模板 - 发布分页修复或替换？
【发布时间】：2017-06-30 18:12:13
【问题描述】：

主页底部的 Blogger“Notable”模板的帖子分页链接仅显示“更多帖子”链接。它缺少一个“以前的帖子”。它也缺少传统的“主页”链接。 “更多帖子”链接正确地在帖子的最后一页消失。

我希望至少启用一个“以前的帖子”链接。

这似乎是 Google 有意为之，因为代码中包含以下内容：

<div class='blog-pager container' id='blog-pager'> <b:include cond='data:newerPageUrl' name='previousPageLink'/> <b:include cond='data:olderPageUrl' name='nextPageLink'/> <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/></div>

但在两个位置，每个代码包括：

<b:includable id='previousPageLink'><!-- Don't show --></b:includable>

<b:includable id='homePageLink'><!-- Don't show --></b:includable>

我试图通过首先改变这一行来解决这个问题：

<a expr:href='data:blog.homepageUrl'>Home</a>

唯一能做的是“主页”链接出现在帖子的最后一页上，其中放置了“更多帖子”之前的帖子。网上找到的其他几个示例无法尝试，因为它们引用了模板中不再存在的代码。

我还尝试了至少十几个第 3 方编号的分页编码方案，它们覆盖了 Blogger 的现有代码，但这些方案无法正常工作。

知道如何修复模板以启用可能有效的链接或第 3 方代码吗？

【问题讨论】：

标签： pagination blogger

【解决方案1】：

你需要更换 -

<b:includable id='previousPageLink'><!-- Don't show --></b:includable>

与

<b:includable id='previousPageLink'>
    <a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:title='data:messages.newerPosts'>
        <data:messages.newerPosts/>
    </a>
</b:includable>

替换

<b:includable id='homePageLink'><!-- Don't show --></b:includable>

与

<b:includable id='homePageLink'>
    <a class='home-link flat-button ripple' expr:href='data:blog.homepageUrl' expr:title='data:messages.home' >
        <data:messages.home/>
    </a>
</b:includable>

在页面导航中显示以前的帖子（现在称为较新的帖子）和主页按钮。根据使用的主题，您需要添加自定义 CSS 以使其正确显示

【讨论】：

【解决方案2】：

感谢 Prayag Verma！效果很好！

“更多帖子”链接代码是：

<b:includable id='nextPageLink'>
<a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
<data:messages.morePosts/>
</a>
</b:includable>

我决定替换旧链接和新链接的默认文本。因此，我将<data:messages.newerPosts/> 替换为&#8592; Previous，并将<data:messages.morePosts/> 替换为Next &#8594;。

我还添加了边框以使它们更加突出。由于此按钮类的边距为 -8，因此需要将边距重置为 0，否则相邻的两个按钮会重叠。然后将 8 像素的边距添加到“下一步”按钮，这样他们就不会触摸。

因为这个模板在顶部使用了一个粘性菜单，所以按钮上的主页按钮是不必要的，所以我把它隐藏了。 blog-pager 上的默认上边距太大，因此被减小了。

需要在</body>标签上方插入以下代码：

<style>
.blog-pager a{
margin: 0px;
border: 1px solid #25a186;
}

.blog-pager a.blog-pager-older-link.flat-button.ripple{
margin-left: 8px;
}

.blog-pager a.home-link.flat-button.ripple{
display:none;
}

.blog-pager{
margin-top: 14px;
</style>

【讨论】：