From 1b4b4eb4c16243693d6eaced59e2a5bcab996987 Mon Sep 17 00:00:00 2001 From: gensobunya Date: Sun, 8 Mar 2020 08:51:58 +0900 Subject: [PATCH 01/14] install plugin --- docs/docs/adding-markdown-pages.md | 32 +++++++++++++++--------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 71cb81c58..a7cbd429c 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -1,31 +1,31 @@ --- -title: Adding Markdown Pages +title: Markdownのページを追加する --- -Gatsby can use Markdown files to create pages in your site. -You add plugins to read and understand folders with Markdown files and from them create pages automatically. +Gatsby ではあなたのウェブサイトにページを追加するために Markdown ファイルを利用できます。 +プラグインを追加し、Markdown ファイルのあるフォルダを読み込むよう設定するだけで、自動的に Markdown ファイルからページを生成します。 -Here are the steps Gatsby follows for making this happen. +以下が、Gatsby における上記の処理です。 -1. Read files into Gatsby from the filesystem -2. Transform Markdown to HTML and [frontmatter](#frontmatter-for-metadata-in-markdown-files) to data -3. Add a Markdown file -4. Create a page component for the Markdown files -5. Create static pages using Gatsby's Node.js `createPage` API +1. Gatsby がファイルシステムからファイルを読み込む +2. Markdown ファイルを HTML に変換し、 [frontmatter](#frontmatter-for-metadata-in-markdown-files) をデータ化します +3. Markdown ファイルを追加します +4. Markdown ファイル用のページコンポーネントを作成します +5. Gatsby の `createPage` Node.js API を使って静的なページが生成されます -## Read files into Gatsby from the filesystem +## ファイルシステムから Gatsby にファイルを読み込む -Use the plugin [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/#gatsby-source-filesystem) to read files. +[`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/#gatsby-source-filesystem) をファイル読み込みのために利用します。 -### Install +### インストール `npm install --save gatsby-source-filesystem` -### Add plugin +### プラグインの追加 -**NOTE:** There are two ways to add a plugin in `gatsby-config.js`. Either you can pass a string with the plugin name or in case you want to include options, pass an object. +**ヒント：** `gatsby-config.js` にプラグインを追加する方法は 2 通りあります。プラグイン名の文字列を記述する方法と、オプションを含んだ内容を記述する方法です。後者の場合はオブジェクトとして記述します。 -Open `gatsby-config.js` to add the `gatsby-source-filesystem` plugin. Now pass the object from the next block to the `plugins` array. By passing an object that includes the key `path`, you set the file system path. +`gatsby-config.js` を開き `gatsby-source-filesystem` プラグインを追加しましょう。この時、 `plugins` 配列の最後の位置にオブジェクトを追加します。`path` キーに、Gatsby が読み込むファイルシステムのパスを指定してください。 ```javascript:title=gatsby-config.js plugins: [ @@ -39,7 +39,7 @@ plugins: [ ] ``` -Completing the above step means that you've "sourced" the Markdown files from the filesystem. You can now "transform" the Markdown to HTML and the YAML frontmatter to JSON. +この手順を完了することで、Markdown ファイルをファイルシステムからデータソースとして利用できます。Markdown 本文は HTML に変換され、frontmatter の YAML は JSON ファイルとしてデータ化されます。 ## Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark` From b230b098dd9d71c54b4e66911c022f8d9cb39e5d Mon Sep 17 00:00:00 2001 From: gensobunya Date: Sun, 8 Mar 2020 10:13:02 +0900 Subject: [PATCH 02/14] first complete --- docs/docs/adding-markdown-pages.md | 70 +++++++++++++++--------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index a7cbd429c..8e1b295fc 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -7,11 +7,11 @@ Gatsby ではあなたのウェブサイトにページを追加するために 以下が、Gatsby における上記の処理です。 -1. Gatsby がファイルシステムからファイルを読み込む -2. Markdown ファイルを HTML に変換し、 [frontmatter](#frontmatter-for-metadata-in-markdown-files) をデータ化します -3. Markdown ファイルを追加します -4. Markdown ファイル用のページコンポーネントを作成します -5. Gatsby の `createPage` Node.js API を使って静的なページが生成されます +1. ファイルシステムから Gatsby にファイルを読み込む +2. `gatsby-transformer-remark` を使って Markdown と [frontmatter](#Frontmatter - Markdown ファイルのメタデータ）を変換してデータとして利用する +3. Markdown ファイルを追加する +4. Markdown ファイルのためのページテンプレートを作成する +5. Gatsby の `createPage` Node.js API を使って静的なページを生成する ## ファイルシステムから Gatsby にファイルを読み込む @@ -41,17 +41,17 @@ plugins: [ この手順を完了することで、Markdown ファイルをファイルシステムからデータソースとして利用できます。Markdown 本文は HTML に変換され、frontmatter の YAML は JSON ファイルとしてデータ化されます。 -## Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark` +## `gatsby-transformer-remark` を使って Markdown と Frontmatter を変換してデータとして利用する -You'll use the plugin [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/) to recognize files which are Markdown and read their content. The plugin will convert the frontmatter metadata part of your Markdown files as `frontmatter` and the content part as HTML. +[`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/) プラグインを使うことで、Markdown ファイルのコンテンツを認識し、読み込むことができます。このプラグインは Frontmatter のメタデータを `frontmatter` に変換して、コンテンツ部分を HTML に変換します。 -### Install transformer plugin +### `gatsby-transformer-remark` プラグインのインストール `npm install --save gatsby-transformer-remark` ### Configure plugin -Add this to `gatsby-config.js` after the previously added `gatsby-source-filesystem`. +`gatsby-config.js` に下記の記述を追加します。 `gatsby-source-filesystem` より後ろである必要があります。 ```javascript:title=gatsby-config.js plugins: [ @@ -66,14 +66,14 @@ plugins: [ ] ``` -## Add a Markdown file +## Markdown ファイルを追加する -Create a folder in the `/src` directory of your Gatsby application called `markdown-pages`. -Now create a Markdown file inside it with the name `post-1.md`. +`/src` ディレクトリ内に、 `markdown-pages` ディレクトリを新しく作成しましょう。 +そしてその中に `post-1.md` ファイルを作成します。 -### Frontmatter for metadata in Markdown files +### Frontmatter - Markdown ファイルのメタデータ -When you create a Markdown file, you can include a set of key value pairs that can be used to provide additional data relevant to specific pages in the GraphQL data layer. This data is called frontmatter and is denoted by the triple dashes at the start and end of the block. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide the key value pairs as data in your React components. +Markdown ファイルを作成すると、コンテンツ以外のデータとしてキー・バリュー値のセットを含めることができます。これはコンテンツ以外のデータとして GraphQL のデータレイヤーに追加されます。このデータは frontmatter と呼ばれ、ハイフン 3 つで区切られたブロックで記述されます。このブロック内に書かれたキーバリュー値は `gatsby-transformer-remark` によって `frontmatter` データに変換されます。GraphQL によってこのキーバリュー値のペアが React コンポーネント内で利用できるようになります。 ```markdown:title=src/markdown-pages/post-1.md --- @@ -83,21 +83,21 @@ title: "My first blog post" --- ``` -What is important in this step is the key pair `path`. The value that is assigned to the key `path` is used in order to navigate to your post. +ここで重要なのは `path` のキーペアです。 `path` の値は、この記事をウェブサイト上で利用されるパスとして機能します。 -## Create a page template for the Markdown files +## Markdown ファイルのためのページテンプレートを作成する -Create a folder in the `/src` directory of your Gatsby application called `templates`. -Now create a `blogTemplate.js` inside it with the following content: +`/src` ディレクトリ内に、 `templates` ディレクトリを新しく作成しましょう。 +`blogTemplate.js` ファイルをこのディレクトリ内に下記の内容で作成します。 ```jsx:title=src/templates/blogTemplate.js import React from "react" import { graphql } from "gatsby" export default function Template({ - data, // this prop will be injected by the GraphQL query below. + data, // この prop はGraphQLのクエリ結果が注入されます }) { - const { markdownRemark } = data // data.markdownRemark holds your post data + const { markdownRemark } = data // data.markdownRemark が記事データ const { frontmatter, html } = markdownRemark return (
@@ -127,21 +127,21 @@ export const pageQuery = graphql` ` ``` -Two things are important in the file above: +ファイルに置いては 2 つの重要なポイントがあります： -1. A GraphQL query is made in the second half of the file to get the Markdown data. Gatsby has automagically given you all the Markdown metadata and HTML in this query's result. +1. GraphQL クエリーは Markdown データのファイル取得後半で生成されます。Gatsby は自動的にクエリ結果に含まれるすべての Markdown メタデータと HTML をあなたに渡します。 - **Note: To learn more about GraphQL, consider this [excellent resource](https://www.howtographql.com/)** + **ヒント： GraphQL についてさらに知りたい場合は、 こちらをお読みください [How to GraphQL](https://www.howtographql.com/)** -2. The result of the query is injected by Gatsby into the `Template` component as `data`. `markdownRemark` is the property that you'll find has all the details of the Markdown file. You can use that to construct a template for your blog post view. Since it's a React component, you could style it with any of the [recommended styling systems](/docs/styling/) in Gatsby. +2. クエリ結果は、Gatsby の `Template` に `data` として渡されます。 `markdownRemark` はクエリした Markdown ファイルに関するすべてのプロパティが含まれます。このデータを使っってテンプレートを構築し、ブログ記事のスタイリングを変更できます。テンプレートは React コンポーネントなので、スタイリングに関しては Gatsby における [推奨されるスタイリング手段](/docs/styling/) を利用できます。 -### Create static pages using Gatsby’s Node.js `createPage` API +### Gatsby の `createPage` Node.js API を使って静的なページを生成する -Gatsby exposes a powerful Node.js API, which allows for functionality such as creating dynamic pages. This API is available in the `gatsby-node.js` file in the root directory of your project, at the same level as `gatsby-config.js`. Each export found in this file will be run by Gatsby, as detailed in its [Node API specification](/docs/node-apis/). However, you should only care about one particular API in this instance, `createPages`. +Gatsby は強力な Node.js API を用意しており、これによって動的ページの作成などの機能が可能になります。 この API は `gatsby-node.js` 内で利用可能です。ルートディレクトリ、つまり `gatsby-config.js` と同じ階層に配置します。このファイルに書かれたそれぞれのエクスポート設定が Gatsby によって実行されます。詳細は [Node API の詳細](/docs/node-apis/)で確認できます。このセクションでは、 `createPages` のみを利用します。 -Use the `graphql` to query Markdown file data as below. Next, use the `createPage` action creator to create a page for each of the Markdown files using the `blogTemplate.js` you created in the previous step. +`graphql` を利用して Markdown ファイルのデータを下記サンプルのように取得します。 次に、 `createPage` を利用して前のステップで作成した `blogTemplate.js` にデータを渡すことでファイルごとに静的なページを生成します。 -**NOTE:** Gatsby calls the `createPages` API (if present) at build time with injected parameters, `actions` and `graphql`. +**ヒント：** Gatsby は `createPages` API をビルド時に呼び出す際、`actions` と `graphql` パラメータを付与しています。 ```javascript:title=gatsby-node.js const path = require(`path`) @@ -178,20 +178,20 @@ exports.createPages = async ({ actions, graphql, reporter }) => { createPage({ path: node.frontmatter.path, component: blogPostTemplate, - context: {}, // additional data can be passed via context + context: {}, // コンテキストとして任意のデータを付与できます }) }) } ``` -This should get you started on some basic Markdown functionality in your Gatsby site. You can further customize the frontmatter and the template file to get desired effects! +以上が、あなたの Gatsby ウェブサイトにおける基本的な Markdown ファイル機能です。frotmatter とテンプレートファイルをカスタマイズすることで、思い通りの効果を得ることができます！ -For more information, have a look in the working example `using-markdown-pages`. You can find it in the [Gatsby examples section](https://github.com/gatsbyjs/gatsby/tree/master/examples). +実際に動作するコードを Github のサンプルで確認することもできます。 公式リポジトリの [Gatsby examples section](https://github.com/gatsbyjs/gatsby/tree/master/examples)から `using-markdown-pages` ディレクトリを探してください。 -## Other tutorials +## 他のチュートリアル -Check out tutorials listed on the [Awesome Gatsby](/docs/awesome-gatsby-resources/#gatsby-tutorials) page for more information on building Gatsby sites with Markdown. +Markdown ファイルを利用したウェブサイト作成に関して、追加のチュートリアルが [Awesome Gatsby](/docs/awesome-gatsby-resources/#gatsby-tutorials) で紹介されています。 -## Gatsby Markdown starters +## Gatsby Markdown スターター -There are also a number of [Gatsby starters](/starters?c=Markdown) that come pre-configured to work with Markdown. +Markdown ファイルを利用するための設定がすでに済んだスターターキットを [Gatsby starters](/starters?c=Markdown) から探して利用できます。 From e107b8e25cf00b112ee4c301ef86ba2a541676be Mon Sep 17 00:00:00 2001 From: gensobunya Date: Sun, 8 Mar 2020 10:21:26 +0900 Subject: [PATCH 03/14] lint --- docs/docs/adding-markdown-pages.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 8e1b295fc..0d6758ba7 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -3,7 +3,7 @@ title: Markdownのページを追加する --- Gatsby ではあなたのウェブサイトにページを追加するために Markdown ファイルを利用できます。 -プラグインを追加し、Markdown ファイルのあるフォルダを読み込むよう設定するだけで、自動的に Markdown ファイルからページを生成します。 +プラグインを追加し、Markdown ファイルのあるフォルダーを読み込むよう設定するだけで、自動的に Markdown ファイルからページを生成します。 以下が、Gatsby における上記の処理です。 @@ -68,7 +68,7 @@ plugins: [ ## Markdown ファイルを追加する -`/src` ディレクトリ内に、 `markdown-pages` ディレクトリを新しく作成しましょう。 +`/src` ディレクトリー内に、 `markdown-pages` ディレクトリーを新しく作成しましょう。 そしてその中に `post-1.md` ファイルを作成します。 ### Frontmatter - Markdown ファイルのメタデータ @@ -87,8 +87,8 @@ title: "My first blog post" ## Markdown ファイルのためのページテンプレートを作成する -`/src` ディレクトリ内に、 `templates` ディレクトリを新しく作成しましょう。 -`blogTemplate.js` ファイルをこのディレクトリ内に下記の内容で作成します。 +`/src` ディレクトリー内に、 `templates` ディレクトリーを新しく作成しましょう。 +`blogTemplate.js` ファイルをこのディレクトリー内に下記の内容で作成します。 ```jsx:title=src/templates/blogTemplate.js import React from "react" @@ -137,11 +137,11 @@ export const pageQuery = graphql` ### Gatsby の `createPage` Node.js API を使って静的なページを生成する -Gatsby は強力な Node.js API を用意しており、これによって動的ページの作成などの機能が可能になります。 この API は `gatsby-node.js` 内で利用可能です。ルートディレクトリ、つまり `gatsby-config.js` と同じ階層に配置します。このファイルに書かれたそれぞれのエクスポート設定が Gatsby によって実行されます。詳細は [Node API の詳細](/docs/node-apis/)で確認できます。このセクションでは、 `createPages` のみを利用します。 +Gatsby は強力な Node.js API を用意しており、これによって動的ページの作成などの機能が可能になります。 この API は `gatsby-node.js` 内で利用可能です。ルートディレクトリー、つまり `gatsby-config.js` と同じ階層に配置します。このファイルに書かれたそれぞれのエクスポート設定が Gatsby によって実行されます。詳細は [Node API の詳細](/docs/node-apis/)で確認できます。このセクションでは、 `createPages` のみを利用します。 `graphql` を利用して Markdown ファイルのデータを下記サンプルのように取得します。 次に、 `createPage` を利用して前のステップで作成した `blogTemplate.js` にデータを渡すことでファイルごとに静的なページを生成します。 -**ヒント：** Gatsby は `createPages` API をビルド時に呼び出す際、`actions` と `graphql` パラメータを付与しています。 +**ヒント：** Gatsby は `createPages` API をビルド時に呼びだす際、`actions` と `graphql` パラメーターを付与しています。 ```javascript:title=gatsby-node.js const path = require(`path`) @@ -186,7 +186,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { 以上が、あなたの Gatsby ウェブサイトにおける基本的な Markdown ファイル機能です。frotmatter とテンプレートファイルをカスタマイズすることで、思い通りの効果を得ることができます！ -実際に動作するコードを Github のサンプルで確認することもできます。 公式リポジトリの [Gatsby examples section](https://github.com/gatsbyjs/gatsby/tree/master/examples)から `using-markdown-pages` ディレクトリを探してください。 +実際に動作するコードを Github のサンプルで確認することもできます。 公式リポジトリーの [Gatsby examples section](https://github.com/gatsbyjs/gatsby/tree/master/examples)から `using-markdown-pages` ディレクトリーを探してください。 ## 他のチュートリアル From 6a2a677e4338762b983bcf4571561c2adc76a4ff Mon Sep 17 00:00:00 2001 From: BSKY Date: Mon, 9 Mar 2020 10:43:26 +0900 Subject: [PATCH 04/14] Update docs/docs/adding-markdown-pages.md Co-Authored-By: Jesse Katsumata --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 0d6758ba7..c37393eb8 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -1,5 +1,5 @@ --- -title: Markdownのページを追加する +title: Markdown のページを追加する --- Gatsby ではあなたのウェブサイトにページを追加するために Markdown ファイルを利用できます。 From 901421b1e084ecb01ac9e78251d104fffe19f9d1 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Mon, 9 Mar 2020 10:44:54 +0900 Subject: [PATCH 05/14] Update docs/docs/adding-markdown-pages.md Co-Authored-By: BSKY --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index c37393eb8..c66fd3b87 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -25,7 +25,7 @@ Gatsby ではあなたのウェブサイトにページを追加するために **ヒント：** `gatsby-config.js` にプラグインを追加する方法は 2 通りあります。プラグイン名の文字列を記述する方法と、オプションを含んだ内容を記述する方法です。後者の場合はオブジェクトとして記述します。 -`gatsby-config.js` を開き `gatsby-source-filesystem` プラグインを追加しましょう。この時、 `plugins` 配列の最後の位置にオブジェクトを追加します。`path` キーに、Gatsby が読み込むファイルシステムのパスを指定してください。 +`gatsby-config.js` を開き `gatsby-source-filesystem` プラグインを追加しましょう。この時、`plugins` 配列の最後の位置にオブジェクトを追加します。`path` キーに、Gatsby が読み込むファイルシステムのパスを指定してください。 ```javascript:title=gatsby-config.js plugins: [ From 7af9978f4e67d771ff9f706d3b2030e639c1b390 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Mon, 9 Mar 2020 10:45:11 +0900 Subject: [PATCH 06/14] Update docs/docs/adding-markdown-pages.md --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index c66fd3b87..9f4db2333 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -51,7 +51,7 @@ plugins: [ ### Configure plugin -`gatsby-config.js` に下記の記述を追加します。 `gatsby-source-filesystem` より後ろである必要があります。 +`gatsby-config.js` に下記の記述を追加します。`gatsby-source-filesystem` より後ろである必要があります。 ```javascript:title=gatsby-config.js plugins: [ From a0b678099972c8a07d613a9d38810e2d12b4c725 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Mon, 9 Mar 2020 10:45:52 +0900 Subject: [PATCH 07/14] Update docs/docs/adding-markdown-pages.md --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 9f4db2333..302b29657 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -133,7 +133,7 @@ export const pageQuery = graphql` **ヒント： GraphQL についてさらに知りたい場合は、 こちらをお読みください [How to GraphQL](https://www.howtographql.com/)** -2. クエリ結果は、Gatsby の `Template` に `data` として渡されます。 `markdownRemark` はクエリした Markdown ファイルに関するすべてのプロパティが含まれます。このデータを使っってテンプレートを構築し、ブログ記事のスタイリングを変更できます。テンプレートは React コンポーネントなので、スタイリングに関しては Gatsby における [推奨されるスタイリング手段](/docs/styling/) を利用できます。 +2. クエリ結果は、Gatsby の `Template` に `data` として渡されます。 `markdownRemark` はクエリした Markdown ファイルに関するすべてのプロパティが含まれます。このデータを使っってテンプレートを構築し、ブログ記事のスタイリングを変更できます。テンプレートは React コンポーネントなので、スタイリングに関しては Gatsby における[推奨されるスタイリング手段](/docs/styling/) を利用できます。 ### Gatsby の `createPage` Node.js API を使って静的なページを生成する From f6c78e3510e7ab513647d22e0b7d088c1709e9e1 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Mon, 9 Mar 2020 10:46:17 +0900 Subject: [PATCH 08/14] Update docs/docs/adding-markdown-pages.md --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 302b29657..3cb855ba0 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -133,7 +133,7 @@ export const pageQuery = graphql` **ヒント： GraphQL についてさらに知りたい場合は、 こちらをお読みください [How to GraphQL](https://www.howtographql.com/)** -2. クエリ結果は、Gatsby の `Template` に `data` として渡されます。 `markdownRemark` はクエリした Markdown ファイルに関するすべてのプロパティが含まれます。このデータを使っってテンプレートを構築し、ブログ記事のスタイリングを変更できます。テンプレートは React コンポーネントなので、スタイリングに関しては Gatsby における[推奨されるスタイリング手段](/docs/styling/) を利用できます。 +2. クエリ結果は、Gatsby の `Template` に `data` として渡されます。`markdownRemark` はクエリした Markdown ファイルに関するすべてのプロパティが含まれます。このデータを使っってテンプレートを構築し、ブログ記事のスタイリングを変更できます。テンプレートは React コンポーネントなので、スタイリングに関しては Gatsby における[推奨されるスタイリング手段](/docs/styling/)を利用できます。 ### Gatsby の `createPage` Node.js API を使って静的なページを生成する From 75e82e3c7344da381d48615d7b813a7778297244 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Mon, 9 Mar 2020 10:46:45 +0900 Subject: [PATCH 09/14] Update docs/docs/adding-markdown-pages.md --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 3cb855ba0..a52dee64f 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -186,7 +186,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { 以上が、あなたの Gatsby ウェブサイトにおける基本的な Markdown ファイル機能です。frotmatter とテンプレートファイルをカスタマイズすることで、思い通りの効果を得ることができます！ -実際に動作するコードを Github のサンプルで確認することもできます。 公式リポジトリーの [Gatsby examples section](https://github.com/gatsbyjs/gatsby/tree/master/examples)から `using-markdown-pages` ディレクトリーを探してください。 +実際に動作するコードを Github のサンプルで確認することもできます。公式リポジトリーの [Gatsby examples section](https://github.com/gatsbyjs/gatsby/tree/master/examples) から `using-markdown-pages` ディレクトリーを探してください。 ## 他のチュートリアル From ff0a29166cac9269bb3a77aaf386335959f88b3b Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Mon, 9 Mar 2020 13:07:02 +0900 Subject: [PATCH 10/14] Update docs/docs/adding-markdown-pages.md Co-Authored-By: BSKY --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index a52dee64f..8063ac314 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -139,7 +139,7 @@ export const pageQuery = graphql` Gatsby は強力な Node.js API を用意しており、これによって動的ページの作成などの機能が可能になります。 この API は `gatsby-node.js` 内で利用可能です。ルートディレクトリー、つまり `gatsby-config.js` と同じ階層に配置します。このファイルに書かれたそれぞれのエクスポート設定が Gatsby によって実行されます。詳細は [Node API の詳細](/docs/node-apis/)で確認できます。このセクションでは、 `createPages` のみを利用します。 -`graphql` を利用して Markdown ファイルのデータを下記サンプルのように取得します。 次に、 `createPage` を利用して前のステップで作成した `blogTemplate.js` にデータを渡すことでファイルごとに静的なページを生成します。 +`graphql` を利用して Markdown ファイルのデータを下記サンプルのように取得します。 次に、`createPage` を利用して前のステップで作成した `blogTemplate.js` にデータを渡すことでファイルごとに静的なページを生成します。 **ヒント：** Gatsby は `createPages` API をビルド時に呼びだす際、`actions` と `graphql` パラメーターを付与しています。 From e2a17052ad588906a37b28ce77ba5b552412a925 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Mon, 9 Mar 2020 13:07:09 +0900 Subject: [PATCH 11/14] Update docs/docs/adding-markdown-pages.md Co-Authored-By: BSKY --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 8063ac314..f04bc48c4 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -137,7 +137,7 @@ export const pageQuery = graphql` ### Gatsby の `createPage` Node.js API を使って静的なページを生成する -Gatsby は強力な Node.js API を用意しており、これによって動的ページの作成などの機能が可能になります。 この API は `gatsby-node.js` 内で利用可能です。ルートディレクトリー、つまり `gatsby-config.js` と同じ階層に配置します。このファイルに書かれたそれぞれのエクスポート設定が Gatsby によって実行されます。詳細は [Node API の詳細](/docs/node-apis/)で確認できます。このセクションでは、 `createPages` のみを利用します。 +Gatsby は強力な Node.js API を用意しており、これによって動的ページの作成などの機能が可能になります。 この API は `gatsby-node.js` 内で利用可能です。ルートディレクトリー、つまり `gatsby-config.js` と同じ階層に配置します。このファイルに書かれたそれぞれのエクスポート設定が Gatsby によって実行されます。詳細は [Node API の詳細](/docs/node-apis/)で確認できます。このセクションでは、`createPages` のみを利用します。 `graphql` を利用して Markdown ファイルのデータを下記サンプルのように取得します。 次に、`createPage` を利用して前のステップで作成した `blogTemplate.js` にデータを渡すことでファイルごとに静的なページを生成します。 From b2aabaf9e03668b879850575fca2205f8828a4b6 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Mon, 9 Mar 2020 13:07:15 +0900 Subject: [PATCH 12/14] Update docs/docs/adding-markdown-pages.md Co-Authored-By: BSKY --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index f04bc48c4..73baa3155 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -131,7 +131,7 @@ export const pageQuery = graphql` 1. GraphQL クエリーは Markdown データのファイル取得後半で生成されます。Gatsby は自動的にクエリ結果に含まれるすべての Markdown メタデータと HTML をあなたに渡します。 - **ヒント： GraphQL についてさらに知りたい場合は、 こちらをお読みください [How to GraphQL](https://www.howtographql.com/)** + **ヒント： GraphQL についてさらに知りたい場合は、こちらをお読みください [How to GraphQL](https://www.howtographql.com/)** 2. クエリ結果は、Gatsby の `Template` に `data` として渡されます。`markdownRemark` はクエリした Markdown ファイルに関するすべてのプロパティが含まれます。このデータを使っってテンプレートを構築し、ブログ記事のスタイリングを変更できます。テンプレートは React コンポーネントなので、スタイリングに関しては Gatsby における[推奨されるスタイリング手段](/docs/styling/)を利用できます。 From 198b2d424d309aa23a2ed0c7bb17480fea4a8c3c Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Mon, 9 Mar 2020 13:07:21 +0900 Subject: [PATCH 13/14] Update docs/docs/adding-markdown-pages.md Co-Authored-By: BSKY --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 73baa3155..fc6cb1267 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -87,7 +87,7 @@ title: "My first blog post" ## Markdown ファイルのためのページテンプレートを作成する -`/src` ディレクトリー内に、 `templates` ディレクトリーを新しく作成しましょう。 +`/src` ディレクトリー内に、`templates` ディレクトリーを新しく作成しましょう。 `blogTemplate.js` ファイルをこのディレクトリー内に下記の内容で作成します。 ```jsx:title=src/templates/blogTemplate.js From 5b17f15fc153d479e3e04f846a48d97ad1ddd802 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Mon, 9 Mar 2020 13:07:27 +0900 Subject: [PATCH 14/14] Update docs/docs/adding-markdown-pages.md Co-Authored-By: BSKY --- docs/docs/adding-markdown-pages.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index fc6cb1267..f52ebc16c 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -68,7 +68,7 @@ plugins: [ ## Markdown ファイルを追加する -`/src` ディレクトリー内に、 `markdown-pages` ディレクトリーを新しく作成しましょう。 +`/src` ディレクトリー内に、`markdown-pages` ディレクトリーを新しく作成しましょう。 そしてその中に `post-1.md` ファイルを作成します。 ### Frontmatter - Markdown ファイルのメタデータ