Merge pull request #177 from naoya7076/docs/adding-a-list-of-markdown-blog-posts

docs/adding-a-list-of-markdown-blog-posts.md

Author: uetchy

docs/docs/adding-a-list-of-markdown-blog-posts.md

@@ -1,26 +1,26 @@
 ---
-title: Adding a List of Markdown Blog Posts
+title: 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.
+Markdown のページをサイトに追加すると、専用のインデックスページに投稿を一覧表示できるようになります。
 
-## 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 +32,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 => <PostLink key={edge.node.id} post={edge.node} />)
 
   return <div>{Posts}</div>
@@ -41,9 +41,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 +56,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 => <PostLink key={edge.node.id} post={edge.node} />)
 
   return <div>{Posts}</div>
@@ -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` コンポーネントなどをさらにカスタマイズして、望み通りのエフェクトがかけられます！