在 Blogger 中导航相同标签下的下一篇和上一篇文章
Posted
技术标签:
【中文标题】在 Blogger 中导航相同标签下的下一篇和上一篇文章【英文标题】：Navigating Next And Prev Posts Under Same Labels in Blogger 【发布时间】：2017-04-04 15:47:25 【问题描述】：首先，我希望您阅读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 + "_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>
并使用我之前提出的问题，例如：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 => post.url)'/>;
var TitleArray = <b:eval expr='data:posts map (post => 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 标签没有特别的原因，只是把它放在那里，认为它可能会有所帮助。即使我在谷歌上搜索，我也不明白它的确切用法。如果它造成任何问题，请提及。
【问题讨论】：
【参考方案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 解析器将完全忽略脚本块并且不会评估任何数据标签
【讨论】：
Prayag，您了解我想要达到的目标和方式吗？即使在更改之后，代码也无法按照我的意愿工作。你对我帮助很大......所以你能帮我到最后吗？ 我可以使用onclick='functionname();'
是的，如果您不想修改脚本，也可以使用onclick 属性。我会调查***.com/questions/42929419/…的问题，看看我能不能想出一个解决方案来解决它
pastebin.com/taURKjLF 该链接用于相关帖子代码。因为我想要的代码是或可能几乎与此相关。
Prayag 你知道有什么网站可以上传 JS 文件并在我的博客中使用吗？【参考方案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 => post.url)'/>;
var TitleArray = <b:eval expr='data:posts map (post => 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>
【讨论】：
【参考方案3】：您可以将此代码粘贴到发布小部件中
<b:includable id='pager_chapter' var='type'>
<b:if expr:cond='data:post.labels any (l => l.name != data:type.name)'>
<script type='text/javascript'>var selectchap = false;</script>
</b:if>
<b:if expr:cond='data:post.labels any (l => 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 = "<span class='material-icons' style='font-size:2.5rem;'>chevron_left</span>";
var postNext = "<span class='material-icons' style='font-size:2.5rem;'>chevron_right</span>";
var postIndex = "<span class='material-icons' style='font-size:2.5rem;'>list</span>";
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>"
elsedocument.write("<style>.pager-jsdisplay:none;</style>")
;
/*]]>*/
</script>
<script defer='defer' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=ykpager&max-results=99999999"' type='text/javascript'/>
<script defer='defer' expr:src='"/feeds/posts/summary/-/" + data:type.name + "/" + data:label.name + "?orderby=published&alt=json-in-script&callback=yktocs&max-results=1"' type='text/javascript'/>
</b:if>
</b:loop>
</b:includable>
在<data:post.body/>之后粘贴代码
<b:include data='name : "Novel"' name='pager_chapter'/>
您可以阅读完整教程How To Make Next and Prev Button By Label on Blogger
【讨论】：
以上是关于在 Blogger 中导航相同标签下的下一篇和上一篇文章的主要内容，如果未能解决你的问题，请参考以下文章
laravel写出文章的上一篇和下一篇并进行MySQL语句性能测试