如何爲我的博客博客創建站點地圖頁面

Question

我從我的博客中想要實現的模板中找到一個片段。我必須將這些代碼放在我的模板中，這樣當我在博客中創建一個新頁面並在其上寫入[sitemap]時，該頁面就會成爲我博客的站點地圖。請幫助我這樣做。下面是代碼：

if (static_page_text === "[sitemap]") { 
    var postbody = $('.static_page .post-body'); 
    $.ajax({ 
     url: "/feeds/posts/default?alt=json-in-script", 
     type: 'get', 
     dataType: "jsonp", 
     success: function(dataZ) { 
      var blogLabels = []; 
      for (var t = 0; t < dataZ.feed.category.length; t++) { 
       blogLabels.push(dataZ.feed.category[t].term) 
      } 
      var blogLabels = blogLabels.join('/'); 
      postbody.html('<div class="siteLabel"></div>'); 
      $('.static_page .post-body .siteLabel').text(blogLabels); 
      var splabel = $(".siteLabel").text().split("/"); 
      var splabels = ""; 
      for (get = 0; get &lt; splabel.length; ++get) { 
       splabels += "<span>" + splabel[get] + "</span>" 
      } 
      $(".siteLabel").html(splabels); 
      $('.siteLabel span').each(function() { 
       var mapLabel = $(this); 
       var mapLabel_text = $(this).text(); 
       $.ajax({ 
        url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script", 
        type: 'get', 
        dataType: "jsonp", 
        success: function(data) { 
         var posturl = ""; 
         var htmlcode = '<div class="mapa">'; 
         for (var i = 0; i &lt; data.feed.entry.length; i++) { 
          for (var j = 0; j &lt; data.feed.entry[i].link.length; j++) { 
           if (data.feed.entry[i].link[j].rel == "alternate") { 
            posturl = data.feed.entry[i].link[j].href; 
            break 
           } 
          } 
          var posttitle = data.feed.entry[i].title.$t; 
          var author = data.feed.entry[i].author[0].name.$t; 
          var get_date = data.feed.entry[i].published.$t, 
           year = get_date.substring(0, 4), 
           month = get_date.substring(5, 7), 
           day = get_date.substring(8, 10), 
           date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year; 
          var tag = data.feed.entry[i].category[0].term; 
          var content = data.feed.entry[i].content.$t; 
          var $content = $('<div>').html(content); 
          var src2 = data.feed.entry[i].media$thumbnail.url; 
          htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>' 
         } 
         htmlcode += '</div>'; 
         mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>'); 
         $(document).on('click', '.mapasite h2', function() { 
          $(this).parent('.mapasite').addClass('active'); 
          $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle'); 
         }); 
         $(document).on('click', '.mapasite.active h2', function() { 
          $(this).parent('.mapasite').removeClass('active'); 
          $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle'); 
         }); 
        } 
       }); 
      }); 
     } 
    }); 
} 
</div> 
</script> 

Answer 1

這裏使用Blogger的全碼：在模板中，搜索</body>標籤和它上面粘貼下面的HTML編碼。

<script type='text/javascript'> 
      //<![CDATA[ 
