記事のリストページを作る。

投稿日:2020年10月7日

更新日:2020年10月7日

リストページ用のテンプレートを作る

公式documentのHow to query with GraphQLを参考に、「/src/pages/Step.vue」に新しくリストページ用のテンプレートを作りました。

下部の「page-query」でStepPostの全ての記事を取得してsteplistに入れています。
リストで必要なidとtitleとpathを取得しています。

html部分でStepPostからデータをv-forでまわして表示しています。

---
<template>
  <Layout>
  <article>
  <h1 class="h2 mb-5">このサイトができるまでの道のり</h1>
  <ul>
    <li class="mb-3" v-for="steplist in $page.steplist.edges" :key="steplist.id"><a :href="steplist.node.path">{{ steplist.node.title }}</a></li>
  </ul>
  </article>
  </Layout>
</template>

<script>
export default {
  metaInfo: {
    title: 'このサイトができるまでの道のり'
  },
}
</script>

<page-query>
  query {
    steplist: allStepPost {
      edges {
        node {
          id
          title
          path
        }
      }
    }
  }
</page-query>
---

リストの順番ってどうなってんの…

表示はされたのですが、順序ががよくわからない…
記事元であるmdファイルを更新すると、順番が変わるところをみると更新された順みたい。
いやそれは困る。。。はい、再検討。

日付順にしよう!

自分で番号打とうかな…とも思ったけど楽が一番!日付順にしよう!!
元々更新日「createdAt」をmdファイルに入れていたのでそれを使います。

<template>
  <Layout>
  <article>
  <h1 class="h2 mb-5">このサイトができるまでの道のり</h1>
  <ul>
    <li class="mb-3" v-for="steplist in $page.steplist.edges" :key="steplist.id">{{steplist.node.createdAt}}<br><a :href="steplist.node.path">{{ steplist.node.title }}</a></li>
  </ul>
  </article>
  </Layout>
</template>

---あいだは省略---

<page-query>
  query {
    steplist: allStepPost(sortBy: "createdAt", order: ASC)  {
      edges {
        node {
          id
          title
          path
          createdAt (format: "YYYY年M月D日")
        }
      }
    }
  }
</page-query>

公式documentQuerying dataにズバリ並べ替えの記載があったので、そのまんま使いましたw

目次ページに戻る