Top > March 17, 2008
コメントのフラグメントを動的に切り替える
Movable Type のブログ記事アーカイブにある、コメントのフラグメントを動的に切り替えるカスタマイズです。
「フラグメント」とは「文書の特定の場所へのリンク」のことです。フラグメントに対応する、コメントへのリンクのフラグメント識別子(URLの#以降の部分)は、今回の場合、次のようになっています。
http://user-domain/2008/03/post.html#comments
今回実現したい、フラグメントによるリンクは次の通りです。
- ブログ記事にコメントが投稿されている場合、メインページに表示されているコメントへのリンクをクリックすると、その先頭にジャンプする
- ブログ記事にコメントが投稿されていない場合、メインページに表示されているコメントへのリンクをクリックすると、コメント投稿フォームにジャンプする
デフォルトテンプレートのコメント関連のマークアップは次のようになっています。投稿コメントおよびコメントフォーム全体を div 要素で括り、フラグメントとなる id 属性(赤色)を付与しているので、投稿コメントの有無に依存せず、常にフラグメントが存在します。
<MTIfCommentsActive>
<div id="comments" class="comments">
<MTIf name="comment_preview_template">
<$MTInclude module="コメント入力フォーム"$>
</MTIf>
<MTComments>
<MTCommentsHeader>
<h2 class="comments-header">コメント(<$MTEntryCommentCount$>)</h2>
<div class="comments-content">
</MTCommentsHeader>
<$MTInclude module="コメント詳細"$>
<MTCommentsFooter>
</div>
</MTCommentsFooter>
</MTComments>
<MTUnless name="comment_preview_template">
<$MTInclude module="コメント入力フォーム"$>
</MTUnless>
</div>
</MTIfCommentsActive>
問題となるのは、コメント全体に対してフラグメントが設定できないマークアップになっている場合です。
例えば次のようなマークアップを想定します。
<MTIfCommentsActive>
<MTIf name="comment_preview_template">
<div>
<$MTInclude module="コメント入力フォーム"$>
</div>
</MTIf>
<MTComments>
<MTCommentsHeader>
<h2 id="comments" class="comments-header">コメント(<$MTEntryCommentCount$>)</h2>
<div class="comments-content">
</MTCommentsHeader>
<$MTInclude module="コメント詳細"$>
<MTCommentsFooter>
</div>
</MTCommentsFooter>
</MTComments>
<MTUnless name="comment_preview_template">
<div>
<$MTInclude module="コメント入力フォーム"$>
</div>
</MTUnless>
</MTIfCommentsActive>
このマークアップでは、もし投稿コメントがひとつもないと、MTComments 内部が実行されず、フラグメントも表示されないため、コメントのリンクをクリックするとページのトップにジャンプすることになります。
つまり、投稿コメントの有無によって、フラグメントの出力位置を切り替える必要があります。
この問題を解消するには、次のようにコメント入力フォーム部分に MTIfNonZero を追加し(青色部分)、投稿コメント件数が0の場合だけ id 属性を表示するようにします。
<MTIfCommentsActive>
<MTIf name="comment_preview_template">
<div>
<$MTInclude module="コメント入力フォーム"$>
</div>
</MTIf>
<MTComments>
<MTCommentsHeader>
<h2 id="comments" class="comments-header">コメント(<$MTEntryCommentCount$>)</h2>
<div class="comments-content">
</MTCommentsHeader>
<$MTInclude module="コメント詳細"$>
<MTCommentsFooter>
</div>
</MTCommentsFooter>
</MTComments>
<MTUnless name="comment_preview_template">
<div<MTIfNonZero tag="MTEntryCommentCount"><MTElse> id="comments"</MTIfNonZero>>
<$MTInclude module="コメント入力フォーム"$>
</div>
</MTUnless>
</MTIfCommentsActive>
なお、コメント入力フォームの MTInclude が2ヶ所ありますが、最初に現れる、MTIf タグで括られた方は、コメントプレビュー時しか表示されない(=フラグメントの対象にならないため)ので、対処する必要はありません。
参考記事:文書の特定の場所へのリンク
Comments [0]
| Trackbacks [0]