var static_page_text = $.trim($('.static_page .post-body').text()); 
if (static_page_text === "[sitemap]") { 
    var postbody = $('.static_page .post-body'); 
    $.ajax({ 
     url: "/feeds/posts/default?alt=json-in-script", 
     type: 'get', 
     dataType: "jsonp", 
     success: function(dataZ) { 
      var blogLabels = []; 
      for (var t = 0; t < dataZ.feed.category.length; t++) { 
       blogLabels.push(dataZ.feed.category[t].term) 
      } 
      var blogLabels = blogLabels.join('/'); 
      postbody.html('<div class="siteLabel"></div>'); 
      $('.static_page .post-body .siteLabel').text(blogLabels); 
      var splabel = $(".siteLabel").text().split("/"); 
      var splabels = ""; 
      for (get = 0; get < splabel.length; ++get) { 
       splabels += "<span>" + splabel[get] + "</span>" 
      } 
      $(".siteLabel").html(splabels); 
      $('.siteLabel span').each(function() { 
       var mapLabel = $(this); 
       var mapLabel_text = $(this).text(); 
       $.ajax({ 
        url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script", 
        type: 'get', 
        dataType: "jsonp", 
        success: function(data) { 
         var posturl = ""; 
         var htmlcode = '<div class="mapa">'; 
         for (var i = 0; i < data.feed.entry.length; i++) { 
          for (var j = 0; j < data.feed.entry[i].link.length; j++) { 
           if (data.feed.entry[i].link[j].rel == "alternate") { 
            posturl = data.feed.entry[i].link[j].href; 
            break 
           } 
          } 
          var posttitle = data.feed.entry[i].title.$t; 
          var author = data.feed.entry[i].author[0].name.$t; 
          var get_date = data.feed.entry[i].published.$t, 
           year = get_date.substring(0, 4), 
           month = get_date.substring(5, 7), 
           day = get_date.substring(8, 10), 
           date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year; 
          var tag = data.feed.entry[i].category[0].term; 
          var content = data.feed.entry[i].content.$t; 
          var $content = $('<div>').html(content); 
          var src2 = data.feed.entry[i].media$thumbnail.url; 
          htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>' 
         } 
         htmlcode += '</div>'; 
         mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>'); 
         $(document).on('click', '.mapasite h2', function() { 
          $(this).parent('.mapasite').addClass('active'); 
          $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle'); 
         }); 
         $(document).on('click', '.mapasite.active h2', function() { 
          $(this).parent('.mapasite').removeClass('active'); 
          $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle'); 
         }); 
        } 
       }); 
      }); 
     } 
    }); 
} 
      //]]> 
</script> 

CSS代碼：在模板中，搜索</body>標籤和它上面粘貼下面的HTML編碼。

.mapasite { 
     margin-bottom: 10px; 
     background-color: #F8F8F8 
    } 
    .mapasite.active .mapa { 
     display: block 
    } 
    .mapasite .mapa { 
     display: none 
    } 
    .mapasite h2 { 
     background-color: #EEE; 
     color: $(primary.color); 
     font-size: 15px; 
     padding: 10px 20px; 
     border-radius: 2px; 
     margin-bottom: 0; 
     cursor: pointer; 
     font-weight: 700 
    } 
    .mapasite h2 .botao { 
     font-size: 18px; 
     line-height: 1.2em 
    } 
    .botao .fa-minus-circle { 
     color: #f30 
    } 
    .mapapost { 
     overflow: hidden; 
     margin-bottom: 20px; 
     height: 70px; 
     background-color: #FFF 
    } 
    .mapa { 
     padding: 40px 
    } 
    .map-thumb { 
     background-color: #F0F0F0; 
     padding: 10px; 
     display: block; 
     width: 65px; 
     height: 50px; 
     float: left 
    } 
    .map-img { 
     width: 65px; 
     height: 50px; 
     overflow: hidden; 
     border-radius: 2px 
    } 
    .map-thumb a { 
     width: 100%; 
     height: 100%; 
     display: block; 
     transition: all .3s ease-out!important; 
     -webkit-transition: all .3s ease-out!important; 
     -moz-transition: all .3s ease-out!important; 
     -o-transition: all .3s ease-out!important 
    } 
    .map-thumb a:hover { 
     -webkit-transform: scale(1.1) rotate(-1.5deg)!important; 
     -moz-transform: scale(1.1) rotate(-1.5deg)!important; 
     transform: scale(1.1) rotate(-1.5deg)!important; 
     transition: all .3s ease-out!important; 
     -webkit-transition: all .3s ease-out!important; 
     -moz-transition: all .3s ease-out!important; 
     -o-transition: all .3s ease-out!important 
    } 
    .mapapost .wrp-titulo { 
     padding-top: 10px; 
     font-weight: 700; 
     font-size: 14px; 
     line-height: 1.3em; 
     padding-left: 25px; 
     padding-right: 10px; 
     display: block; 
     overflow: hidden; 
     margin-bottom: 5px 
    } 
    .mapapost .wrp-titulo a { 

    } 
    .mapapost .wrp-titulo a:hover { 
     color: #f30; 
     text-decoration: underline 
    } 
    .map-meta { 
     display: block; 
     float: left; 
     overflow: hidden; 
     padding-left: 25px; 
    } 
    .mapasite h2 .botao { 
     float: right 
    } 

轉到您的博客儀表板>頁面>添加新頁面。 在添加頁面標題並使用選項隱藏註釋之後，在新頁面內容上，在頁面內容區域中添加以下代碼。

參見我的博客上同Generate XML Sitemap