Blogger 值得注意的模板 - Post 分页修复或替换？

Question

Blogger "Notable" 模板的 post 分页 link 在主页底部只显示一个 "More Posts" link。它缺少 "Previous Posts"。它还缺少传统的 "Home" link。 "More Posts" link 在 post 的最后一页正确消失。

我希望至少启用一个 "Previous Posts" link。

这似乎是 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>

唯一做的是 "Home" link 出现在 post 的最后一页，其中放置了 "More Posts" 上一页。无法尝试在网上找到的其他几个示例，因为它们引用了模板中不再存在的代码。

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

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

Answer 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 以使其正确显示

Answer 2

谢谢 Prayag Verma！效果很好！

"More Posts" link 代码是：

<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>

我决定替换旧版和新版 link 的默认文本。因此，我将 <data:messages.newerPosts/> 替换为 ← Previous，将 <data:messages.morePosts/> 替换为 Next →。

我还添加了边框，使它们更加突出。由于此按钮 class 的边距为 -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>

Blogger 值得注意的模板 - Post 分页修复或替换？

Blogger Notable Template - Post Pagination Fix or Replacement?

pagination

blogger