在 Blogger 中导航相同标签下的下一篇和上一篇文章

Question

首先，我希望您阅读
Next and Prev Buttons for Blogger Theme

了解我想要什么的概念？那么让我们继续我的问题：

现在我有了已经嵌入到主题中的下一个和上一个按钮的代码，它们是：

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

并使用我之前提出的问题，例如：
How to store the URL's and Titles of a list of posts under same label into a String array in Blogger 和
How to match and point to a particular data in array in Blogger

我自己做了一个代码：

<script>
//<![CDATA[

<b:if cond='data:blog.searchLabel'>

  var URLArray = <b:eval expr='data:posts map (post =&gt; post.url)'/>;
  var TitleArray = <b:eval expr='data:posts map (post =&gt; post.title)'/>;  

var cURL = "<data:post.url/>";
var gTitle = "<data:post.title>";
function IndexFinder(element,index) {
   return element == cURL
}
function IndexFinderT(element,index){
   return element == gTitle;
}
var sU = URLArray.findIndex(IndexFinder);
var sT = TitleArray.findIndex(IndexFinderT);

function prevURL(){
    var prevU=URLArray[sU-1];
return prevU;
}
function prevTitle(){
    var prevT=TitleArray[sT-1];
return prevT;
}
function nextURL(){
    var nextU=URLArray[sU+1];
return nextU;
}
function nextTitle(){
    var nextT=TitleArray[sT+1];
return nextT;
}

</b:if>
//]]>
</script>

现在我尝试通过更改 expr:href='data:olderPageUrl' to expr:href='prevURL()'
来使用我首先为下一个和上一个按钮显示的代码 标题也一样
expr:title='data:olderPageTitle' to expr:title='prevTitle()'
但没有用。

您能告诉我哪里出了问题以及如何解决吗？

注意：我使用 CDATA 标签没有特别的原因，只是把它放在那里，认为它可能会有所帮助。即使我在谷歌上搜索，我也不明白它的确切用法。如果它造成任何问题，请提及。

Answer 1

由于prevURL() 和prevTitle() 都是JavaScript 函数而不是Blogger 数据标签，因此您无需在属性前使用expr。

您将需要按如下方式修改函数 -

function prevURL(){
    var prevU=URLArray[sU-1];
    document.querySelector('.blog-pager-older-link').href = prevU;
}

function prevTitle(){
    var prevT=TitleArray[sT-1];
    document.querySelector('.blog-pager-older-link').title = prevT;
}

同样适用于下一页链接。无需更改页面的 HTML。

也正如另一个答案中提到的 Bassam 。不要将 JavaScript 包装在 CDATA 指令中，否则 Blogger 使用的 XML 解析器将完全忽略脚本块并且不会评估任何数据标签

Answer 2

使用 CDATA 可防止博主 XML 解析器解释像 <b:if cond='data:blog.searchLabel'> 这样的数据标签

从代码中删除//<![CDATA[ 和//]]> 或在博主标签后使用它们：

<script>

<b:if cond='data:blog.searchLabel'>

var URLArray = <b:eval expr='data:posts map (post =&gt; post.url)'/>;
var TitleArray = <b:eval expr='data:posts map (post =&gt; post.title)'/>;  
var cURL = "<data:post.url/>";
var gTitle = "<data:post.title>";

//<![CDATA[

function IndexFinder(element,index) {
   return element == cURL
}
function IndexFinderT(element,index){
   return element == gTitle;
}
var sU = URLArray.findIndex(IndexFinder);
var sT = TitleArray.findIndex(IndexFinderT);

function prevURL(){
    var prevU=URLArray[sU-1];
return prevU;
}
function prevTitle(){
    var prevT=TitleArray[sT-1];
return prevT;
}
function nextURL(){
    var nextU=URLArray[sU+1];
return nextU;
}
function nextTitle(){
    var nextT=TitleArray[sT+1];
return nextT;
}

//]]>

</b:if>

</script>

Answer 3

