You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 20, 2025. It is now read-only.
**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.
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.
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.
42
+
この手順を完了することで、Markdown ファイルをファイルシステムからデータソースとして利用できます。Markdown 本文は HTML に変換され、frontmatter の YAML は JSON ファイルとしてデータ化されます。
43
43
44
-
## Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark`
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.
46
+
[`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/)プラグインを使うことで、Markdown ファイルのコンテンツを認識し、読み込むことができます。このプラグインは Frontmatter のメタデータを `frontmatter`に変換して、コンテンツ部分を HTML に変換します。
47
47
48
-
### Install transformer plugin
48
+
### `gatsby-transformer-remark` プラグインのインストール
49
49
50
50
`npm install --save gatsby-transformer-remark`
51
51
52
52
### Configure plugin
53
53
54
-
Add this to `gatsby-config.js`after the previously added `gatsby-source-filesystem`.
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.
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.
132
+
1. GraphQL クエリーは Markdown データのファイル取得後半で生成されます。Gatsby は自動的にクエリ結果に含まれるすべての Markdown メタデータと HTML をあなたに渡します。
133
133
134
-
**Note: To learn more about GraphQL, consider this [excellent resource](https://www.howtographql.com/)**
134
+
**ヒント： GraphQL についてさらに知りたい場合は、こちらをお読みください [How to GraphQL](https://www.howtographql.com/)**
135
135
136
-
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.
### Create static pages using Gatsby’s Node.js`createPage` API
138
+
### Gatsby の`createPage`Node.js API を使って静的なページを生成する
139
139
140
-
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`.
140
+
Gatsby は強力な Node.js API を用意しており、これによって動的ページの作成などの機能が可能になります。 この API は `gatsby-node.js`内で利用可能です。ルートディレクトリー、つまり `gatsby-config.js` と同じ階層に配置します。このファイルに書かれたそれぞれのエクスポート設定が Gatsby によって実行されます。詳細は [Node API の詳細](/docs/node-apis/)で確認できます。このセクションでは、`createPages` のみを利用します。
141
141
142
-
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.
context: {}, //additional data can be passed via context
181
+
context: {}, //コンテキストとして任意のデータを付与できます
182
182
})
183
183
})
184
184
}
185
185
```
186
186
187
-
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!
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).
Check out tutorials listed on the [Awesome Gatsby](/docs/awesome-gatsby-resources/#gatsby-tutorials)page for more information on building Gatsby sites with Markdown.
0 commit comments