How to Create HTML Sitemap in Blogger?

How to Create HTML Sitemap in Blogger?
答案及图片来自于站点DOCUMENTATIONS：

 https://blogging.pikitemplates.com/p/how-to-create-html-sitemap-in-blogger.html

1、如何创建 HTML 站点地图？

    转到Blogger 仪表板单击左侧边栏菜单中的页面部分，然后点击创建新页面并复制我们在下面提供的代码并将其粘贴到页面 HTML 部分中，而不是在撰写模式下。粘贴代码后保存并发布页面。至此，已经成功创建了Blogger HTML 站点地图页面。复制页面链接并在页脚菜单页面底部显示。

    代码如下：

<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap.js" type="text/javascript"></script><br /><link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/><br /><script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=pikisitemap" type="text/javascript"></script><br />

    现在完成了将代码保存在博客页面上。站点地图已创建。

2、 如何为特定标签创建 HTML 站点地图？
    转到 Blogger 仪表板 单击左侧边栏菜单中的页面部分，然后点击创建 新页面 并复制我们在下面提供的代码并将其粘贴到页面 HTML 部分中，而不是在撰写模式下。粘贴代码后保存并发布页面。
    请记住用您的帖子标签正确替换蓝色颜色标签小写和大写字母应该相同（意味着第一个字母是大写或不在帖子标签中正确检查）
另外，请记住在下面的蓝色文本中更改 h4 标签之间的标题。
至此，您已经 成功 创建了 Blogger HTML 站点地图页面。复制页面链接并在页脚菜单页面底部显示。

<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-label.js" type="text/javascript"></script><br /><link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/><br /><div class="stiemap-posts"><br /> <h4>Blogger Test</h4><br /> </div><br /><div class="stiemap-wrap"><br /><script src="/feeds/posts/default/-/My Label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script><br /></div><br />


    现在完成了将代码保存在博客页面上，并且您已经创建了一个特定的（仅用于一个标签的）标签 HTML 站点地图。 

 附带css、js代码：

