MovableTypeでコメント一覧だけ動的にページ分割表示にする

一つの記事にコメントが200以上につくことがあり、そのまま表示していると恐ろしく長いページになってしまうので、最近までは「Easy Paginate」というJqueryPluginでコメントのページ分割をおこなっていました。
しかし、動作的には再構築するときにすべてのコメントを一気に吐き出して表示する分だけフィルタリングしているだけで、構築されたhtmlファイルのデータは400KB以上の大きさになっていたり、コメントを全てDBから取得しにいくので、サーバー500エラーが頻発するようになり、これじゃダメだと思い改造することにしました。

調べてみるとMovableType4.2からMovableType6にアップデートしていたので、知らなかったけどMT4.3から標準でコメントページ分割機能がついていたらしい。これは便利だとさっそく流用させてもらった。
[参考]：Movable Type 5 のコメントのページ分割機能（その1：概要）
[参考]：Movable Type 5（MT5）のコメントのページ分割機能（その2：カスタマイズ）

以下がその手順。

1. システムテンプレートに「コメント一覧」がない場合の作業

現在利用しているテーマの theme.yaml に以下のハイライト部分を追記する。

system:
    comment_listing:
        label: Comment Listing
    comment_preview:
        description_label: Displays preview of comment.
        label: Comment Preview

現在利用しているテーマの templates ディレクトリに以下の内容を comment_listing.mtml というファイル名で保存する。

{
    "direction": "<mt:Var name="commentDirection">",
    "comments": "<mt:Comments sort_order="$commentDirection"><$mt:Include module="<__trans phrase="Comment Detail">" replace="\","\\" replace='"','\"' strip_linefeeds="1"$></mt:Comments>"
}

以上が完了したら、ここで【デザイン】の【テーマ】からテンプレート初期化する。
初期化したら、システムテンプレートに【コメント一覧】が追加されているか確認する。

2. テンプレートを修正する

ブログ記事テンプレートの headタグ内でかつ mt.js 以降に以下を追記する。
ちなみに1行目のvalueの値は分割表示するコメント数、コメント表示の順番を昇順にしたい場合は7行目のsort_order を ascend にする。

<$mt:Var name="comments_per_page" value="10"$>
<mt:If tag="EntryCommentCount" gt="$comments_per_page">
<script type="text/javascript">
     MT.entryID = <$mt:EntryID$>;
     MT.commentsPerPage = <$mt:Var name="comments_per_page"$>;
     MT.entryCommentCount = <$mt:EntryCommentCount$>;
     MT.commentIds = [<mt:Comments sort_order="descend" glue=","><mt:CommentID></mt:Comments>];
</script>
</mt:If>

コメントテンプレートモジュールから以下のようなmt:Commentsタグを使ったコメント一覧を吐き出す部分を探す。

<mt:comments>
 <mt:commentsHeader><h3 class="comments-header">コメント<mt:entryCommentCount singular="[1]" plural="[#]" none="[0]" /></h3></mt:commentsHeader>
 <mt:include module="コメント詳細" />
 <mt:commentsFooter></mt:commentsFooter>
</mt:comments>

上記の部分を以下のように修正する。コメントの表示順を昇順にしたい場合は、1行目の desend を ascendに変更して、古いコメント、新しいコメントの記述を逆にする。

<mt:Comments lastn="$comments_per_page" sort_order="descend">
  <mt:CommentsHeader>
    <h2 class="comments-header"><$mt:EntryCommentCount singular="コメント(1)" plural="コメント(#)" none="コメント(0)"$></h2>
    <mt:If tag="EntryCommentCount" gt="$comments_per_page">
    <ul id="top-comment-nav">
      <li id="top-prev-comments">
        <a href="javascript://" id="top-prev-comments-link" title="新しいコメント">＜＜ 新しいコメント</a>
      </li>
      <li id="top-num-comments"><span id="top-current-comments"></span></li>
      <li id="top-next-comments">
        <a href="javascript://" id="top-next-comments-link" title="古いコメント">古いコメント ＞＞</a>
      </li>
    </ul>
    </mt:If>
    <div id="comments-content" class="comments-content">
  </mt:CommentsHeader>
  
  <$mt:Include module="コメント詳細"$>
  
  <mt:CommentsFooter>
    </div>
  </mt:CommentsFooter>
</mt:Comments>

  <mt:If tag="EntryCommentCount" gt="$comments_per_page">
  <ul id="comment-nav">
    <li id="prev-comments">
      <a href="javascript://" id="prev-comments-link" title="新しいコメント">＜＜ 新しいコメント</a>
    </li>
    <li id="num-comments"><span id="current-comments"></span></li>
    <li id="next-comments">
      <a href="javascript://" id="next-comments-link" title="古いコメント">古いコメント ＞＞</a>
    </li>
  </ul>
  </mt:If>

15行目の id="comments-content" が重要で、このidをもとにmt.jsが表示制御をしているので、idを変更したら動かない。
また、理由はよくわからないがページ分割のページリンクは上下で必要らしく、片方だけにすると動かなかった。

最後にブログ記事を再構築して、適宜ページネーションのリンク回りのCSSを当ててください。