|
1 | 1 | --- |
2 | | -title: Adding Pagination |
| 2 | +title: ページネーションの追加 |
3 | 3 | --- |
4 | 4 |
|
5 | | -A page displaying a list of content gets longer as the amount of content grows. |
6 | | -Pagination is the technique of spreading that content across multiple pages. |
| 5 | +コンテンツのリストを表示するページは、コンテンツの量が増えるにつれて長くなります。ページネーションは、コンテンツを複数のページに分ける方法です。 |
7 | 6 |
|
8 | | -The goal of pagination is to create multiple pages (from a single [template](/docs/building-with-components/#page-template-components)) that show a limited number of items. |
| 7 | +ページネーションのゴールは、単一の[テンプレート](/docs/building-with-components/#page-template-components)から、限られた数のアイテムを表示する複数のページを作成することです。 |
9 | 8 |
|
10 | | -Each page will [query GraphQL](/docs/querying-with-graphql/) for those specific items. |
| 9 | +各ページは、それぞれのアイテムを [GraphQL のクエリー](/docs/querying-with-graphql/)で取得します。 |
11 | 10 |
|
12 | | -The information needed to query for those specific items (i.e. values for [`limit`](/docs/graphql-reference/#limit) and [`skip`](/docs/graphql-reference/#skip)) will come from the [`context`](/docs/graphql-reference/#query-variables) that is added when [creating pages](/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs) in `gatsby-node`. |
| 11 | +それぞれのアイテムを取得するために必要な、[`limit`](/docs/graphql-reference/#limit) や [`skip`](/docs/graphql-reference/#skip) などの情報は、[ページの作成](/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs)時に `gatsby-node` で追加される [`context`] から取得します。 |
13 | 12 |
|
14 | 13 | ## Example |
15 | 14 |
|
@@ -89,7 +88,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => { |
89 | 88 |
|
90 | 89 | // ... |
91 | 90 |
|
92 | | - // Create blog-list pages |
| 91 | + // ブログリストページの作成 |
93 | 92 | // highlight-start |
94 | 93 | const posts = result.data.allMarkdownRemark.edges |
95 | 94 | const postsPerPage = 6 |
@@ -123,11 +122,10 @@ exports.onCreateNode = ({ node, actions, getNode }) => { |
123 | 122 | } |
124 | 123 | ``` |
125 | 124 |
|
126 | | -The code above will create an amount of pages that is based on the total number of posts. Each page will list `postsPerPage`(6) posts, until there are less than `postsPerPage`(6) posts left. |
127 | | -The path for the first page is `/blog`, following pages will have a path of the form: `/blog/2`, `/blog/3`, etc. |
| 125 | +上記コードは、投稿総数に基づいた量のページを作成します。残りの投稿数が `postPerPage` で指定された 6 未満になるまで、各ページには 6 投稿ずつ表示されます。各ページのパスは、最初のページが `blog` 、次のページからは `blog/2` , `blog/3` となります。 |
128 | 126 |
|
129 | | -## Other resources |
| 127 | +## その他の資料 |
130 | 128 |
|
131 | | -- Follow this [step-by-step tutorial](https://nickymeuleman.netlify.com/blog/gatsby-pagination/) to add links to the previous/next page and the traditional page-navigation at the bottom of the page |
| 129 | +- 前へ/次へのページリンクや、ページの下部に配置する従来のページナビゲーションの追加は、この [チュートリアル](https://nickymeuleman.netlify.com/blog/gatsby-pagination/) にしたがってください |
132 | 130 |
|
133 | | -- See [gatsby-paginated-blog](https://github.com/NickyMeuleman/gatsby-paginated-blog) [(demo)](https://nickymeuleman.github.io/gatsby-paginated-blog/) for an extension of the official [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) with pagination in place |
| 131 | +- 公式のエクステンション [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) のページネーションは [gatsby-paginated-blog](https://github.com/NickyMeuleman/gatsby-paginated-blog) を参照してください |
0 commit comments