您可以将此代码粘贴到发布小部件中

<b:includable id='pager_chapter' var='type'>
<b:if expr:cond='data:post.labels any (l =&gt; l.name != data:type.name)'>
  <script type='text/javascript'>var selectchap = false;</script>
</b:if>
<b:if expr:cond='data:post.labels any (l =&gt; l.name == data:type.name)'>
  <script type='text/javascript'>var selectchap = true;</script>
</b:if>
<b:loop index='i' values='data:post.labels' var='label'>
  <b:if cond='data:i == 0'>
  <div class='pager-js rounded' id='pager-js'>
  <div class='_prev' id='prevjs'><a class='pager-js-nolink'><span class='material-icons' style='font-size:2.5rem;'>chevron_left</span></a></div>
  <div class='_index' id='indexjs'><a class='pager-js-nolink'><span class='material-icons' style='font-size:2.5rem;'>list</span></a></div>
  <div class='_next' id='nextjs'><a class='pager-js-nolink'><span class='material-icons' style='font-size:2.5rem;'>chevron_right</span></a></div>
  </div>
  <script type='text/javascript'>
    var postPrev = &quot;<span class='material-icons' style='font-size:2.5rem;'>chevron_left</span>&quot;;
    var postNext = &quot;<span class='material-icons' style='font-size:2.5rem;'>chevron_right</span>&quot;;
    var postIndex = &quot;<span class='material-icons' style='font-size:2.5rem;'>list</span>&quot;;
    var postID = <data:post.id/>;
    /*<![CDATA[*/
    if(selectchap==false){
      var yktocs=function(data){
        var i=0;
        for(;
        i<data.feed.entry.length;
        i++){
          var j=0;
          for(;
          j<data.feed.entry[i].link.length;
          j++){
            if("alternate"==data.feed.entry[i].link[j].rel){
              var entityUrl=data.feed.entry[i].link[j].href;
              break
            }
          }
          document.getElementById("indexjs").innerHTML="<a href='"+entityUrl+"' title='Index Novel'>"+postIndex+"</a>"
        }
      };
      var ykpager=function(data){
        var node={
          postlist:[]
        };
        var i=0;
        for(;
        i<data.feed.entry.length;
        i++){
          var j=0;
          for(;
          j<data.feed.entry[i].link.length;
          j++){
            if("alternate"==data.feed.entry[i].link[j].rel){
              var murl=data.feed.entry[i].link[j].href;
              break
            }
          }
          var videoId=data.feed.entry[i].id.$t;
          var CAPTURE_ID=videoId.substr(51,19);node.postlist.push({
            url:murl,id:CAPTURE_ID
          })
        }var v=node.postlist.findIndex((timeline_mode)=>{
          return timeline_mode.id==postID
        });
        var id=v+1;
        var cbs=node.postlist[id];
        if(null!=cbs){var g=Object.values(cbs)[0];
          var lnkDiv=document.getElementById("prevjs");
          lnkDiv.innerHTML="<a href='"+g+"' title='Chapter Sebelumnya'>"+postPrev+"</a>"
        }
        var q=v-1;
        var val=node.postlist[q];
        if(null!=val){
          var k=Object.values(val)[0];
          lnkDiv=document.getElementById("nextjs");
          lnkDiv.innerHTML="<a href='"+k+"' title='Chapter Selanjutnya'>"+postNext+"</a>"
        }
      }
    }
    else{document.write("<style>.pager-js{display:none;}</style>")
  };
    /*]]>*/
  </script>
  <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=ykpager&amp;max-results=99999999&quot;' type='text/javascript'/>
  <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:type.name + &quot;/&quot; + data:label.name + &quot;?orderby=published&amp;alt=json-in-script&amp;callback=yktocs&amp;max-results=1&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:includable>

在<data:post.body/>之后粘贴代码

<b:include data='{name : &quot;Novel&quot;}' name='pager_chapter'/>

您可以阅读完整教程How To Make Next and Prev Button By Label on Blogger