ニュースページを作る・その２〜news.html編〜

news.htmlにニュース一覧ページをつくる

続いて、news.htmlのインデックス・テンプレートを作ります。
トップページでリンク先を指定した、一覧はこちらのリンクから、ページを確認することができます。

まだページが表示されていませんが、記事ページと同じく、メインとサブの２カラム構成です。
こちらは、メインカラムに最新の記事一覧が並ぶようにします。
同じものをトップページで作りましたね！

【トップページ】この部分と同じです。

<mt:Entries limit="3">
  <dl class="newsArea__dateList clearfix">
    <dt>
      <h4 class="newsArea__title"><$mt:EntryTitle$></h4>
    </dt>
      <dd class="newsArea__text"><$mt:EntryExcerpt words="20"$>
      <p class="newsArea__link">
        <a href="<$mt:EntryPermalink$>">続きを読む</a>
      </p>
    </dd>
  </dl>
</mt:Entries>

一覧を作るのは２回目なので、こちらは少しレベルアップしてみましょう！

記事を投稿した日付と、選択されたカテゴリをMTタグを使って取得し、表示させます。
記事のサムネイル画像も表示させましょう。（後ほど、投稿記事に対応できるようにカスタマイズするので、ここではimages/noimages.pngを表示させてみます。）

コードは、以下のように書き換えました。

<mt:Entries  limit="3">
 <dl class="newsArea__dateList clearfix">
    <dt>
    <p class="newsArea__day">
      <$mt:Date format="%Y.%m.%d"$>
    </p>
    <p class="newsArea__category">
      <$mt:CategoryLabel$>
    </p>
    <h4 class="newsArea__title">
      <$mt:EntryTitle$>
    </h4>
    </dt>
    <dd class="newsArea__text">
      <$mt:EntryExcerpt words="20"$>
      <p class="newsArea__link">
        <a href="<$mt:EntryPermalink$>">続きを読む</a>
      </p>
    </dd>
    <dd class="newsArea__img">
     <img src="<$mt:BlogRelativeURL$>images/noimage.png">
    </dd>
    </dl>
    </mt:Entries>

ページネーションの機能をつける

さらに、ぺージネーションの機能をもたせてみましょう。
このぺージには最新３件の記事を表示させ、それ以降は次のぺージにおくるようにします。
それ以降の記事は、「次の３件」のようなリンクをつけ、次のページに表示させるようにしましょう。

<mt:Entries paginate_by="N">

ページ送り等を行いたい場合、モディファイアの値に件数を指定することで、指定した数分の件数が表示されます。

https://movabletype.net/blog/2015/04/post-3.html

limit ="3"との併用はできないので書き換えましょう。

<mt:Entries paginate_by="3">

こちらのタグでも３件が表示されます。

これだけではナビゲーションがないので、次の３件のぺージにいけませんね。
以下のタグも追加して、その中に「前に戻る」「次に進む」をつくっていきます。

<mt:EntriesFooter>

ブロックタグの中で、最後のブログ記事のときだけ実行するブロックタグです。

https://movabletype.net/tags/2007/08/entriesfooter.html

<mt:PaginationHasPrevious>

<mt:EntriesHeader> と <mt:EntriesFooter>の中で利用でき、前のページがある場合に内容を出力します。

https://movabletype.net/tags/2015/03/mtpaginationhasprevious.html

<$mt:PaginationPreviousURL$>

前のページの URL を出力します。存在しない場合、何も出力しません

https://movabletype.net/tags/2015/03/mtpaginationpreviousurl.html

<mt:PaginationHasNext>

<mt:EntriesHeader>と<mt:EntriesFooter>の中で利用でき、次のページがある場合に内容を出力します。

https://movabletype.net/tags/2015/03/mtpaginationhasnext.html

<$mt:PaginationNextURL$>

次のページの URL を出力します。存在しない場合、何も出力しません。

https://movabletype.net/tags/2015/03/mtpaginationnexturl.html

まずは<mt:Entries paginate_by="3">〜</mt:Entries>の間、最後の部分に<mt:EntriesFooter>を用意しましょう。ここは繰り返しの処理にならないので、１回だけ表示されます。
その中に、内容の表示/非表示を判断する、<mt:PaginationHasNext>、<mt:PaginationHasPrevious>を作っていきます。
そしてその中にURLを表示させる<$mt:PaginationPreviousURL$>、<$mt:PaginationNextURL$>を、アンカータグの中に入れ、完成です！

<mt:Entries paginate_by="3">
    <dl class="newsArea__dateList clearfix">
    <dt>
      <p class="newsArea__day">
        <$mt:Date format="%Y.%m.%d"$>
      </p>
      <p class="newsArea__category">
        <$mt:CategoryLabel$>
      </p>
      <h4 class="newsArea__title">
        <$mt:EntryTitle$>
      </h4>
    </dt>
    <dd class="newsArea__text">
      <$mt:EntryExcerpt words="20"$>
      <p class="newsArea__link">
        <a href="<$mt:EntryPermalink$>">
          続きを読む
        </a>
      </p>
    </dd>
    <dd class="newsArea__img">
      <img src="<$mt:BlogRelativeURL$>images/noimage.png">
    </dd>
  </dl>
  <mt:EntriesFooter>
    <ul class="newsArea__nextArea clearfix">
      <mt:PaginationHasPrevious>
        <li class="newsArea__nextArea--prev">
          <a href="<$mt:PaginationPreviousURL$>"><i>◀︎</i>前の3件</a>
        </li>
      </mt:PaginationHasPrevious>
      <mt:PaginationHasNext>
        <li class="newsArea__nextArea--next">
          <a href="<$mt:PaginationNextURL$>">次の3件<i>▶︎</i></a>
        </li>
      </mt:PaginationHasNext>
    </ul>
  </mt:EntriesFooter>
</mt:Entries>

記事をたくさん作って確認してみましょう…

ぺージネーションがつきました！

２つの機能を追加してインデックスのものよりパワーアップしましたね。

ニュース記事一覧は、アーカイブテンプレートで何度か使うことがありそう。
ここもニュース記事一覧のパーツとして、モジュール化しておこっと！