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..290d925ca 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,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 => ) return
{Posts}
@@ -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 => ) return
{Posts}
@@ -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` コンポーネントなどをさらにカスタマイズして、望み通りのエフェクトがかけられます!