ニュースページを作る・その３〜アーカイブ編〜
ここからは、サブカラムの中、記事リストのアーカイブを作っていきます。
テーマ「Stylish Corporate」のニュース一覧ページ。左カラムにアーカイブリストがありますね。
記事はカテゴリ別や日付別、月別などでアーカイブリストを作ることができます。
これをニュースページの左カラムに設置してみましょう！
これがサイドにあるとぐっとニュースぺージっぽくなるもんね！
カテゴリ、月別のアーカイブリストを作る
まず、作りたいアーカイブのアーカイブ・テンプレートを作っておきます。
最初のテンプレートの書き換え時に用意したのはカテゴリ別記事リストと、月別記事リストでした。
今回のテーマでは作成しませんが、その他にも投稿者、日、年別でもアーカイブ・テンプレートを作ることができます。
アーカイブ・テンプレートの編集画面から、アーカイブタイプを選択できます。
それでは、カテゴリ別ニュース記事リストと、月別アーカイブを編集していきます！
ニュース一覧ページを作るときと使う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> 
２つのアーカイブが表示できました！
ほかの記事別リストがある場合も、archive_type="archive_type_foo"の部分を変更して表示させていきましょう。
ニュースページの仕上げ
ここで作ったアーカイブをモジュールにしたものを、カテゴリ別ニュース記事リスト、月別ニュース記事リスト、記事のテンプレート、news.htmlのテンプレートの共通する箇所に書き換えておきましょう。
ニュース関連のテンプレート全てに入れておきましょう。
ニュースページへのリンクをヘッダーナビに表示する
最後に、ヘッダーのナビに、ニュース一覧ページを表示させるリンクを追加しましょう。
news.htmlのページへのリンクURLは、 <$mt:BlogRelativeURL$>news.htmlと記述することができます。
このURLへのリンクを、ナビの一番左に表示できるよう、 ヘッダーのモジュール・テンプレートに、以下を追加しましょう。
<li>
<a href="<$mt:BlogRelativeURL$>news.html">ニュース</a>
</li>
<ul class="navi-list">
<li>
<a href=" <$mt:BlogRelativeURL$>news.html>">ニュース</a>
</li>
<mt:TopLevelFolders>
<li>
<a href="#">
<$mt:FolderLabel$>
</a>
<ul class="navi-list__sub">
<mt:Pages>
<li>
<a href="<$mt:PagePermalink$>">
<$mt:PageTitle$>
…ナビの一番左に、ニュースページへのリンクが表示されます。これでニュースぺージは完成です！
