昨日の printAmazon の説明に引き続いて、 printCategory の説明を書いた。
目的
投稿にカテゴリー・タグの情報を埋め込み、記事のフッター部分にカテゴリー・タグを表示させる。
ソースコード
var hatena = 'http://b.hatena.ne.jp/at-aka/'; function gid (id){ return document.getElementById(id); } function getNum (e) { return (e.className=='post') ? e.getAttribute('id') : getNum(e.parentNode); } function outEntry () { var divs = document.getElementsByTagName('div'); var length = divs.length; for (var i=0; i<length; i++){ printCategory (divs[i]); // printAmazon (divs[i]); } } function printCategory (e) { if (e.className == 'category'){ var num = getNum(e); var txt = '<br />Category: '; var tag = e.getAttribute('title').split(','); for (var j=0; j<tag.length; j++){ tag[j] = '<a href="' + hatena + tag[j] + '/">' + tag[j] + '</a>'; } txt += tag.join(', '); gid('category_'+num).innerHTML = txt; } }
テンプレートの編集
Blogger のテンプレートを編集する。
- 上記ソースコードを outEntry.js という名前で保存し、適当な場所にアップする。
- outEntry.js を head 要素でロードする。
- 関数 outEntry を body 要素から onload する。
- ブログの投稿部分を
class="post" id="<$BlogItemNumber$>"
な div 要素で囲む。 - フッター部分に、
id="category_<$BlogItemNumber$>"
な空の span 要素を追加する。
<html> <head> ...<script type="text/javascript" src="http://path.to/your/outEntry.js"></script>
<head> <bodyonload="outEntry();"
> <BlogDateHeader> <h2 class="date-header"><$BlogDateHeaderDate$></h2> </BlogDateHeader><div class="post" id="<$BlogItemNumber$>">
<BlogItemTitle> <h3 class="post-title"><$BlogItemTitle$></h3> </BlogItemTitle> <div class="post-body"> <$BlogItemBody$> </div> <!-- post-body --> <div class="post-footer">posted by <$BlogItemAuthorNickname$> at ...<span id="category_<$BlogItemNumber$>"></span>
</div></div>
<!-- post --> </body> <html>
ファイルが表示された後 (onload 後)、関数 outEntry が実行される。 outEntry は、エントリーごとにカテゴリー情報をスキャンして、フッター部分に反映させる。
printAmazon だと Amazon の情報はサイドバーの一か所に反映させればよかった。だから、簡単に id を指定することができた。でも、カテゴリーはエントリーのフッターに付けるから、(個別ページならまだしも) インデックス・ページやアーカイブ・ページでは ID 名が重ならないように工夫しなくちゃいけない。そこで、 Blogger が提供する <$BlogItemNumber$> を使うことを思いついた。
<$BlogItemNumber$> はブログの記事ごとに固有の番号を返す Blogger の変数タグ。カテゴリー・タグの展開先に、 category_ とこの変数タグをくっつけた ID を用意する。これで一意な ID が手に入る。カテゴリー・タグの情報からは、この変数タグの数値は知りようがないので、JavaScript で数値を手に入れる。
変数タグの値を確実に手に入れるため、投稿記事を囲む div を用意させた。それが post というカテゴリーを持った div。投稿記事のどこにカテゴリー・タグ情報を埋め込んでも、 parentNode を繰り返せば、必ず div.category に辿り着く。あとは、変数タグの値からカテゴリー・タグの展開先に、「 はてなブックマークを利用したタグへのリンク」を追加するだけ。
今回は、ブログ記事の特定に <$BlogItemNumber$> を使ったけど、permalink でも大丈夫だと思う。
エントリーを書く
エントリー内に次の一行を埋め込むと、フッターに情報が反映される。
<div class="category" title="category1,category2,category3"></div>
クラス名は category、title 属性にカテゴリー・タグの情報を書く。複数のカテゴリーを指定する場合はカンマ区切りで繋ぐ。
注意。 Blogger に ATOM API 経由でポストすると問題がある。上のコードの場合だと次の様に書き換えられちゃう。
<div class="category" title="category1,category2,category3"/>
firefox は div の閉じタグがないと思うので、メチャメチャになる。
とりあえず、div 要素の中にピリオドを打って逃げてる。
あとがき...
printCategory は、フッターだけでなく、ヘッダーでも使える。ただし、エントリーの中で使うんだったら、こんなに面倒なことをせずに、もっとスッキリに書ける。タグ情報を展開したい場所に置いて、JavaScript で置換すればいい。サイドバーに表示するなら、ID 値は一つに決まるから問題が少ない (printAmazon と同じ)。
エントリーの中じゃない。でも、エントリーの遠くでもない。エントリーのすぐ外に情報を書き出したい時に、この関数は威力を発揮する。もちろん、それはカテゴリーでなくったっていい。そんなニーズは、あるかしらん。何か思いついたら、トラックバックを下さい ;)
No comments:
Post a Comment