ニュースページを作る・その３〜アーカイブ編〜　| トフでもできる！？テーマ開発講座

知識編

2 テーマ書き出す読み込む
テーマ書き出す/読み込む

ニュースページを作る・その３〜アーカイブ編〜

ここからは、サブカラムの中、記事リストのアーカイブをつくっていきます。

テーマ「stylish corporate」のニュース一覧ページ。左カラムにアーカイブリストがありますね。

記事はカテゴリ別や日付別、月別などでアーカイブリストを作ることができます。
これをニュースページの左カラムに設置してみましょう！

これがサイドにあるとぐっとニュースぺージっぽくなるもんね！

カテゴリ、月別のアーカイブリストをつくる

まず、作りたいアーカイブのアーカイブ・テンプレートを作っておきます。
最初のテンプレートの書き換え時に用意したのはカテゴリ別記事リストと、月別記事リストでした。
ほかにも投稿者別や、年別などのアーカイブテンプレートを作ることができます。
必要に応じて、記事リストのテンプレートを、MT編集画面デザイン＞テンプレート　アーカイブ・テンプレートから、追加しておきましょう。

アーカイブ・テンプレートの編集画面から、アーカイブタイプを選択できます。

それでは、カテゴリ別ニュース記事リストと、月別アーカイブを編集していきます！
ニュース一覧ページをつくるときと使うMTタグは同じです。記事は自動的にアーカイブタイプに合わせて、カテゴリ別になるように集めてきてくれます。
news.htmlのテンプレートから、必要なタグをコピーしてきましょう。

一覧の部分はモジュールにしておくと、
アーカイブ・テンプレートの種類が増えた時らくちんだよね♪

それに加えて、なんの記事リストかわかるようにしたいので、<$mt:ArchiveTitle$>をつかってテンプレート名を表示させ、一覧の上にぺージの見出しをつけておきます。

<mt:ArchiveTitle>: ブログ記事一覧アーカイブのタイトルを表示します。表示されるタイトルは、アーカイブの種類に依存します。; https://movabletype.net/tags/2007/08/archivetitle.html

<h3 class="newsArea__categoryName"><$mt:ArchiveTitle$></h3>

それぞれにテンプレート名が表示されて、ちょうど良い見出しになりました。
これでカテゴリー別記事リスト、月別記事リストのページができました。

記事リストをアーカイブにして表示させる

ついに、記事リストをアーカイブ形式にして表示させます。
インデックステンプレートnews.htmlのサブカラムを編集していきます。
カテゴリー別記事リストをアーカイブ表示させるのに使えるMTタグには、以下の種類があります。

<mt:ArchiveList>: アーカイブの一覧を表示するためのブロックタグです。; https://movabletype.net/tags/2007/08/archivelist.html; モディファイアarchive_type="archive_type_foo"の中を変えることで他アーカイブを選択できます。今回はカテゴリー別を表示させたいので、archive_type="Category"を使います。
<$mt:ArchiveLink$>: ブログ記事一覧アーカイブの絶対 URL を表示します。ブログ記事一覧アーカイブへのリンクを作るときに使います。mt:ArchiveListブロックの中か、アーカイブに関連したテンプレートで使用できます。; https://movabletype.net/tags/2007/08/archivelink.html
<$mt:CategoryArchiveLink$>: カテゴリアーカイブのURLを表示します。; https://movabletype.net/tags/2007/08/categoryarchivelink.html
<mt:ArchiveListHeader>: <mt:ArchiveList>タグの中で、最初にだけ実行する条件タグです。; https://movabletype.net/tags/2007/08/archivelistheader.html
<mt:ArchiveListFooter>: <mt:Archives>タグの中で、最後にだけ実行する条件タグです; https://movabletype.net/tags/2007/08/archivelistfooter.html
<$mt:ArchiveCount$>: ブログ記事一覧アーカイブのブログ記事数を表示します。; https://movabletype.net/tags/2007/08/archivecount.html
<$mt:CategoryCount$>: カテゴリに含まれるブログ記事の件数を表示します。; https://movabletype.net/tags/2007/08/categorycount.html

まず、カテゴリ別記事リストを呼び出し、その中からカテゴリ名と、そのカテゴリに含まれる記事の件数をそれぞれ取得し、表示させていきます。

<mt:ArchiveList archive_type="Category">
  <mt:ArchiveListHeader>
  <h3 class="sideArea__title">カテゴリ</h3>
    <ul class="sideArea__list">
      </mt:ArchiveListHeader>
       <li>
         <a href="<$mt:CategoryArchiveLink$>">
           <mt:ArchiveTitle>（<$mt:CategoryCount$>)
         </a>
      </li>
      <mt:ArchiveListFooter>
    </ul>
	</mt:ArchiveListFooter>
</mt:ArchiveList>

サブナビにカテゴリー別記事リストと、それぞれのカテゴリーに含まれる記事の数のアーカイブが入りました。
続いて、月別記事リストも表示させていきます。

<mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveListHeader>
  <h3 class="sideArea__title">月別</h3>
    <ul class="sideArea__list">
      </mt:ArchiveListHeader>
       <li>
         <a href="<$mt:ArchiveLink$>">
           <mt:ArchiveTitle>（<$mt:ArchiveCount$>)
         </a>
      </li>
      <mt:ArchiveListFooter>
    </ul>
	</mt:ArchiveListFooter>
</mt:ArchiveList>