Blogger自作最新記事と関連記事リスト

最新記事と関連記事を表示する自作テンプレートのjavascriptです。

最新記事と関連記事両方を表示する場合も1回書くだけでいいです。関連記事は同じラベルの記事の最新10件を表示します。また、表示している記事のurlが最新の10件に含まれる場合は表示せず、最新の9件を表示します。

最新記事を表示したい場所に書く。

<div class='sublist'></div>

「ブログの投稿」ガジェット内の関連記事を表示したい場所に書く。

<b:loop values='data:post.labels' var='label'>
<div class='sublist'><data:label.name/></div>
</b:loop>

最新記事と関連記事のjavascriptは以下になります。テンプレートの</body>の前に書きます。

<script>
/*<![CDATA[*/
document.addEventListener('DOMContentLoaded',setSubList);
function setSubList(){
  const queryMaxResults='10';
  let objlist=document.getElementsByClassName('sublist');
  for(let i=0;i<objlist.length;i++){
    let textLabel=objlist[i].textContent;
    let feedUrl='/feeds/posts/summary';
    if(textLabel) feedUrl+='/-/'+encodeURIComponent(textLabel);
    feedUrl+='?alt=json&max-results='+queryMaxResults;
    fetch(feedUrl)
    .then(response=>response.json())
    .then(json=>{
      let html='<ul>';
      for(let i=0;i<json.feed.entry.length;i++){
        let entry=json.feed.entry[i];
        for(let j=0;j<entry.link.length;j++){
          if(entry.link[j].rel=='alternate'){
            if(entry.link[j].href!=location.href){
              html+='<li><a href="'+entry.link[j].href+'">'+entry.title.$t+'</a></li>';
            }
            break;
          }
        }
      }
      objlist[i].innerHTML=html+'</ul>';
    })
    .catch(error=>console.log(error));
  }
}
/*]]>*/
</script>

条件次第で高速化するjavascriptもあります。
Blogger自作最新記事と関連記事リスト・キャッシュ高速化