<br /> <br /> <b>https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap.js</b><br /> 代码：<br /> var postTitle=new Array,postUrl=new Array,postPublished=new Array,postDate=new Array,postLabels=new Array,postRecent=new Array,sortBy="titleasc",numberfeed=0;function pikisitemap(t){!function(){if("entry"in t.feed){var e=t.feed.entry.length;numberfeed=e,ii=0;for(var s=0;s<e;s++){for(var o,i=t.feed.entry[s],p=i.title.$t,l=i.published.$t.substring(0,10),r=0;r<i.link.length;r++)if("alternate"==i.link[r].rel){o=i.link[r].href;break}var a="";for(r=0;r<i.link.length;r++)if("enclosure"==i.link[r].rel){a=i.link[r].href;break}var n="";if("category"in i)for(r=0;r<i.category.length;r++){var b=(n=i.category[r].term).lastIndexOf(";");-1!=b&&(n=n.substring(0,b)),postLabels[ii]=n,postTitle[ii]=p,postDate[ii]=l,postUrl[ii]=o,postPublished[ii]=a,postRecent[ii]=s<10,ii+=1}}}}(),sortPosts(sortBy="titledesc"),sortlabel(),displayToc()}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s;s=postPublished[t];postPublished[t]=postPublished[e],postPublished[e]=s;s=postRecent[t];postRecent[t]=postRecent[e],postRecent[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o),"orderlabel"==t&&postLabels[s]>postLabels[o]&&e(s,o)}function sortlabel(){sortPosts(sortBy="orderlabel");for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],firsti=t;do{t+=1}while(postLabels[t]==temp1);if(e=t,sortPosts2(firsti,t),e>postTitle.length)break}}function sortPosts2(t,e){function s(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s;s=postPublished[t];postPublished[t]=postPublished[e],postPublished[e]=s;s=postRecent[t];postRecent[t]=postRecent[e],postRecent[e]=s}for(var o=t;o<e-1;o++)for(var i=o+1;i<e;i++)postTitle[o]>postTitle[i]&&s(o,i)}function displayToc(){for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],document.write(""),document.write('<div class="stiemap-posts"><h4>'+temp1+'</h4><div class="stiemap-wrap">'),firsti=t;do{document.write("<p>"),document.write('<a " href="'+postUrl[t]+'">'+postTitle[t]),1==postRecent[t]&&document.write(" - <strong><span>New!</span></strong>"),document.write("</a></p>"),t+=1}while(postLabels[t]==temp1);if(e=t,document.write("</div></div>"),sortPosts2(firsti,t),e>postTitle.length)break}}<br /> <br /> <b> https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css</b><br /> 代码：<br /> <br /> .stiemap-posts{position:relative;display:block;margin:14px 0 20px;}<br />.stiemap-posts h4{background:rgb(206 204 204 / 0.34);color:#000;padding:4px 12px;border-radius:4px;font-size:16px;border-bottom:2px solid #b5b5b5;margin:0 0 3px;line-height:21px;}<br />.stiemap-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background:rgb(246 252 255 / 0.13);border:1px solid rgb(255 255 255 / 0.38);border-radius:5px;padding:0 10px;box-shadow:2px 3px 8px 1px rgb(167 225 255 / 0.28);}<br />.stiemap-wrap p{width:calc((100% - 10px) / 2);margin:3px 0;}<br />.stiemap-wrap p a{position:relative;font-size:15px;line-height:25px;display:block;margin:9px 0 0;font-weight:500;color:#000;border-bottom:1px solid #d4ebf9;}<br />.stiemap-wrap p strong span{color:#e00303;font-size:13px;font-weight:600;}<br />.stiemap-posts h4:before{content:"\f142";float:left;color:#000;font-weight:900;font-family:'Font Awesome 5 Free';font-size:12px;margin:0 4px 0 0;}<br />.stiemap-wrap p a:before{content:"\f192";float:left;color:#000;font-weight:500;font-family:'Font Awesome 5 Free';font-size:12px;line-height:26px;margin:0 4px 0 0;}<br />.stiemap-wrap p a:hover{color:#1616fb;}<br />@media screen and (max-width:640px){.stiemap-wrap{display:block;}<br />.stiemap-wrap p{width:100%;}<br />}<br /> <br /> <br /> <b><script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-label.js" type="text/javascript"></script></b><br /> 代码：<br />var totalposts = 9999;<br />var standardstyling = true;<br />function showrecentposts(json) {<br />for (var a = 0; a < totalposts; a++) {<br />var entry = json.feed.entry[a];<br />var posttitle = entry.title.$t;<br />var posturl;<br />if (a == json.feed.entry.length) break;<br />for (var b = 0; b < entry.link.length; b++) {<br />if (entry.link[b].rel == 'alternate') {<br />posturl = entry.link[b].href;<br />break;<br />}}<br />posttitle = posttitle.link(posturl);<br />if (standardstyling) document.write('<p>');<br />document.write(posttitle);}<br />if (standardstyling) document.write('</p>');<br />}<br /> <br /> <br /><b> <link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/></b><br /> <br /> 代码：<br /> <br />.stiemap-posts{position:relative;display:block;margin:14px 0 20px;}<br />.stiemap-posts h4{background:rgb(206 204 204 / 0.34);color:#000;padding:4px 12px;border-radius:4px;font-size:16px;border-bottom:2px solid #b5b5b5;margin:0 0 3px;line-height:21px;}<br />.stiemap-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background:rgb(246 252 255 / 0.13);border:1px solid rgb(255 255 255 / 0.38);border-radius:5px;padding:0 10px;box-shadow:2px 3px 8px 1px rgb(167 225 255 / 0.28);}<br />.stiemap-wrap p{width:calc((100% - 10px) / 2);margin:3px 0;}<br />.stiemap-wrap p a{position:relative;font-size:15px;line-height:25px;display:block;margin:9px 0 0;font-weight:500;color:#000;border-bottom:1px solid #d4ebf9;}<br />.stiemap-wrap p strong span{color:#e00303;font-size:13px;font-weight:600;}<br />.stiemap-posts h4:before{content:"\f142";float:left;color:#000;font-weight:900;font-family:'Font Awesome 5 Free';font-size:12px;margin:0 4px 0 0;}<br />.stiemap-wrap p a:before{content:"\f192";float:left;color:#000;font-weight:500;font-family:'Font Awesome 5 Free';font-size:12px;line-height:26px;margin:0 4px 0 0;}<br />.stiemap-wrap p a:hover{color:#1616fb;}<br />@media screen and (max-width:640px){.stiemap-wrap{display:block;}<br />.stiemap-wrap p{width:100%;}<br />}<br />