[Blogger] ページ読み込み時にFeedを使う

テーマ/カスタマイズ/HTMLを編集

headタグ内にscriptを記載

<script>/*<![CDATA[*/
function feed(url){
  const s = document.createElement('script')
  s.src = url
  document.body.appendChild(s)
}

function article_lists(data){
  const root = document.getElementById('article_lists')
  view(root , data)
}

function static_lists(data){
  const root = document.getElementById('static_lists')
  view(root , data)
}

function view(root , data){
  if(!data){return}
  console.log(data)
  const lists = data.feed.entry
  if(!lists){return}
  for(const list of lists){
    console.log(list)
    const link = list.link.find(e => e.rel === 'alternate')
    const html = `<li><a href='${link.href}'>${list.title.$t}</a></li>`
    root.insertAdjacentHTML('beforeend' , html)
  }
}
/*]]>*/</script>

記事リスト表示の箇所でscriptタグを記述

<script>/*<![CDATA[*/
feed('/feeds/posts/default?alt=json&max-results=10&callback=item_lists')
/*]]>*/</script>

説明

Feedを使うと、URLに依存しない記事リストの取得ができる。取得したいお好きなFeedをURLで登録して、データを取得するのが、"feed"関数。データを受け取ったら、callbackされるのが、"item_lists"関数そして、一覧取得の場合は、id='article_lists'というエレメント、固定ページの場合は、id='static_lists'というエレメントの中に、書き込みを行う。実際に書き込んで表示をする関数は、"view"関数。表示スクリプトの途中にいくつかデバッグ表示する処理(console.log)を入れてあるので、他のデータなども参照して、組み替えてもらってもOK