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

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

我有一个博客http://rawmangaread.blogspot.in/这是一个阅读日本漫画的博客。

这个博客的主题实际上发布的还没有完全开发。我下载并应用它,即使我在必要的地方几乎完成了编码,但是遗漏了一些问题。

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

由于这是一个漫画网站, 我希望下一个按钮工作,直到漫画标题的最后一章的结尾 (在相同的类别下),并给出错误说下一章尚不可用。

暂时离开错误部分,现在我想要的只是下一个按钮转到漫画的下一章并停在漫画的最后一章。

主题中已有的代码是:

 

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

假设一个漫画有3章:
Chuuko演示锦鲤ga Shitai! 第1章
Chuuko演示锦鲤ga Shitai! 第2章
Chuuko演示锦鲤ga Shitai! 第3章

并且假设以上3个章节都有4个相同的标签,如:

浪漫,学校,喜剧,Chuuko演示锦鲤ga Shitai!

因为他们是同一个标题漫画Chuuko演示锦鲤ga Shitai的章节

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

第1篇:

标题:Chuuko演示锦鲤ga Shitai! 第1章

标签:浪漫,学校,喜剧,Chuuko演示锦鲤ga Shitai!

post2:

标题:Chuuko演示锦鲤ga Shitai! 第2章

标签:浪漫,学校,喜剧,Chuuko演示锦鲤ga Shitai!

post3:

标题:Dungeon Seeker第1章

标签:动作,戏剧,幻想,地下城寻找者

假设我正在浏览第一篇文章:Chuuko演示锦鲤ga Shitai! 第1章。

看完后我按下NEXT按钮,然后进入下一章Chuuko演示锦鲤ga Shitai! 第2章。

现在,当我按下NEXT按钮时,我不希望它转到Dungeon Seeker第1章。它将进入地下城寻求者第1章,因为我使用数据:newerPageUrl作为NEXT按钮html代码的HREF值。
相反,我只是希望它在那里结束。

更简单:
演示按下按钮时会发生什么:
Dungeon Seeker第1章
下一个按钮:Dungeon Seeker第2章
下一个按钮:Dungeon Seeker第3章
下一个按钮:Dungeon Seeker第4章
如果没有更多章节……不再有下一个按钮。

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

添加样式代码

  1. 在模板html ]]>搜索此行

  2. 现在将以下代码添加到]]>

.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 svg {display:block; margin:0 auto; padding:0} .nav-slide .icon-wrap {position:relative; z-index: 100;显示:块;填充:20px;背景颜色:#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;玛格 in: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%}。导航滑动{-webkit-transform:scale(0.6); transform:scale(0.6)}}

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