Bloggerで全体の最近の投稿、特定のタグの最近の投稿を表示する方法

調べると、Widgetとかであるよって出てくるが、該当のWidgetが使えなくなっていたりするので、自作しました。こんな感じ。
http://www.illusts.xyz/p/top.html


RSSから情報をとってきて描画しています。
以下のHTMLを最近のX件みたいな感じで描画させたい場所に書いてください。

前半パートのHTMLはどういう形のHTMLにするか、という感じです。自分のBlogに合わせて文言とかを変えてください。
後半パートのscriptは実際にRSSをとってきて描画しています。「//設定」の数字と、「//Tagごとに処理」の「getRSS("[タグ名]");」みたいな部分を自分の環境に合わせれば動くと思います。

よくわからん、って思ったらコメントとかください。

<div id="recent_template1" style="position: absolute; top: -999px; visibility: hidden;">
<div style="clear: both;">
<div id="recent_template_!!tag!!">
<h1>
<a href="!!tag_url!!">!!tag!!</a></h1>
</div>
<div style="clear: both;">
<a href="!!tag_url!!">  ⇒「!!tag!!」のイラストを見る</a></div>
</div>
</div>
<div id="recent_template2" style="position: absolute; top: -999px; visibility: hidden;">
<div style="float: left; padding: 10px;">
<div class="Image thumb">
<a href="!!link!!">
        <img alt="!!title!!" class="postthumb" src="!!thumbnail!!" />
      </a>
    </div>
<a href="!!link!!">!!title!!</a>
  </div>
</div>
<div id="recent_workspace">
</div>
<script>
//設定
let item_num = 5;
let image_size = 72;// 72 or 150
let title_length = 7;

//Tagごとに描画
getRSS("全て");
getRSS("人物");
getRSS("IT関連");
getRSS("アバター");
getRSS("動物");

function getRSS(tag_name){
  var workspace = document.getElementById("recent_workspace");
  var template1 = document.getElementById("recent_template1").innerHTML.replace(/https:\/\/www.blogger.com\//g,"").replace(/!!tag!!/g, tag_name);
  template1 = template1.replace(/!!tag_url!!/g, tag_name=="all"||tag_name=="全て"?"/search":"/search/label/"+tag_name);
  workspace.innerHTML += template1 ;
  var xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.onreadystatechange = function(){
    if( this.readyState == 4 && this.status == 200 ){
      var xml = this.responseXML;
      var items = xml.getElementsByTagName("item");
      var workspace2 = document.getElementById("recent_template_"+tag_name);
      for(var i=0; i<items.length && i<item_num; ++i ) {
        //ここでHTMLを描画
        var template2 = document.getElementById("recent_template2").innerHTML.replace(/https:\/\/www.blogger.com\//g,"");
        template2 = template2.replace(/!!link!!/g, items[i].getElementsByTagName("link")[0].textContent);
        var title =  items[i].getElementsByTagName("title")[0].textContent;
        title = title.length > title_length?title.substr(0,title_length-1)+"...":title;
        template2 = template2.replace(/!!title!!/g,title);
        template2 = template2.replace(/!!thumbnail!!/g, items[i].getElementsByTagNameNS("*","thumbnail")[0].getAttribute("url")).replace("s72-c","s"+image_size+"-c");
        workspace2.innerHTML += template2;
      }
    }
  }
  var url =  tag_name=="all"||tag_name=="全て"?"/feeds/posts/default?alt=rss":"/feeds/posts/default/-/"+tag_name+"/?alt=rss";
  xmlHttpRequest.open("GET", url);
  xmlHttpRequest.send();
}
</script>

0 件のコメント: