過去記事一覧ページを作る

このサイトにおいて、トップページには最新20記事のみが表示されるようになっています。これはAboutページに書いた通り、トップページを可能な限り高速化するためのものです。しかしこのサイトにはカテゴリ機能以外にページ同士の関係性を示すものが前後関係しかありません。そのため外部検索エンジンを用いなければ、私が意図してリンクしたもの以外の情報は能動的にカテゴリをポチポチするしかなくなってしまいます。

この問題を解消するにはおすすめ関連記事を自動表示するなどの方法が考えられますが、どう考えても実装が面倒な上、可能な限り外部サービスを埋め込みたくないと思っています。そのため、応急措置的に過去記事一覧ページを作成しました。機能的にはトップページの使いまわしです。

そもそもの記事取得

このサイトはNuxt/Contentに依存しているため、index.vueにおいてContent側から記事の一覧を取得した上で日付の降順ソートを行い、最新20件を表示しています。コードは以下のようなものです。

export default {
  async asyncData ({ $content, params }) {
    const query = await $content('articles' || 'index').sortBy('date', 'desc').limit(20)
    const articles = await query.fetch()
    return { articles }
  }
}

この3行目の一番後ろについているlimit(20)を取っ払えば全ての記事を取得することができます。

実装

記事の取得自体は単純に先程のコードの3行目のlimitを取っ払えばいいため省略します。さて、トップページではVueの機能であるv-forを用いて、繰り返しリンクを生成しています。これをそのまま使ってもいいですが、せっかくなのでカード風にしてみました。

この機能の実現にはCSSフレームワークBulmaのCardを用いました。またcolumns is-multilineを指定することで、折り返し表示とレスポンシブ対応を両立してみました。コードは以下の通りです。

<div class="columns is-multiline">
  <div v-for="a in articles" :key="a.date" class="column is-3">
    <nuxt-link :to="'/articles/'+ a.slug + '/'">
      <div class="card">
        <div class="card-header">
          <h2 class="card-header-title">
            {{ a.title }}
          </h2>
        </div>
        <div class="card-content">
          <p>
             {{ a.description }}
          </p>
          <p>
            {{ a.date }}
          </p>
        </div>
      </div>
    </nuxt-link>
  </div>
</div>

このコードを用いると、以下のような画面を生成することができます。

15分くらいで作ったにしてはきれいなのではないでしょうか？

最後に

トップページの使いまわしとはいえ、Bulmaを使うことで簡単にちょっとおしゃれな一覧ページを作ることができました。何かの参考になれば幸いです。