From 8872b2c29a6c368aaf3cd3eaab9a345f3fdc8c00 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Tue, 11 Feb 2020 15:39:37 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Creating=20the=20GraphQL=20query=E3=81=BE?= =?UTF-8?q?=E3=81=A7=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../adding-a-list-of-markdown-blog-posts.md | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index f61a04c5c..fe2679ab4 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -1,26 +1,24 @@ --- -title: Adding a List of Markdown Blog Posts +title: Markdownのブログ投稿一覧を追加する --- +Markdown のページをサイトに追加すると、専用のインデックスページに投稿を一覧表示できるようになります。 -Once you have added Markdown pages to your site, you are just one step away from being able to list your posts on a dedicated index page. - -## Creating posts - -As described [here](/docs/adding-markdown-pages), you will have to create your posts in Markdown files which will look like this: +## 投稿を作成 +[ここ](/docs/adding-markdown-pages) で説明しているように, Markdown ファイルに投稿を作成する必要があります。それは次のようになります。 ```markdown --- path: "/blog/my-first-post" date: "2017-11-07" -title: "My first blog post" +title: "初めてのブログ投稿" --- -Has anyone heard about GatsbyJS yet? +GatsbyJS って聞いたことある？ ``` -## Creating the page +## ページの作成 -The first step will be to create the page which will display your posts, in `src/pages/`. You can for example use `index.js`. +最初の手順は投稿を表示するページを `src/pages/` に作成することです。例えば `index.js` を利用できます。 ```jsx:title=src/pages/index.js import React from "react" @@ -32,7 +30,7 @@ const IndexPage = ({ }, }) => { const Posts = edges - .filter(edge => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria + .filter(edge => !!edge.node.frontmatter.date) // いくつかの基準に基づいて投稿をフィルタリングできます .map(edge => ) return
{Posts}
@@ -41,9 +39,9 @@ const IndexPage = ({ export default IndexPage ``` -## Creating the GraphQL query +## GraphQL のクエリを作成 -Second, you need to provide the data to your component with a GraphQL query. Add it, so that `index.js` looks like this: +次に、 GraphQL クエリを利用してコンポーネントにデータを提供する必要があります。 `index.js` に以下のように追加します。 ```jsx:title=src/pages/index.js import React from "react" @@ -56,7 +54,7 @@ const IndexPage = ({ }, }) => { const Posts = edges - .filter(edge => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria + .filter(edge => !!edge.node.frontmatter.date) // いくつかの基準に基づいて投稿をフィルタリングできます .map(edge => ) return
{Posts}
From 876d30215b8bea78bd7159724b1e5509258e14ac Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Tue, 11 Feb 2020 15:39:54 +0900 Subject: [PATCH 2/7] Creating the GraphQL query --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index fe2679ab4..e0a53fff7 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -1,10 +1,12 @@ --- title: Markdownのブログ投稿一覧を追加する --- + Markdown のページをサイトに追加すると、専用のインデックスページに投稿を一覧表示できるようになります。 ## 投稿を作成 -[ここ](/docs/adding-markdown-pages) で説明しているように, Markdown ファイルに投稿を作成する必要があります。それは次のようになります。 + +[ここ](/docs/adding-markdown-pages) で説明しているように、 Markdown ファイルに投稿を作成する必要があります。それは次のようになります。 ```markdown --- From 2e9096d1fb6d35a848e349ab1127276aaf9d1249 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sat, 15 Feb 2020 20:44:09 +0900 Subject: [PATCH 3/7] =?UTF-8?q?docs/adding-a-list-of-markdown-blog-posts?= =?UTF-8?q?=E3=81=AE=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index e0a53fff7..017f81e41 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -83,9 +83,9 @@ export const pageQuery = graphql` ` ``` -## Creating the `PostLink` component +## `PostLink` コンポーネントの作成 -The only thing left to do is to add the `PostLink` component. Create a new file `post-link.js` in `src/components/` and add the following: +あとは `PostLink` コンポーネントの作成だけです。 `src/components/` に `post-link.js` ファイルを作成して次のように記述します。 ```jsx:title=src/components/post-link.js import React from "react" @@ -102,4 +102,4 @@ const PostLink = ({ post }) => ( export default PostLink ``` -This should get you a page with your posts sorted by descending date. You can further customize the `frontmatter` and the page and `PostLink` components to get your desired effects! +これで、日付降順でソートされた投稿が並べられたページを表示できます。さらに、 `frontmatter` 、ページ、 `PostLink` コンポーネントなどをさらにカスタマイズして、望み通りのエフェクトがかけられます！ From 2a26777f512078f30dd0a5e57433f7f3b6ca3268 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Sun, 16 Feb 2020 10:06:26 +0900 Subject: [PATCH 4/7] Update docs/docs/adding-a-list-of-markdown-blog-posts.md Co-Authored-By: Jesse Katsumata --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index 017f81e41..6b8495fc9 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -6,7 +6,7 @@ Markdown のページをサイトに追加すると、専用のインデック ## 投稿を作成 -[ここ](/docs/adding-markdown-pages) で説明しているように、 Markdown ファイルに投稿を作成する必要があります。それは次のようになります。 +[ここ](/docs/adding-markdown-pages)で説明しているように、投稿を Markdown ファイルで作成する必要があります。それは次のように行えます。 ```markdown --- From cea4bfbe3a8e526c1fba55b201fabda56311540a Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Sun, 16 Feb 2020 10:07:28 +0900 Subject: [PATCH 5/7] Update docs/docs/adding-a-list-of-markdown-blog-posts.md Co-Authored-By: Jesse Katsumata --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index 6b8495fc9..44341a73d 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -85,7 +85,7 @@ export const pageQuery = graphql` ## `PostLink` コンポーネントの作成 -あとは `PostLink` コンポーネントの作成だけです。 `src/components/` に `post-link.js` ファイルを作成して次のように記述します。 +あとは `PostLink` コンポーネントの作成だけです。`src/components/` に `post-link.js` ファイルを作成して次のように記述します。 ```jsx:title=src/components/post-link.js import React from "react" From 04b8c32b57b90edbb2e1f345ee48a7b9bff98adf Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Sun, 16 Feb 2020 10:07:44 +0900 Subject: [PATCH 6/7] Update docs/docs/adding-a-list-of-markdown-blog-posts.md Co-Authored-By: Jesse Katsumata --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index 44341a73d..bb11e1aac 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -43,7 +43,7 @@ export default IndexPage ## GraphQL のクエリを作成 -次に、 GraphQL クエリを利用してコンポーネントにデータを提供する必要があります。 `index.js` に以下のように追加します。 +次に、GraphQL クエリを利用してコンポーネントにデータを提供する必要があります。`index.js` に以下のように追記します。 ```jsx:title=src/pages/index.js import React from "react" From 9aa908c3aef1516e6a79b66bc579782a26611e39 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Sun, 16 Feb 2020 10:08:05 +0900 Subject: [PATCH 7/7] Update docs/docs/adding-a-list-of-markdown-blog-posts.md Co-Authored-By: Jesse Katsumata --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index bb11e1aac..290d925ca 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -102,4 +102,4 @@ const PostLink = ({ post }) => ( export default PostLink ``` -これで、日付降順でソートされた投稿が並べられたページを表示できます。さらに、 `frontmatter` 、ページ、 `PostLink` コンポーネントなどをさらにカスタマイズして、望み通りのエフェクトがかけられます！ +これで、日付降順でソートされた投稿が並べられたページを表示できます。さらに、 `frontmatter` 、ページ、`PostLink` コンポーネントなどをさらにカスタマイズして、望み通りのエフェクトがかけられます！