Bloggerでタグクラウドを入れるカスタマイズの最中に気づいたメモです。
Blogger betaでのHTMLの構成は大体こんな感じだと思います。
※大体のイメージです。実際ウィジェットの数や並び順によっても違います。
HTML
├DIV class="Header"
├DIV class="Main"
├DIV class="Sidebar"
│├DIV class="Widget" type="profile"
│├DIV class="Widget" type="label"
│└DIV class="Widget" type="Archive"
└DIV class="Footer"
それぞれヘッダ、ボディ、サイドバー、フッターなどの中に複数のウィジェット(部品)が入れられているイメージです。
実際のテンプレートはこんな感じです。(サイドバー内のラベルウィジェットの例)
※簡略化しているのでコレを貼り付けても実際には動かないと思います。
1:<b:section class='sidebar'>
2: <b:widget type='Label'>
3: <b:includable id='main'>
4: <b:loop values='data:labels' var='label'>
5: <a expr:href='data:label.url'><data:label.name/></a>
6: </b:loop>
7: </b:includable>
8: </b:widget>
9:</b:section>
<b:includable id='main'>はおまじないです。C言語の#include <stdio.h>と同じです。
ホントは必要なんだけど、今は気にするな、的なものです。
このテンプレートがHTMLとして展開されるとこんな感じになると思います。
※くどいようですがイメージです。
1:<div class='sidebar section' id='sidebar'>
2: <div class='widget Label' id='Label1'>
3: <a href="http://knyijong.blogspot.com/search/label/API'>API</a>
4: <a href="http://knyijong.blogspot.com/search/label/Google'>Google</a>
5: <a href="http://knyijong.blogspot.com/search/label/Gmail'>GMail</a>
6: <a href="http://knyijong.blogspot.com/search/label/Blogger'>Blogger</a>
7: </div>
8:</div>
テンプレートをJavaScriptで書いたとしたらこんな感じでしょうか。
※もちろんイメージです。
1:function Widget(_type) {
2: var out = document.getElementById("main");
3: if(_type=="Label"){
4: var lables = document.getElementsByWidgetName("Label")[0];
5: for(label in labels){
6: out.innerHTML =
7: "<a href='" + label.url + "'>" + label.name + "</a>";
8: }
9: }
10:}
これ、書いて見て思ったんですが、Blogger betaのテンプレートとJavaScriptを使って各ウィジェットデータのコレクション作れそうですね。一度オブジェクトとして保持してしまえば、ページ表示後にJavaScriptで煮るなり焼くなり。
こんな感じで
1:<b:section class='sidebar'>
2: <b:widget type='Label'>
3: <b:includable id='main'>
4: <script>
5: var Widgets = {};
6: Widgets["Label"] = [];
7: <b:loop values='data:labels' var='label'>
8: Widgets.Lable.push({
9: url:"<data:label.url/>",
10: name:"<data:label.name/>"
11: });
12: </b:loop>
13: </script>
14: </b:includable>
15: </b:widget>
16:</b:section>