Blogger betaのテンプレート

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" それぞれヘッダ、ボディ、サイドバー、フッターなどの中に複数のウィジェット(部品)が入れられているイメージです。 実際のテンプレートはこんな感じです。(サイドバー内のラベルウィジェットの例) ※簡略化しているのでコレを貼り付けても実際には動かないと思います。

view plainprint?

1. 1:<b:section class='sidebar'>  
2. 2:　<b:widget type='Label'>  
3. 3:　　<b:includable id='main'>  
4. 4:　　　<b:loop values='data:labels' var='label'>  
5. 5:　　　　<a expr:href='data:label.url'><data:label.name/></a>  
6. 6:　　　</b:loop>  
7. 7:　　</b:includable>  
8. 8:　</b:widget>  
9. 9:</b:section>  

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として展開されるとこんな感じになると思います。 ※くどいようですがイメージです。

view plainprint?

1. 1:<div class='sidebar section' id='sidebar'>  
2. 2:　<div class='widget Label' id='Label1'>  
3. 3:　　　　<a href="http://knyijong.blogspot.com/search/label/API'>API</a>  
4. 4:　　　　<a href="http://knyijong.blogspot.com/search/label/Google'>Google</a>  
5. 5:　　　　<a href="http://knyijong.blogspot.com/search/label/Gmail'>GMail</a>  
6. 6:　　　　<a href="http://knyijong.blogspot.com/search/label/Blogger'>Blogger</a>  
7. 7:　</div>  
8. 8:</div>  

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で書いたとしたらこんな感じでしょうか。 ※もちろんイメージです。

view plainprint?

1. 1:function Widget(_type) {  
2. 2:　var out = document.getElementById("main");  
3. 3:　if(_type=="Label"){  
4. 4:　　var lables = document.getElementsByWidgetName("Label")[0];  
5. 5:　　for(label in labels){  
6. 6:　　　out.innerHTML =  
7. 7:　　　　"<a href='" + label.url + "'>" + label.name + "</a>";  
8. 8:　　}  
9. 9:　}  
10. 10:}  

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で煮るなり焼くなり。 こんな感じで

view plainprint?

1. 1:<b:section class='sidebar'>  
2. 2:　<b:widget type='Label'>  
3. 3:　　<b:includable id='main'>  
4. 4:　　　<script>  
5. 5:　　　　var Widgets = {};  
6. 6:　　　　Widgets["Label"] = [];  
7. 7:　　　　<b:loop values='data:labels' var='label'>  
8. 8:　　　　　Widgets.Lable.push({  
9. 9:　　　　　　url:"<data:label.url/>",  
10. 10:　　　　　　name:"<data:label.name/>"  
11. 11:　　　　　});  
12. 12:　　　　</b:loop>  
13. 13:　　　</script>  
14. 14:　　</b:includable>  
15. 15:　</b:widget>  
16. 16:</b:section>  

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>