追記2:この記事の方法は、ひとつのラベルに記事が150本以上あるとそれ以上表示しません。それ以上にも対応したversion2を作成済みですので(新しい記事)、そちらをご使用ください。
・ Blogger ブログにサイトマップ - ラベル分類された投稿一覧を「ページ」に表示する方法
なんてのが紹介されていた。これはかなり便利。
でも、自分の場合は特定のラベルがついた記事だけの一覧を作りたい。で、Kuriboさんのページの2個目のscriptタグ(feed呼ぶとこ)のパラメータでラベル制限してみたんだけど、ラベルが複数付いている記事があるとラベルの見出しも増えてしまいうまくいかなかったので、元のjsを参考にして自分でjs書いてみた。
それを使ったサンプルページはここ
使い方は、Blogger の管理画面「ページ」から新しいページを作りhtml編集モードにして
<script src="https://sites.google.com/site/choniwaniwani/forBlog/bloggerFeeds.js"></script>
<script src="https://自分のブログアドレス/feeds/posts/summary/-/ラベル名称?redirect=false&max-results=500&alt=json-in-script&callback=onLoadFeeds&orderby=published"></script>
を貼り付けて2ヶ所書き換えるだけです。<script src="https://自分のブログアドレス/feeds/posts/summary/-/ラベル名称?redirect=false&max-results=500&alt=json-in-script&callback=onLoadFeeds&orderby=published"></script>
自分のブログアドレスは、このページで言うと choni-waniwani.blogspot.com のところ。
ラベル名称は、そのまんまラベルの名前です。日本語でもOKでした。
追記:bloggerのデフォルトがhttpsになった(一昨年ですが)ので、上のコードをhttpsに対応しました。
で、このタグ貼付部分より前や後に普通に文章入れてもOKです。
タグ内部に入れてもいいので、レイアウトは多少カスタマイズできます。リンクのaタグには未使用のclassも入っているので、cssでカスタマイズも可。
これ以降は、技術的に興味のある人向けに軽くjavascriptの説明です。
まず、bloggerのfeedを取得する部分、上の2個目のタグのパラメータの説明はこちら。
テキスト検索のqオプションは使えないとのこと。
そこの説明にあるURL(www.blogger.comではじまってblogIDを数字で入れるやつ)は↑のurlとだいぶ違いますが、どっちの形でもパラメータと結果は同じです。
もっと詳しいパラメータの解説は、先程のページからもたどれるこちらにあります。
書いたjsはごく簡単で
function onLoadFeeds(root) {
if("entry" in root.feed){
var entryNum = root.feed.entry.length;
for(var e=0; e<entryNum; e++) {
var entry=root.feed.entry[e];
var url;
var linkNum=entry.link.length;
for(var l=0; l<linkNum; l++) {
var link=entry.link[l];
if(link.rel=="alternate"){
url=link.href;
break;
}
}
document.write("<a class='linkHref' href='"+url+"'>"+entry.title.$t+"</a><br/>");
}
}
}
だけです。
if("entry" in root.feed){
var entryNum = root.feed.entry.length;
for(var e=0; e<entryNum; e++) {
var entry=root.feed.entry[e];
var url;
var linkNum=entry.link.length;
for(var l=0; l<linkNum; l++) {
var link=entry.link[l];
if(link.rel=="alternate"){
url=link.href;
break;
}
}
document.write("<a class='linkHref' href='"+url+"'>"+entry.title.$t+"</a><br/>");
}
}
}
0 件のコメント :
コメントを投稿