javascript - Blogger 主题的下一个和上一个按钮

Question

这可能会花费很多时间，而且可能是一个很难回答的问题，但请帮忙。

我有一个博主博客这是一个阅读日本漫画的博客。

这个博客的主题实际上是在没有完全开发的情况下发布的。我下载并应用了它，尽管我几乎完成了必要地方的编码，但仍然遗漏了一些问题。

其中一个是 Next 和 Prev 按钮。对于临时用途，我放置了 data:newerPageUrl 和 data:olderPageUrl以上两个标签用于链接到上一篇文章和下一篇文章。

因为这是一个漫画网站，我希望下一个按钮能够工作，以便它一直到漫画标题的最后一章结束(在相同的类别下)并给出错误说下一章还没有。

将错误部分排除在外，现在我想要的只是让“下一步”按钮转到漫画的下一章并停在该漫画的最后一章。

主题中已有的代码是:

<nav class='op-pagi'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
<i class='fa fa-angle-left'/> Prev</a>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> Next <i class='fa fa-angle-right'/>
</a>
</nav>

让我更轻松地简化我的想法并告诉你:漫画是漫画的一种。这些漫画通常分为不同的类型。
一部漫画显然可以分为不同的类型。我提到的这些漫画的类型是:浪漫、学校、喜剧、 Action 、冒险等。
在我的博客中，我使用这些流派作为标签。

假设一部漫画有 3 章:
Chuuko demo Koi ga Shitai!第一章
Chuuko demo Koi ga Shitai!第二章
Chuuko demo Koi ga Shitai!第三章

假设以上所有 3 章都属于 4 个相同的标签，例如:

Romance, School, Comedy, Chuuko demo Koi ga Shitai!

因为它们是同名漫画 Chuuko demo Koi ga Shitai!

假设我在博客中发布了 3 篇文章:

Post 1:

Title : Chuuko demo Koi ga Shitai! Chapter 1

Label: Romance, School,Comedy,Chuuko demo Koi ga Shitai!

帖子 2:

标题:Chuuko demo Koi ga Shitai!第二章

Label: Romance, School,Comedy,Chuuko demo Koi ga Shitai!

帖子 3:

标题:地牢探索者第 1 章

Label: Action, Drama, Fantasy, Dungeon Seeker

假设我正在浏览第一篇文章:Chuuko demo Koi ga Shitai!第一章。

阅读后我按下 NEXT 按钮，它会转到下一章 Chuuko demo Koi ga Shitai!第二章。

现在，当我按下 NEXT 按钮时，我不希望它转到 Dungeon Seeker 第 1 章。它将转到 Dungeon Seeker 第 1 章，因为我使用 data:newerPageUrl 作为下一步按钮 html 代码。
相反，我只是希望它就此结束。

更简单:
演示当我按下一个按钮时会发生什么:
地下城探索者第一章
下一步按钮:地牢探索者第 2 章
下一步按钮:地牢探索者第 3 章
下一步按钮:地牢探索者第 4 章
如果没有更多的章节......没有更多的下一步按钮。

好像当我到达最新的帖子时 NEXT 按钮自动被禁用。看起来它已预装在主题中。
如果那时你明白了，请提供代码帮助:)

Answer 1

添加样式代码

1. 在模板 html 中搜索此行 ]]></b:skin>

2. 现在在]]></b:skin>之前添加以下代码

.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-slide a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-slide a.prev{left:0}.nav-slide a.next{right:0}.nav-slide a svg{display:block;margin:0 auto;padding:0}.nav-slide .icon-wrap{position:relative;z-index:100;display:block;padding:20px;background-color:#fff}.nav-slide svg.icon{fill:#34495e}.nav-slide div{position:absolute;top:50%;background-color:#34495e;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.nav-slide a.prev div{left:0;padding-left:86px;padding-right:10px;-webkit-transform:translateY(-50%) translateX(-100%);transform:translateY(-50%) translateX(-100%)}.nav-slide a.next div{right:0;padding-right:86px;padding-left:10px;text-align:right;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.nav-slide h3{position:relative;margin:0;padding:20px 0;color:#fff;white-space:nowrap;font-weight:300;font-size:1.3em !important;line-height:1.5}.nav-slide div h3 span{display:block;color:#95a5a6;font-style:italic;font-size:65%;font-family:Baskerville,"Baskerville Old Face","Hoefler Text",Garamond,"Times New Roman",serif}.nav-slide a:hover div{-webkit-transform:translateY(-50%) translateX(0);transform:translateY(-50%) translateX(0)}@media screen and (max-width:520px){.nav-slide a.prev{-webkit-transform-origin:0 50%;transform-origin:0 50%}.nav-slide a.next{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.nav-slide a{-webkit-transform:scale(0.6);transform:scale(0.6)}}

完整源代码在这里:https://pastebin.com/frWjV4Ja