From 0ce611a2d250241c41235fd33743f0ad7f242c39 Mon Sep 17 00:00:00 2001 From: gensobunya Date: Wed, 11 Mar 2020 09:34:32 +0900 Subject: [PATCH 01/11] first commit --- ...dding-tags-and-categories-to-blog-posts.md | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index e648ffad7..7a7c885b4 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -1,50 +1,50 @@ --- -title: Creating Tags Pages for Blog Posts +title: ブログ記事のタグ一覧ページを生成する --- -Creating tag pages for your blog post is a way to let visitors browse related content. +ブログ記事のタグ一覧ページを作成することは、訪問者に関連するコンテンツを提供する手段の 1 つです。 -To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/tutorial/part-four/) and [Adding Markdown Pages](/docs/adding-markdown-pages/). +タグをブログくじに追加するには、まず Markdown ページをあなたのウェブサイトにブログ記事として設定する必要があります。この設定については、[Gatsby におけるデータ](/tutorial/part-four/) と [Markdown のページを追加する](/docs/adding-markdown-pages/)に記載しています。 -The process will essentially look like this: +タグページ追加の主なプロセスは下記の通りです。 -1. Add tags to your `markdown` files -2. Write a query to get all tags for your posts -3. Make a tags page template (for `/tags/{tag}`) -4. Modify `gatsby-node.js` to render pages using that template -5. Make a tags index page (`/tags`) that renders a list of all tags -6. _(optional)_ Render tags inline with your blog posts +1. `markdown` ファイルにタグを追加する +2. あなたの記事にある全てのタグを取得するクエリーを書く +3. タグページのテンプレートを作成する (`/tags/{tag}`のようなページ） +4. `gatsby-node.js` にテンプレートを利用してタグページをレンダリングする設定を追加する +5. タグインデックスページ (`/tags`)を作成し、全てのタグを一覧アップする +6. _(任意)_ タグ一覧をブログ記事の中に表示させる -## Add tags to your `markdown` files +## `markdown` ファイルにタグを追加する -You add tags by defining them in the `frontmatter` of your Markdown file. The `frontmatter` is the area at the top surrounded by dashes that includes post data like the title and date. +タグは Markdown ファイル内の `frontmatter` に追加します。`frontmatter` はハイフンによって区切られたエリアで、記事のタイトルや投稿日時のデータを含む部分です。 ```markdown --- -title: "A Trip To the Zoo" +title: "動物園への旅行" --- -I went to the zoo today. It was terrible. +今日は動物園に行ってきました！とても楽しかった！ ``` -Fields can be strings, numbers, or arrays. Since a post can usually have many tags, it makes sense to define it as an array. Here you add your new tags field: +属性は `string`,`number` もしくはその配列である必要があります。記事に複数のタグを付けたい場合は配列にして記載します。新しくタグ属性を追加すると以下のようなファイルになります。 ```markdown --- -title: "A Trip To the Zoo" +title: "動物園への旅行" tags: ["animals", "Chicago", "zoos"] --- -I went to the zoo today. It was terrible. +今日は動物園に行ってきました！とても楽しかった！ ``` -If `gatsby develop` is running, restart it so Gatsby can pick up the new fields. +`gatsby develop` が実行されている場合、再実行してから新しい `frontmatter` の属性が取得されます。 -## Write a query to get all tags for your posts +## あなたの記事にある全てのタグを取得するクエリーを書く -Now, these fields are available in the data layer. To use field data, query it using `graphql`. All fields are available to query inside `frontmatter` +これらの属性は全てデータレイヤーで利用可能となっています。属性データを使うには `graphql` を使ってこれをクエリします。 `frontmatter` に含まれる全ての属性が GraphQL で取得できます。 -Try running the following query in GraphiQL (`http://localhost:8000/___graphql`): +まずは、 GraphiQL (`http://localhost:8000/___graphql`) を使ってクエリーを実行してみましょう。`gatsby develop` を実行していない場合は実行してからアクセスしてください！ ```graphql { @@ -57,13 +57,13 @@ Try running the following query in GraphiQL (`http://localhost:8000/___ } ``` -The above query groups posts by `tags`, and returns each `tag` with the number of posts as `totalCount`. As an addition, you could extract some post data in each group if you need to. To keep this tutorial small, you're only using the tag name in your tag pages. Make the tag page template now: +上記のクエリーは `tags` 属性ごとにグルーピングして、それぞれの `tag` が付いている記事の数を `totalCount` で表示します。 さらに、必要であればそれぞれのグループに含まれるいくつかの記事データを抽出することもできます。このチュートリアルを短く済ませるために、今回はタグ名のみをタグごとのページに表示します。次にタグページのテンプレートを作りましょう。 -## Make a tags page template (for `/tags/{tag}`) +## タグページのテンプレートを作成する（`/tags/{tag}` のようなページ） -If you followed the tutorial for [Adding Markdown Pages](/docs/adding-markdown-pages/), then this process should sound familiar: Make a tag page template, then use it in `createPages` in `gatsby-node.js` to generate individual pages for the tags in your posts. +あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/)を済ませていれば、このプロセスと似た作業をすでに実施ているでしょう。タグページのテンプレートを作成し、 `createPages` を `gatsby-node.js` の中で実行して記事に含めたタグごとのページを生成します。 -First, you'll add a tags template at `src/templates/tags.js`: +まずは、`src/templates/tags.js` にタグごとのページテンプレートを作成します。 ```jsx:title=src/templates/tags.js import React from "react" @@ -94,8 +94,8 @@ const Tags = ({ pageContext, data }) => { })} {/* - This links to a page that does not yet exist. - You'll come back to it! + このリンクは存在しないページを参照します。 + あとで修正しましょう！ */} All tags @@ -150,11 +150,11 @@ export const pageQuery = graphql` ` ``` -**Note**: `propTypes` are included in this example to help you ensure you're getting all the data you need in the component, and to help serve as a guide while destructuring / using those props. +**ヒント**: `propTypes` がこの例に含まれています。これはコンポーネントにおける全てのデータを取得するときに、データ階層を参照・利用する際にガイドを表示し、あなたを助けます。 -## Modify `gatsby-node.js` to render pages using that template +## `gatsby-node.js` にテンプレートを利用してタグページをレンダリングする設定を追加する -Now you've got a template. Great! Assuming you followed the tutorial for [Adding Markdown Pages](/docs/adding-markdown-pages/) and provide a sample `createPages` that generates post pages as well as tag pages. In the site's `gatsby-node.js` file, include `lodash` (`const _ = require('lodash')`) and then make sure your [`createPages`](/docs/node-apis/#createPages) looks something like this: +テンプレートを作成しましたね、素晴らしい！ あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/) を既に読んでいるなら、その中に含まれている `createPages` が記事ページを作るサンプルはタグ一覧ページのそれとほぼ同じものです。あなたのウェブサイトにおける `gatsby-node.js` ファイルが `lodash` をインポートして宣言済み (`const _ = require('lodash')`) ならば、 [`createPages`](/docs/node-apis/#createPages) は下記のように使えます。 ```js:title=gatsby-node.js const path = require("path") @@ -223,15 +223,15 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } ``` -Some notes: +いくつかのヒント: -- Your GraphQL query only looks for data you need to generate these pages. Anything else can be queried again later (and, if you notice, you do this above in the tags template for the post title). -- You have referenced two `allMarkdownRemark` fields in your query. To avoid naming collisions you must [alias](/docs/graphql-reference/#aliasing) one of them. You alias both to make your code more human-readable. -- While making the tag pages, note that you pass `tag.name` through in the `context`. This is the value that gets used in the `TagPage` query to limit your search to only posts tagged with the tag in the URL. +- あなたの GraphQL クエリーはページ生成に必要なデータのみを参照しています。他のデータをページ内で利用したくなった場合、再度クエリを実行できます。 (つまりタグ一覧のテンプレートファイルを更新してクエリを再実行する必要があります) +- あなたは既に 2 つの `allMarkdownRemark` 要素をクエリで利用しています。名前の衝突を避けるために、必ずクエリの [エイリアス](/docs/graphql-reference/#aliasing) を利用しましょう。それぞれのクエリでエイリアスを命名して読みやすいコードにすることを心がけましょう。 +- タグページを作成している際、`context` として `tag.name` を渡していることを覚えておいてください。この値は `TagPage` クエリー内で利用しており、検索対象を指定したタグ名のページのみに限定するために利用しています。 -## Make a tags index page (`/tags`) that renders a list of all tags +## タグインデックスページ (`/tags`)を作成し、全てのタグを一覧アップする -Your `/tags` page will simply list out all tags, followed by the number of posts with that tag. You can get the data with the first query you wrote earlier, that groups posts by tags: +これから作成する `/tags` ページはシンプルにウェブサイト内の全タグをリストアップし、タグごとの記事数を合わせて表示します。このチュートリアルの序盤に作成したクエリを使って、タグごとに記事をグルーピングします。 ```jsx:title=src/pages/tags.js import React from "react" @@ -306,6 +306,6 @@ export const pageQuery = graphql` ` ``` -## _(optional)_ Render tags inline with your blog posts +## _(任意)_ タグをブログ記事の中に表示させる -The home stretch! Anywhere else you'd like to render your tags, simply add them to the `frontmatter` section of your `graphql` query and access them in your component like any other prop. +もう少し頑張りますか？タグを記事内の任意の位置に表示させたい場合、記事用の `graphql` クエリーに手を加え、`frontmatter` からタグデータを取得するように変更します。これでコンポーネント内からタイトルなどと同じ用にタグ情報へアクセスできるようになります。 From 4a39536d92029171a4d7bafb3e60f52d6c283e2d Mon Sep 17 00:00:00 2001 From: gensobunya Date: Sat, 14 Mar 2020 14:24:14 +0900 Subject: [PATCH 02/11] =?UTF-8?q?lint=E6=B8=88=E3=81=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 7a7c885b4..a893f9b94 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -154,7 +154,7 @@ export const pageQuery = graphql` ## `gatsby-node.js` にテンプレートを利用してタグページをレンダリングする設定を追加する -テンプレートを作成しましたね、素晴らしい！ あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/) を既に読んでいるなら、その中に含まれている `createPages` が記事ページを作るサンプルはタグ一覧ページのそれとほぼ同じものです。あなたのウェブサイトにおける `gatsby-node.js` ファイルが `lodash` をインポートして宣言済み (`const _ = require('lodash')`) ならば、 [`createPages`](/docs/node-apis/#createPages) は下記のように使えます。 +テンプレートを作成しましたね、素晴らしい！　あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/) をすでに読んでいるなら、その中に含まれている `createPages` が記事ページを作るサンプルはタグ一覧ページのそれとほぼ同じものです。あなたのウェブサイトにおける `gatsby-node.js` ファイルが `lodash` をインポートして宣言済み (`const _ = require('lodash')`) ならば、 [`createPages`](/docs/node-apis/#createPages) は下記のように使えます。 ```js:title=gatsby-node.js const path = require("path") @@ -223,15 +223,15 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } ``` -いくつかのヒント: +いくつかのヒント： -- あなたの GraphQL クエリーはページ生成に必要なデータのみを参照しています。他のデータをページ内で利用したくなった場合、再度クエリを実行できます。 (つまりタグ一覧のテンプレートファイルを更新してクエリを再実行する必要があります) -- あなたは既に 2 つの `allMarkdownRemark` 要素をクエリで利用しています。名前の衝突を避けるために、必ずクエリの [エイリアス](/docs/graphql-reference/#aliasing) を利用しましょう。それぞれのクエリでエイリアスを命名して読みやすいコードにすることを心がけましょう。 +- あなたの GraphQL クエリーはページ生成に必要なデータのみを参照しています。他のデータをページ内で利用したくなった場合、再度クエリを実行できます。 (つまりタグ一覧のテンプレートファイルを更新してクエリを再実行する必要があります） +- あなたはすでに 2 つの `allMarkdownRemark` 要素をクエリで利用しています。名前の衝突を避けるために、必ずクエリの [エイリアス](/docs/graphql-reference/#aliasing) を利用しましょう。それぞれのクエリでエイリアスを命名して読みやすいコードにすることを心がけましょう。 - タグページを作成している際、`context` として `tag.name` を渡していることを覚えておいてください。この値は `TagPage` クエリー内で利用しており、検索対象を指定したタグ名のページのみに限定するために利用しています。 ## タグインデックスページ (`/tags`)を作成し、全てのタグを一覧アップする -これから作成する `/tags` ページはシンプルにウェブサイト内の全タグをリストアップし、タグごとの記事数を合わせて表示します。このチュートリアルの序盤に作成したクエリを使って、タグごとに記事をグルーピングします。 +これから作成する `/tags` ページはシンプルにウェブサイト内の全タグを一覧アップし、タグごとの記事数を合わせて表示します。このチュートリアルの序盤に作成したクエリを使って、タグごとに記事をグルーピングします。 ```jsx:title=src/pages/tags.js import React from "react" From 0b24af062b792b2ce83f6f0fbc0214db9331fa0d Mon Sep 17 00:00:00 2001 From: gensobunya Date: Sat, 14 Mar 2020 14:36:08 +0900 Subject: [PATCH 03/11] =?UTF-8?q?=E8=AA=A4=E5=AD=97=E8=84=B1=E5=AD=97?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../adding-tags-and-categories-to-blog-posts.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index a893f9b94..94305b3a0 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -4,7 +4,7 @@ title: ブログ記事のタグ一覧ページを生成する ブログ記事のタグ一覧ページを作成することは、訪問者に関連するコンテンツを提供する手段の 1 つです。 -タグをブログくじに追加するには、まず Markdown ページをあなたのウェブサイトにブログ記事として設定する必要があります。この設定については、[Gatsby におけるデータ](/tutorial/part-four/) と [Markdown のページを追加する](/docs/adding-markdown-pages/)に記載しています。 +タグをブログ記事に追加するには、まず Markdown ページをあなたのウェブサイトにブログ記事として設定する必要があります。この設定については、[Gatsby におけるデータ](/tutorial/part-four/) と [Markdown のページを追加する](/docs/adding-markdown-pages/)に記載されています。 タグページ追加の主なプロセスは下記の通りです。 @@ -12,7 +12,7 @@ title: ブログ記事のタグ一覧ページを生成する 2. あなたの記事にある全てのタグを取得するクエリーを書く 3. タグページのテンプレートを作成する (`/tags/{tag}`のようなページ） 4. `gatsby-node.js` にテンプレートを利用してタグページをレンダリングする設定を追加する -5. タグインデックスページ (`/tags`)を作成し、全てのタグを一覧アップする +5. タグインデックスページ (`/tags`)を作成し、全てのタグを一覧化する 6. _(任意)_ タグ一覧をブログ記事の中に表示させる ## `markdown` ファイルにタグを追加する @@ -61,7 +61,7 @@ tags: ["animals", "Chicago", "zoos"] ## タグページのテンプレートを作成する（`/tags/{tag}` のようなページ） -あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/)を済ませていれば、このプロセスと似た作業をすでに実施ているでしょう。タグページのテンプレートを作成し、 `createPages` を `gatsby-node.js` の中で実行して記事に含めたタグごとのページを生成します。 +あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/)を済ませていれば、このプロセスと似た作業をすでに実施しているでしょう。タグページのテンプレートを作成し、 `createPages` を `gatsby-node.js` の中で実行して記事に含めたタグごとのページを生成します。 まずは、`src/templates/tags.js` にタグごとのページテンプレートを作成します。 @@ -95,7 +95,7 @@ const Tags = ({ pageContext, data }) => { {/* このリンクは存在しないページを参照します。 - あとで修正しましょう！ + チュートリアルの後半で作成するので今は気にしない！ */} All tags @@ -150,11 +150,11 @@ export const pageQuery = graphql` ` ``` -**ヒント**: `propTypes` がこの例に含まれています。これはコンポーネントにおける全てのデータを取得するときに、データ階層を参照・利用する際にガイドを表示し、あなたを助けます。 +**ヒント**: `propTypes` がこのサンプルに含まれています。これはコンポーネントにおける全てのデータを取得するときに、データ階層を参照・利用する際にガイドを表示し、あなたを助けます。 ## `gatsby-node.js` にテンプレートを利用してタグページをレンダリングする設定を追加する -テンプレートを作成しましたね、素晴らしい！　あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/) をすでに読んでいるなら、その中に含まれている `createPages` が記事ページを作るサンプルはタグ一覧ページのそれとほぼ同じものです。あなたのウェブサイトにおける `gatsby-node.js` ファイルが `lodash` をインポートして宣言済み (`const _ = require('lodash')`) ならば、 [`createPages`](/docs/node-apis/#createPages) は下記のように使えます。 +テンプレートを作成しましたね、素晴らしい！　あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/) をすでに読んでいるなら、その中に含まれている `createPages` が記事ページを作るサンプルはタグページのそれとほぼ同じものです。あなたのウェブサイトにおける `gatsby-node.js` ファイルが `lodash` をインポートして宣言済み (`const _ = require('lodash')`) ならば、 [`createPages`](/docs/node-apis/#createPages) は下記のように使えます。 ```js:title=gatsby-node.js const path = require("path") @@ -229,9 +229,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => { - あなたはすでに 2 つの `allMarkdownRemark` 要素をクエリで利用しています。名前の衝突を避けるために、必ずクエリの [エイリアス](/docs/graphql-reference/#aliasing) を利用しましょう。それぞれのクエリでエイリアスを命名して読みやすいコードにすることを心がけましょう。 - タグページを作成している際、`context` として `tag.name` を渡していることを覚えておいてください。この値は `TagPage` クエリー内で利用しており、検索対象を指定したタグ名のページのみに限定するために利用しています。 -## タグインデックスページ (`/tags`)を作成し、全てのタグを一覧アップする +## タグインデックスページ (`/tags`)を作成し、全てのタグを一覧化する -これから作成する `/tags` ページはシンプルにウェブサイト内の全タグを一覧アップし、タグごとの記事数を合わせて表示します。このチュートリアルの序盤に作成したクエリを使って、タグごとに記事をグルーピングします。 +これから作成する `/tags` ページはシンプルにウェブサイト内の全タグを一覧化し、タグごとの記事数を合わせて表示します。このチュートリアルの序盤に作成したクエリを使って、タグごとに記事をグルーピングします。 ```jsx:title=src/pages/tags.js import React from "react" From 1e4fe0913a53a176dbbad469dcec4d60e7168d17 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Sat, 14 Mar 2020 14:52:07 +0900 Subject: [PATCH 04/11] Update docs/docs/adding-tags-and-categories-to-blog-posts.md Co-Authored-By: BSKY --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 94305b3a0..d30799b58 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -44,7 +44,7 @@ tags: ["animals", "Chicago", "zoos"] これらの属性は全てデータレイヤーで利用可能となっています。属性データを使うには `graphql` を使ってこれをクエリします。 `frontmatter` に含まれる全ての属性が GraphQL で取得できます。 -まずは、 GraphiQL (`http://localhost:8000/___graphql`) を使ってクエリーを実行してみましょう。`gatsby develop` を実行していない場合は実行してからアクセスしてください！ +まずは、GraphiQL (`http://localhost:8000/___graphql`) を使ってクエリーを実行してみましょう。`gatsby develop` を実行していない場合は実行してからアクセスしてください！ ```graphql { From 1a4c9f025302e7bb66fe69e0eb9b524ac2e70661 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Sat, 14 Mar 2020 14:52:14 +0900 Subject: [PATCH 05/11] Update docs/docs/adding-tags-and-categories-to-blog-posts.md Co-Authored-By: BSKY --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index d30799b58..d8ef8523e 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -61,7 +61,7 @@ tags: ["animals", "Chicago", "zoos"] ## タグページのテンプレートを作成する（`/tags/{tag}` のようなページ） -あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/)を済ませていれば、このプロセスと似た作業をすでに実施しているでしょう。タグページのテンプレートを作成し、 `createPages` を `gatsby-node.js` の中で実行して記事に含めたタグごとのページを生成します。 +あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/)を済ませていれば、このプロセスと似た作業をすでに実施しているでしょう。タグページのテンプレートを作成し、`createPages` を `gatsby-node.js` の中で実行して記事に含めたタグごとのページを生成します。 まずは、`src/templates/tags.js` にタグごとのページテンプレートを作成します。 From f43871089525b792c9c1f742f9e3ea2d24b98771 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Sat, 14 Mar 2020 14:52:25 +0900 Subject: [PATCH 06/11] Update docs/docs/adding-tags-and-categories-to-blog-posts.md Co-Authored-By: BSKY --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index d8ef8523e..5863e5bde 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -226,7 +226,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { いくつかのヒント： - あなたの GraphQL クエリーはページ生成に必要なデータのみを参照しています。他のデータをページ内で利用したくなった場合、再度クエリを実行できます。 (つまりタグ一覧のテンプレートファイルを更新してクエリを再実行する必要があります） -- あなたはすでに 2 つの `allMarkdownRemark` 要素をクエリで利用しています。名前の衝突を避けるために、必ずクエリの [エイリアス](/docs/graphql-reference/#aliasing) を利用しましょう。それぞれのクエリでエイリアスを命名して読みやすいコードにすることを心がけましょう。 +- あなたはすでに２つの `allMarkdownRemark` 要素をクエリで利用しています。名前の衝突を避けるために、必ずクエリの [エイリアス](/docs/graphql-reference/#aliasing) を利用しましょう。それぞれのクエリでエイリアスを命名して読みやすいコードにすることを心がけましょう。 - タグページを作成している際、`context` として `tag.name` を渡していることを覚えておいてください。この値は `TagPage` クエリー内で利用しており、検索対象を指定したタグ名のページのみに限定するために利用しています。 ## タグインデックスページ (`/tags`)を作成し、全てのタグを一覧化する From b0ed00edd95dadb2f643583bea12507ee9162a89 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Sat, 14 Mar 2020 14:52:31 +0900 Subject: [PATCH 07/11] Update docs/docs/adding-tags-and-categories-to-blog-posts.md Co-Authored-By: BSKY --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 5863e5bde..85032b70a 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -2,7 +2,7 @@ title: ブログ記事のタグ一覧ページを生成する --- -ブログ記事のタグ一覧ページを作成することは、訪問者に関連するコンテンツを提供する手段の 1 つです。 +ブログ記事のタグ一覧ページを作成することは、訪問者に関連するコンテンツを提供する手段の１つです。 タグをブログ記事に追加するには、まず Markdown ページをあなたのウェブサイトにブログ記事として設定する必要があります。この設定については、[Gatsby におけるデータ](/tutorial/part-four/) と [Markdown のページを追加する](/docs/adding-markdown-pages/)に記載されています。 From f17e539e9cb77d1a705350332be7b2484629400d Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Sat, 14 Mar 2020 14:52:41 +0900 Subject: [PATCH 08/11] Update docs/docs/adding-tags-and-categories-to-blog-posts.md Co-Authored-By: BSKY --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 85032b70a..0495b5c5c 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -154,7 +154,7 @@ export const pageQuery = graphql` ## `gatsby-node.js` にテンプレートを利用してタグページをレンダリングする設定を追加する -テンプレートを作成しましたね、素晴らしい！　あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/) をすでに読んでいるなら、その中に含まれている `createPages` が記事ページを作るサンプルはタグページのそれとほぼ同じものです。あなたのウェブサイトにおける `gatsby-node.js` ファイルが `lodash` をインポートして宣言済み (`const _ = require('lodash')`) ならば、 [`createPages`](/docs/node-apis/#createPages) は下記のように使えます。 +テンプレートを作成しましたね、素晴らしい！　あなたが [Markdown のページを追加する](/docs/adding-markdown-pages/) をすでに読んでいるなら、その中に含まれている `createPages` が記事ページを作るサンプルはタグページのそれとほぼ同じものです。あなたのウェブサイトにおける `gatsby-node.js` ファイルが `lodash` をインポートして宣言済み (`const _ = require('lodash')`) ならば、[`createPages`](/docs/node-apis/#createPages) は下記のように使えます。 ```js:title=gatsby-node.js const path = require("path") From 127d1ff13dfa9adbc50d25a51e22fe9c3519acf5 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Sat, 14 Mar 2020 15:39:33 +0900 Subject: [PATCH 09/11] Update docs/docs/adding-tags-and-categories-to-blog-posts.md Co-Authored-By: Yasuaki Uechi --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 0495b5c5c..53eaa0e4f 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -2,7 +2,7 @@ title: ブログ記事のタグ一覧ページを生成する --- -ブログ記事のタグ一覧ページを作成することは、訪問者に関連するコンテンツを提供する手段の１つです。 +ブログ記事のタグ一覧ページを作成することは、訪問者に関連するコンテンツを提供する手段のひとつです。 タグをブログ記事に追加するには、まず Markdown ページをあなたのウェブサイトにブログ記事として設定する必要があります。この設定については、[Gatsby におけるデータ](/tutorial/part-four/) と [Markdown のページを追加する](/docs/adding-markdown-pages/)に記載されています。 From 97aafb4d5d1261449fecf46ef4c47583401294b3 Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Sat, 14 Mar 2020 15:39:39 +0900 Subject: [PATCH 10/11] Update docs/docs/adding-tags-and-categories-to-blog-posts.md Co-Authored-By: Yasuaki Uechi --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 53eaa0e4f..14c1be0e7 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -226,7 +226,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { いくつかのヒント： - あなたの GraphQL クエリーはページ生成に必要なデータのみを参照しています。他のデータをページ内で利用したくなった場合、再度クエリを実行できます。 (つまりタグ一覧のテンプレートファイルを更新してクエリを再実行する必要があります） -- あなたはすでに２つの `allMarkdownRemark` 要素をクエリで利用しています。名前の衝突を避けるために、必ずクエリの [エイリアス](/docs/graphql-reference/#aliasing) を利用しましょう。それぞれのクエリでエイリアスを命名して読みやすいコードにすることを心がけましょう。 +- あなたはすでにふたつの `allMarkdownRemark` 要素をクエリで利用しています。名前の衝突を避けるために、必ずクエリの [エイリアス](/docs/graphql-reference/#aliasing) を利用しましょう。それぞれのクエリでエイリアスを命名して読みやすいコードにすることを心がけましょう。 - タグページを作成している際、`context` として `tag.name` を渡していることを覚えておいてください。この値は `TagPage` クエリー内で利用しており、検索対象を指定したタグ名のページのみに限定するために利用しています。 ## タグインデックスページ (`/tags`)を作成し、全てのタグを一覧化する From 9fb61abba51826a93aa7c74e26975ff741be69cd Mon Sep 17 00:00:00 2001 From: "Gen.T. (gensobunya)" <36843875+gentksb@users.noreply.github.com> Date: Sat, 14 Mar 2020 15:48:41 +0900 Subject: [PATCH 11/11] Update adding-tags-and-categories-to-blog-posts.md --- docs/docs/adding-tags-and-categories-to-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 14c1be0e7..bd504b998 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -308,4 +308,4 @@ export const pageQuery = graphql` ## _(任意)_ タグをブログ記事の中に表示させる -もう少し頑張りますか？タグを記事内の任意の位置に表示させたい場合、記事用の `graphql` クエリーに手を加え、`frontmatter` からタグデータを取得するように変更します。これでコンポーネント内からタイトルなどと同じ用にタグ情報へアクセスできるようになります。 +もう少し頑張りますか？タグを記事内の任意の位置に表示させたい場合、記事用の `graphql` クエリーに手を加え、`frontmatter` からタグデータを取得するように変更します。これでコンポーネント内からタイトルなどと同じようにタグ情報へアクセスできるようになります。