Gridsomeでブログを作成する：すべての投稿とページ付けを一覧表示する

投稿日: 2022-04-20 2022-04-20

前の投稿では、GraphQLを使用してアクセスできるさまざまなリソースに基づいてデータ駆動型の静的Webサイトを構築するために使用できるVue.jsテクノロジーであるGridsomeの使用を開始する方法について説明しました。。

前回の投稿では、ローカルマークダウンファイルをデータソースとして使用し、それぞれの投稿をレンダリングする方法も確認できます。

ただし、投稿のリストを表示するページがまだないので、それを機能させる方法を見てみましょう。

すべてのブログ投稿を一覧表示する

投稿テンプレートはすでに用意されています（したがって、作成されたすべての投稿はそのテンプレートを使用します）が、すべての投稿を一覧表示するページが必要になる場合があります。

ページ上のすべての投稿のリストを追加します。この例では、 pages /Index.vueにあるホームページを使用します。

GraphQLエクスプローラーを確認すると、多くのパラメーターで使用可能なallPostクエリがあることがわかります。

allPost(
  sortBy: String = "date"
  order: SortOrder = DESC
  perPage: Int = 25
  skip: Int = 0
  page: Int = 1
  regex: String
): PostConnection

PostConnectionスキーマを調べると、 pages / Index.vue に配置する必要がある次のクエリを使用して、すべての投稿のタイトルとパスを取得できることがわかります。

pages /Index.vue

<page-query>
query Posts {
  posts: allPost {
    edges {
      node {
        title
        path
      }
    }
  }
}
</page-query>

あとは、投稿をループしてリンクを印刷するだけです。そのために、Gridsomeにはrouter-linkのラッパーである<g-link>コンポーネントがすでに含まれています。

pages /Index.vue

<template>
  <Layout>
    <p v-for="post in $page.posts.edges">
      <g-link :to="post.node.path">
        {{ post.node.title }}
      </g-link>
    </p>
  </Layout>
</template>

それはそれをする必要があります。ホームページには、すべてのブログ投稿がリストされている必要があります。

ページ付けの追加

同じページにすべての投稿をリストするのは少し楽観的です。それらがいくつかある場合、ユーザーが大量のアイテムをナビゲートする必要があると、UXに悪影響が及ぶ可能性があります。

そのため、ユーザーにより良いナビゲーションエクスペリエンスを提供するには、通常、ページ付けが必要です。

幸い、Gridsomeは先を行っており、ページ付けを追加する簡単な方法を提供してくれます。前回の記事を思い出してください。GraphQLレイヤーのPostConnectionスキーマは、データをページ分割するためのいくつかのパラメーターをすでに提供しています。

allPost(
  sortBy: String = "date"
  order: SortOrder = DESC
  perPage: Int = 25
  skip: Int = 0
  page: Int = 1
  regex: String
): PostConnection

特に、perPage、skip、およびpageパラメーターを使用して、ページネーションの動作を制御できます。 skipはそれほど頻繁には必要ないかもしれませんが、クエリがスキップする必要のあるアイテムの数を知るために使用できます。

ページネーションが機能するのを確認できるように、さらに3つまたは4つの記事を作成していきましょう。

次に、@paginateディレクティブを、PostConnectionのパラメーターとともに使用して、ページ付けされた投稿のクエリを作成できます。

query Posts ($page: Int) {
  posts: allPost (perPage: 2, page: $page) @paginate {
    edges {
      node {
        title
        path
      }
    }
  }
}

perPageパラメーターを2に設定して、いくつかの投稿を含む複数のページを作成しました。

必要に応じて、 http：// localhost：8080 / ___exploreで利用可能なGraphQLプレイグラウンドでこのクエリを試すことができることを忘れないでください。その場合は、pageクエリ変数を1から始まる任意の値に設定することに注意してください。

GraphQL Playground

ページネーションを制御するために、ページネーション情報も返される必要があります。 PostConnectionスキーマを再度調べると、totalCountおよびpageInfoのプロパティがあることがわかります。それらを使用してその情報を返しましょう：

query Posts ($page: Int) {
  posts: allPost (perPage: 2, page: $page) @paginate {
    totalCount
    pageInfo {
      totalPages
      currentPage
      isFirst
      isLast
    }
    edges {
      node {
        title
        path
      }
    }
  }
}

エクスプローラーでこのクエリを実行すると、次のようなデータが返されます。

{
  "data": {
    "posts": {
      "totalCount": 5,
      "pageInfo": {
        "totalPages": 3,
        "currentPage": 1,
        "isFirst": true,
        "isLast": false
      },
      "edges": [
        {
          "node": {
            "title": "An awesome article 4",
            "path": "/blog/awesome-post-4"
          }
        }
      ]
    }
  }
}

クエリが配置されたので、最初にホームページの<page-query>ブロックを更新しましょう。

pages /Index.vue

<page-query>
query Posts ($page: Int) {
  posts: allPost (perPage: 2, page: $page) @paginate {
    totalCount
    pageInfo {
      totalPages
      currentPage
      isFirst
      isLast
    }
    edges {
      node {
        title
        path
      }
    }
  }
}
</page-query>

次に、Gridsomeに付属している特別なPagerコンポーネントを使用できます。

Pagerコンポーネントは、pageInfoデータをinfoプロパティに渡すだけで機能します。したがって、ページネーションを設定するには、インポートして使用するのと同じくらい簡単です。

pages /Index.vue

<template>
  <Layout>
    <p v-for="post in $page.posts.edges">
      <g-link :to="post.node.path">
        {{ post.node.title }}
      </g-link>
    </p>
    <Pager :info="$page.posts.pageInfo"/>
  </Layout>
</template>

<page-query>
// ...
</page-query>

<script>
import { Pager } from "gridsome";

export default {
  components: {
    Pager
  }
};
</script>

http：// localhost：8080 に移動すると、ナビゲーションコンポーネントがレンダリングされ、完全に機能していることがわかります。

コンポーネントにはスタイルがないため、数字が非常に接近している場合があります。これは意図的なものなので、ページネーションのスタイルを完全に制御できます。

Pagerコンポーネントのすべてのオプションを確認したい場合は、ドキュメントを確認してください。

まとめ

この時点に到達した場合、データに基づいてページを作成することと、ページネーションを含む任意のページからそれらをリストすることの両方を含む、Gridsomeを使用してブログや同様のWebサイトを構築する方法の基本をすべて知っています。

確かに、Gridsomeプロジェクトはまだ開発の初期段階にありますが、ギャツビーの道をたどっているので、とてもエキサイティングに見え、素晴らしい未来があるようです。

この記事のコードサンプルリポジトリとオンラインデモをチェックすることを忘れないでください！

涼しくしてください🦄

getdocs

13036