Top > March 17, 2008

コメントのフラグメントを動的に切り替える

March 17,2008 1:00 AM
Category:[コメント]
Tag:[, , ]
Permalink

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]
Now loading...
List of "Mar 17, 2008"
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!