javascript-Blogger主题的“下一步”和“上一步”按钮
作者：互联网
这可能会花费很多时间,并且可能是一个很难回答的问题,但请提供帮助.
我有一个博客http://rawmangaread.blogspot.in/
这是一个阅读日本漫画的博客.
这个博客的主题实际上并未完全开发出版,我下载并应用了它,尽管我几乎在必要的地方完成了编码,但仍然存在一些问题.
其中之一是“下一步”和“上一步”按钮.对于临时用途,我放置了data：newerPageUrl和data：olderPageUrl
上面的两个标签都用于链接到上一篇和下一篇文章.
由于这是一个漫画网站,因此我希望下一个按钮能够正常工作,直到显示到漫画标题的最后一章(在相同类别下)的末尾为止,并出现错误,提示下一章尚不可用.
排除错误部分,现在我只想让“下一步”按钮转到漫画的“下一章”,然后停在该漫画的最后一章.
主题中已经存在的代码是：
<nav class='op-pagi'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' 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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> Next <i class='fa fa-angle-right'/>
</a>
</nav>
让我更轻松地简化我的想法,然后告诉您：
漫画是漫画的一种.
这些漫画通常分为不同类型.
一个漫画显然可以具有不同的流派.
我提到的这些漫画的类型是：浪漫,学校,喜剧,动作,冒险等.
在我的博客中,我使用这些类型的标签.
假设漫画中有3章：
Chuuko演示Koi ga Shitai！第1章
Chuuko演示Koi ga Shitai！第2章
Chuuko演示Koi ga Shitai！第3章
并假设以上所有3章都属于4个相同的标签,例如：
Romance, School, Comedy, Chuuko demo Koi ga Shitai!
因为它们是同名漫画Chuuko演示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！第2章
Label: Romance, School,Comedy,Chuuko demo Koi ga Shitai!
帖子3：
标题：《地牢探索者》第1章
Label: Action, Drama, Fantasy, Dungeon Seeker
假设我正在浏览第一篇文章：Chuuko demo Koi ga Shitai！第1章.
阅读后,我按NEXT按钮,然后转到下一章Chuuko demo Koi ga Shitai！第2章.
现在,当我按下NEXT按钮时,我不希望它进入Dungeon Seeker第1章.由于我正在使用data：newerPageUrl作为NEXT按钮html代码的HREF值,因此它将转到Dungeon Seeker第1章.
相反,我只是希望它到此结束.更简单地说：
演示当我按下下一步按钮时会发生什么：
地牢探索者第1章
下一个按钮：《地牢探索者》第二章
下一个按钮：《地牢探索者》第3章
下一个按钮：《地牢探索者》第4章
如果没有更多的章节…没有更多的下一个按钮.好像当我到达最新帖子时,NEXT按钮自动被禁用.看起来它已预装在主题中.
如果你了解的话
请提供代码来帮助您：)
解决方法:
添加样式代码
>在模板html中搜索此行]]>< / b：skin>
>现在将以下代码添加到]]>< / 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
标签：html,blogger,javascript,java 来源： https://codeday.me/bug/20191011/1893499.html