From 1ec86e3ac3a2a8ee59940859be2450d3c6398ea2 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Tue, 28 Jan 2020 13:16:47 +0900 Subject: [PATCH 01/25] docs: translate docs/theme-api --- docs/docs/theme-api.md | 74 +++++++++++++++++++++--------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index f0194b3c5..b6e8803e2 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -1,21 +1,21 @@ --- -title: Themes API Reference +title: Themes API リファレンス --- -## Core Gatsby APIs +## コアとなる Gatsby の API -Themes are packaged Gatsby sites shipped as plugins, so you have access to all of Gatsby's APIs for modifying default configuration settings and functionality. +テーマとは、プラグインとして公開されているパッケージ化された Gatsby サイトのことです。デフォルトの設定や機能を編集するための Gatsby の全ての API を使うことができます。 - [Gatsby Config](https://www.gatsbyjs.org/docs/gatsby-config/) - [Actions](https://www.gatsbyjs.org/docs/actions/) - [Node Interface](https://www.gatsbyjs.org/docs/node-interface/) -- ... [and more](https://www.gatsbyjs.org/docs/api-specification/) +- ... [もっと知りたい方向け](https://www.gatsbyjs.org/docs/api-specification/) -If you're new to Gatsby you can get started by following along with the guides for building out a site. Converting it to a theme will be straightforward later on since themes are prepackaged Gatsby sites. +Gatsby が初めての方は、サイトを構築するためのガイドから始めてみてください。テーマは事前にパッケージ化された Gatsby サイトなので、一度作ったサイトをテーマに変換することは後で容易にできます。 -## Configuration +## 設定 -Plugins can now include a `gatsby-config` in addition to the other `gatsby-*` files. We typically refer to plugins that include a `gatsby-config.js` as a theme (more on that in [theme composition](#theme-composition)). A typical `gatsby-config.js` in a user's site that uses your theme could look like this. This example passes in two options to `gatsby-theme-name`: `postsPath` and `colors`. +プラグインは、他の `gatsby-*` の形式で命名されたファイルなどと一緒に `gatsby-config` を含むことができるようになりました。通常、 `gatsby-config.js` を含むプラグインのことをテーマと呼びます（もっと知りたい方は[theme composition](#theme-composition)`gatsby-config.js`をご覧ください）。典型的なユーザーサイトの `gatsby-config.js` の中身は次のようになります。 ここで、`gatsby-theme-name` には、 2 つのオプション `postsPath` と `colors` が渡されています。 ```js:title=gatsby-config.js module.exports = { @@ -33,9 +33,9 @@ module.exports = { } ``` -You can access options that are passed to your theme in your theme's `gatsby-config`. You can use options to make filesystem sourcing configurable, accept different nav menu items, change branding colors from the default, and anything else you want to make configurable. +`gatsby-config` では、テーマへ渡されるオプションにアクセスできます。オプションを使うことで、ファイルシステムのソース管理を設定できるようになったり、異なる nav manu を使えるようになったり、ブランドカラーをデフォルトから変更したり、とにかくしたいと思うものなら何でも設定を変えられるようにできます。 -To take advantage of the options that are passed in when configuring your theme in a user's site, return a function in your theme's `gatsby-config.js`. The argument the function receives is the options the user passed in. +あなたのテーマを使うユーザーが、テーマの設定を変更する際にオプションを渡せるようにするために、テーマの `gatsby-config.js` で関数を返すようにしてください。関数の引数は、ユーザーが指定するオプションです。 ```js:title=gatsby-config.js module.exports = themeOptions => { @@ -50,11 +50,11 @@ module.exports = themeOptions => { } ``` -While using the usual object export (`module.exports = {}`) in your theme means that you can run the theme standalone as its own site, when using a function in your theme to accept options you will need to run the theme as part of an example site. See how the [theme authoring starter](https://github.com/gatsbyjs/gatsby-starter-theme-workspace) handles this using Yarn Workspaces. +もしあなたのテーマで、よくあるオブジェクトのエクスポート（`module.exports = {}`）を使っているときは、そのテーマをスタンドアローンで動作させることができます。 Yarn ワークスペースでそれをどのように実現するのか知りたい方は、[theme authoring starter](https://github.com/gatsbyjs/gatsby-starter-theme-workspace)をご覧ください。 -### Accessing options elsewhere +### 他の場所でオプションにアクセスする方法 -Note that because themes are plugins you can also access the options in any of the lifecycle methods that you're used to. For example, in your theme's `gatsby-node.js` you can access the options as the second argument to `createPages`: +テーマはあくまでプラグインなので、これまで使ってきたライフサイクルに関する全てのメソッドのオプションを利用できます。例えば、テーマの `gatsby-node.js` で、 `createPages` の第 2 引数としてオプションを利用できます。 ```js:title=gatsby-node.js exports.createPages = async ({ graphql, actions }, themeOptions) => { @@ -62,25 +62,25 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { } ``` -## Shadowing +## シャドーイング -Since themes are usually deployed as npm packages that other people use in their sites, you need a way to modify certain files, such as React components, without making changes to the source code of the theme. This is called _Shadowing_. +テーマは通常、他の人も利用可能なパッケージとしてデプロイされるため、テーマそれ自体のコードに変更を加えることなく、（React コンポーネントのような）特定のファイルを編集する方法が必要になるでしょう。これを実現するのが、 _シャドーイング_ という方法です。 -Shadowing is a filesystem-based API that allows us to replace one file with another at build time. For example, if you had a theme with a `Header` component you could replace that `Header` with your own by creating a new file and placing it in the correct location for Shadowing to find it. +シャドーイングとは、 filesystem をベースとする API であり、これを使うことでビルド時に特定のファイルを置き換えることができます。例えば、 `Header` コンポーネントを含むようなテーマがあるとします。 `Header` をあなた独自のものに置き換えるには、新しいファイルを作り、これを適切な場所に配置し、シャドーイング機能がそれを関知できるようにします。 -### Overriding +### オーバーライド -Taking a closer look at the `Header` example, let's say you have a theme called `gatsby-theme-amazing`. That theme uses a `Header` component to render navigation and other miscellaneous items. The path to the component from the root of the npm package is `gatsby-theme-amazing/src/components/header.js`. +`Header` の例に着目してみましょう。例えば、 `gatsby-theme-amazing` というテーマを作ったとします。このテーマでは、ナビゲーションや他の諸々のアイテムを表示するために `Header` コンポーネントを利用します。 npm パッケージの root からコンポーネントまでのパスは、 `gatsby-theme-amazing/src/components/header.js` のようになります。 -You might want the `Header` component to do something different (maybe change colors, maybe add additional navigation items, really anything you can think of). To do that, you create a file in your site at `src/gatsby-theme-amazing/components/header.js`. You can now export any React component you want from this file and Gatsby will use it instead of the theme's component. +ときには `Header` コンポーネントに何か違うことをさせたいこともあるでしょう。例えば、色を変えたり、さらにナビゲーションアイテムを追加したりといったことです。これを実現するために、ウェブサイトの次のパスにファイルを作ります： `src/gatsby-theme-amazing/components/header.js` 。これで、どんな React コンポーネントもこのファイルからエクスポートでき、 Gatsby はテーマのコンポーネントではなく、こちらのファイルを参照するようになります。 -> 💡 Note: you can shadow components from other themes using the same method. Read more about advanced applications in [latent shadowing](https://johno.com/latent-component-shadowing). +> 💡 Note: 他のテーマから同じメソッドを使うことで、コンポーネントをシャドーイングすることもできます。シャドーイングの高度な適用例については、[latent shadowing](https://johno.com/latent-component-shadowing)で紹介しています。 -### Extending +### 拡張 -In the last section we talked about completely replacing one component with another. What if you want to make a smaller change that doesn't require copy/pasting the entire theme component into your own? You can take advantage of the ability to extend components. +前のセクションでは、コンポーネントを全く新しく置き換える方法についてお話ししました。では、テーマ全体をコピー&ペーストすることなしに、ちょっとした変更を加えたいときにはどうすれば良いでしょうか。そんな時は、コンポーネントの拡張という機能を使います。 -Taking the `Header` example from before, when you write your shadowing file at `src/gatsby-theme-amazing/components/header.js`, you can import the original component and re-export it as such, adding your own overridden prop to the component. +前に取り上げた `Header` コンポーネントの例を見てみましょう。シャドーイングしたファイルは、 `src/gatsby-theme-amazing/components/header.js` にあります。ここで、独自にオーバーライドした prop をコンポーネントに付与することで、元のコンポーネントをインポートして再度エクスポートするなどといったことができます。 ```js import Header from "gatsby-theme-amazing/src/components/header" @@ -89,31 +89,31 @@ import Header from "gatsby-theme-amazing/src/components/header" export default props =>
``` -Taking this approach means that when you upgrade your theme later you can also take advantage of all the updates to the `Header` component because you haven't fully replaced it, just modified it. +このアプローチをとるということはつまり、テーマをアップグレードしたくなったときに、 `Header` コンポーネントに適用された全てのアップデートを活用できるということを意味します。なぜなら、 `Header` コンポーネントを全て置き換えたわけでなく、インポートしたものを修正しただけだからです。 -### What path should be used to shadow a file? +### ファイルをシャドーイングする際に使うべきパスは？ -Until Gatsby has tooling to automatically handle shadowing, you will have to manually locate paths in a theme and create the correct shadowing paths in your site. +Gatsby がシャドーイング機能を全て自動でやってくれるようになるまでは、手動でテーマ内のパスを見つけて、サイト内に正しいシャドーイング用のパスを作成する必要があります。 -Luckily, the way to do that is only a few steps. Take the `src` directory from the theme, and move it to the front of the path, then write a file at that location in your site. Looking back on the `Header` example, this is the path to the component in your theme: +幸いにも、これはそこまで手間ではありません。テーマ内にある、シャドーイングしたいファイルが `{theme-name}/src/{any-sub-dir}/{file}` のようなパスになっているとしたら、自分のサイトの `src` 直下で `{theme-name}/{any-sub-dir}/{file}` の形式でファイルを作ればよいのです。 `Header` の例で言えば、これはテーマにおけるコンポーネントへのパスのことです： ```text gatsby-theme-amazing/src/components/header.js ``` -and here is the path where you would shadow it in your site: +そして、下記のパスがサイト内でシャドーイングする場所です： ```text /src/gatsby-theme-amazing/components/header.js ``` -Shadowing only works on imported files in the `src` directory. This is because shadowing is built on top of Webpack, so the module graph needs to include the shadowable file. +シャドーイングは `src` ディレクトリーの、インポートされたファイルにおいてのみ機能します。これは、シャドーイングが Webpack 上で構築されるため、モジュールグラフがシャドーイング可能なファイルを含める必要があるからです。 -Since you can use multiple themes in a given site, there are many potential places to shadow a given file (one for each theme and one for the user's site). In the event that multiple themes are attempting to shadow `gatsby-theme-amazing/src/components/header.js`, the last theme included in the plugins array will win. The site itself takes the highest priority in shadowing. +ひとつのサイトで複数のテーマを利用できるため、ファイルがシャドーイングされうる場所はたくさんあります（ひとつのファイルが複数のテーマに利用されたり、あるいはユーザーのサイトで利用されたりします）。複数のテーマが `gatsby-theme-amazing/src/components/header.js` をシャドーイングしようとするとき、プラグインの配列の最後のテーマが選ばれます。サイトそれ自体は、シャドーイングにおいてもっとも高い優先権を持ちます。 -## Theme composition +## テーマの構成 -Gatsby themes can compose horizontally and vertically. Vertical composition refers to the classic "parent/child" relationship. A child theme declares a parent theme in the child theme's plugins array. +Gatsby のテーマは、水平的・垂直的に構成可能です。垂直的な構成とは、古典的な"parent/child"という形式の縦の関係を意味します。子テーマは、子テーマのプラグインの配列の中で親テーマを宣言します。 ```js:title=gatsby-theme-child/gatsby-config.js module.exports = { @@ -121,7 +121,7 @@ module.exports = { } ``` -Horizontal composition is when two different themes are used together, such as `gatsby-theme-blog` and `gatsby-theme-notes`. +水平的な構成とは、例えば `gatsby-theme-blog` と `gatsby-theme-notes` のような、 2 つの異なるテーマが同時に使われるようなときのことを言います。 ```js:title=my-site/gatsby-config.js module.exports = { @@ -129,11 +129,11 @@ module.exports = { } ``` -Themes at their core are an algorithm that merges multiple `gatsby-config.js` files together into a single config your site can use to build with. To do that you need to define how to combine two `gatsby-config.js`s together. Before you can do that, you need to flatten the parent/child relationships into a single array. This results in the final ordering when considering which shadowing file to use if multiple are available. +テーマとは、根本的には複数の `gatsby-config.js` ファイルを 1 つの設定ファイルにマージするアルゴリズムです。そしてマージされたファイルをもとに、サイトのビルドが行われます。これがただしく行われるように、 2 つの `gatsby-config.js` をどのように組み合わせるのか定義する必要があります。その前に、 "parent/chile" の階層関係を、1 次元の配列にしておきましょう。これによって、複数のシャドーイングされたファイルが利用可能なときに、どのファイルを優先的に参照するのかという順序を定義できます。 -The first example results in a final ordering of `['gatsby-theme-parent', 'gatsby-theme-child']` (parents always come before their children so that children can override functionality), while the second example results in `['gatsby-theme-blog', 'gatsby-theme-notes']`. +上で最初に示した例では、 `['gatsby-theme-parent', 'gatsby-theme-child']` の順番で参照されます（親テーマは常に、その子テーマより先に参照されます。そうすることで、子テーマが機能をオーバーライドできます）。 2 つ目に示した例では、 `['gatsby-theme-blog', 'gatsby-theme-notes']` の順になります。 -Once you have the final ordering of themes you merge them together using a reduce function. [This reduce function](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/merge-gatsby-config.js) specifies the way each key in `gatsby-config.js` will merge together. Unless otherwise specified below, the last value wins. +一度このテーマの順序を定義したら、 reduce 関数を使ってテーマをマージします。[reduce 関数](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/merge-gatsby-config.js)では、 `gatsby-config.js` におけるそれぞれのキーをマージする方法が定義されています。この関数が呼び出された後に他の値を指定しない限り、キーの値は順番的に最後に指定したものが入ります。 -- `siteMetadata` and `mapping` both merge deeply using lodash's `merge` function. This means a theme can set default values in `siteMetadata` and the site can override them using the standard `siteMetadata` object in `gatsby-config.js`. -- `plugins` are normalized to remove duplicates, then concatenated together. +- `siteMetadata` と `mapping` は lodash の `merge` 関数を使って深い階層までマージします。つまり、テーマはデフォルトの `siteMetadata` の値を定義可能であり、 `gatsby-config.js` における一般的な `siteMetadata` オブジェクトでオーバーライドできます。 +- `plugins` は、重複を取り除いて標準化されたあと、マージされます。 From 141c41b6e3abf37ab09b7658be31535cf09c0829 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Tue, 28 Jan 2020 19:13:29 +0900 Subject: [PATCH 02/25] docs: Apply review feedback --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index b6e8803e2..cc354d03a 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -35,7 +35,7 @@ module.exports = { `gatsby-config` では、テーマへ渡されるオプションにアクセスできます。オプションを使うことで、ファイルシステムのソース管理を設定できるようになったり、異なる nav manu を使えるようになったり、ブランドカラーをデフォルトから変更したり、とにかくしたいと思うものなら何でも設定を変えられるようにできます。 -あなたのテーマを使うユーザーが、テーマの設定を変更する際にオプションを渡せるようにするために、テーマの `gatsby-config.js` で関数を返すようにしてください。関数の引数は、ユーザーが指定するオプションです。 +あなたのテーマを使うユーザーが、テーマの設定を変更するためのオプションを渡せるように、テーマの `gatsby-config.js` で関数を返すようにしてください。関数の引数は、ユーザーが指定するオプションです。 ```js:title=gatsby-config.js module.exports = themeOptions => { From 88a1c207856afe00dbd58090c4531240cc7fb73e Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Tue, 28 Jan 2020 19:19:49 +0900 Subject: [PATCH 03/25] docs: Translate comments in code blocks --- docs/docs/theme-api.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index cc354d03a..1d097a66e 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -40,7 +40,7 @@ module.exports = { ```js:title=gatsby-config.js module.exports = themeOptions => { console.log(themeOptions) - // logs `postsPath` and `colors` + // `postsPath` と `colors` を標準出力します return { plugins: [ @@ -85,7 +85,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { ```js import Header from "gatsby-theme-amazing/src/components/header" -// these props are the same as the original component would get +// 以下の props は、もとのコンポーネントが受け取るものと同じです export default props =>
``` @@ -95,7 +95,7 @@ export default props =>
Gatsby がシャドーイング機能を全て自動でやってくれるようになるまでは、手動でテーマ内のパスを見つけて、サイト内に正しいシャドーイング用のパスを作成する必要があります。 -幸いにも、これはそこまで手間ではありません。テーマ内にある、シャドーイングしたいファイルが `{theme-name}/src/{any-sub-dir}/{file}` のようなパスになっているとしたら、自分のサイトの `src` 直下で `{theme-name}/{any-sub-dir}/{file}` の形式でファイルを作ればよいのです。 `Header` の例で言えば、これはテーマにおけるコンポーネントへのパスのことです： +幸いにも、これはそこまで手間ではありません。テーマ内にある、シャドーイングしたいファイルが `/src//` のようなパスになっているとしたら、自分のサイトの `src` 直下で `//` の形式でファイルを作ればよいのです。 `Header` の例で言えば、これはテーマにおけるコンポーネントへのパスのことです： ```text gatsby-theme-amazing/src/components/header.js From 8ef035ccb288263a914f1348c7e60917ac4b6adb Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Tue, 28 Jan 2020 19:43:22 +0900 Subject: [PATCH 04/25] docs: Modify to use more natural expression --- docs/docs/theme-api.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 1d097a66e..0d7e5388a 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -11,7 +11,7 @@ title: Themes API リファレンス - [Node Interface](https://www.gatsbyjs.org/docs/node-interface/) - ... [もっと知りたい方向け](https://www.gatsbyjs.org/docs/api-specification/) -Gatsby が初めての方は、サイトを構築するためのガイドから始めてみてください。テーマは事前にパッケージ化された Gatsby サイトなので、一度作ったサイトをテーマに変換することは後で容易にできます。 +Gatsby が初めての方は、サイトを構築するためのガイドから始めてみてください。テーマはもともと含まれている Gatsby のサイトなので、一度作ったサイトをテーマに変換することは後で容易にできます。 ## 設定 @@ -74,7 +74,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { ときには `Header` コンポーネントに何か違うことをさせたいこともあるでしょう。例えば、色を変えたり、さらにナビゲーションアイテムを追加したりといったことです。これを実現するために、ウェブサイトの次のパスにファイルを作ります： `src/gatsby-theme-amazing/components/header.js` 。これで、どんな React コンポーネントもこのファイルからエクスポートでき、 Gatsby はテーマのコンポーネントではなく、こちらのファイルを参照するようになります。 -> 💡 Note: 他のテーマから同じメソッドを使うことで、コンポーネントをシャドーイングすることもできます。シャドーイングの高度な適用例については、[latent shadowing](https://johno.com/latent-component-shadowing)で紹介しています。 +> 💡 Note: 他のテーマから同じメソッドを使うことで、コンポーネントをシャドーイングすることもできます。シャドーイングの高度な使い方については、[latent shadowing](https://johno.com/latent-component-shadowing)で紹介しています。 ### 拡張 From 21a2d8e2f9b1df915b2dde0ba5f24b0948d56a25 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Tue, 28 Jan 2020 20:50:43 +0900 Subject: [PATCH 05/25] docs: Apply review feedback on docs/theme-api.md Co-Authored-By: Yasuaki Uechi --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 0d7e5388a..9501c4b82 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -78,7 +78,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { ### 拡張 -前のセクションでは、コンポーネントを全く新しく置き換える方法についてお話ししました。では、テーマ全体をコピー&ペーストすることなしに、ちょっとした変更を加えたいときにはどうすれば良いでしょうか。そんな時は、コンポーネントの拡張という機能を使います。 +前のセクションでは、コンポーネントを全く新しく置き換える方法についてお話ししました。では、テーマ全体をコピー&ペーストすることなしに、ちょっとした変更を加えたいときにはどうすれば良いでしょうか。そんな時は、コンポーネントを拡張しましょう。 前に取り上げた `Header` コンポーネントの例を見てみましょう。シャドーイングしたファイルは、 `src/gatsby-theme-amazing/components/header.js` にあります。ここで、独自にオーバーライドした prop をコンポーネントに付与することで、元のコンポーネントをインポートして再度エクスポートするなどといったことができます。 From 895cf690cfe3d5d54882f808a487c52634df3f52 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Tue, 28 Jan 2020 20:50:54 +0900 Subject: [PATCH 06/25] docs: Apply review feedback on docs/theme-api.md Co-Authored-By: Yasuaki Uechi --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 9501c4b82..f027c3ca8 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -70,7 +70,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { ### オーバーライド -`Header` の例に着目してみましょう。例えば、 `gatsby-theme-amazing` というテーマを作ったとします。このテーマでは、ナビゲーションや他の諸々のアイテムを表示するために `Header` コンポーネントを利用します。 npm パッケージの root からコンポーネントまでのパスは、 `gatsby-theme-amazing/src/components/header.js` のようになります。 +`Header` の例に着目してみましょう。例えば、 `gatsby-theme-amazing` というテーマを作ったとします。このテーマでは、ナビゲーションや他の諸々のアイテムを表示するために `Header` コンポーネントを利用します。 npm パッケージのルートからコンポーネントまでのパスは、 `gatsby-theme-amazing/src/components/header.js` のようになります。 ときには `Header` コンポーネントに何か違うことをさせたいこともあるでしょう。例えば、色を変えたり、さらにナビゲーションアイテムを追加したりといったことです。これを実現するために、ウェブサイトの次のパスにファイルを作ります： `src/gatsby-theme-amazing/components/header.js` 。これで、どんな React コンポーネントもこのファイルからエクスポートでき、 Gatsby はテーマのコンポーネントではなく、こちらのファイルを参照するようになります。 From d191f8512a1cd254961d8ecef5f9a3ab687c5e60 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Tue, 28 Jan 2020 20:51:12 +0900 Subject: [PATCH 07/25] docs: Apply review feedback on docs/theme-api.md Co-Authored-By: Yasuaki Uechi --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index f027c3ca8..58bc2fc07 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -74,7 +74,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { ときには `Header` コンポーネントに何か違うことをさせたいこともあるでしょう。例えば、色を変えたり、さらにナビゲーションアイテムを追加したりといったことです。これを実現するために、ウェブサイトの次のパスにファイルを作ります： `src/gatsby-theme-amazing/components/header.js` 。これで、どんな React コンポーネントもこのファイルからエクスポートでき、 Gatsby はテーマのコンポーネントではなく、こちらのファイルを参照するようになります。 -> 💡 Note: 他のテーマから同じメソッドを使うことで、コンポーネントをシャドーイングすることもできます。シャドーイングの高度な使い方については、[latent shadowing](https://johno.com/latent-component-shadowing)で紹介しています。 +> 💡 ヒント: 他のテーマから同じメソッドを使うことで、コンポーネントをシャドーイングすることもできます。シャドーイングの高度な使い方については、[latent shadowing](https://johno.com/latent-component-shadowing)で紹介しています。 ### 拡張 From 204708f00507fd62017af11d0033ba73e48d6430 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:53:36 +0900 Subject: [PATCH 08/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 58bc2fc07..17b3692b5 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -15,7 +15,7 @@ Gatsby が初めての方は、サイトを構築するためのガイドから ## 設定 -プラグインは、他の `gatsby-*` の形式で命名されたファイルなどと一緒に `gatsby-config` を含むことができるようになりました。通常、 `gatsby-config.js` を含むプラグインのことをテーマと呼びます（もっと知りたい方は[theme composition](#theme-composition)`gatsby-config.js`をご覧ください）。典型的なユーザーサイトの `gatsby-config.js` の中身は次のようになります。 ここで、`gatsby-theme-name` には、 2 つのオプション `postsPath` と `colors` が渡されています。 +プラグインは、他の `gatsby-*` の形式で命名されたファイルなどと一緒に `gatsby-config` を含むことができるようになりました。通常、`gatsby-config.js` を含むプラグインのことをテーマと呼びます（もっと知りたい方は[theme composition](#theme-composition)`gatsby-config.js`をご覧ください）。典型的なユーザーサイトの `gatsby-config.js` の中身は次のようになります。 ここで、`gatsby-theme-name` には、2 つのオプション `postsPath` と `colors` が渡されています。 ```js:title=gatsby-config.js module.exports = { From a5364c34ec6d1f5ac0d7cae51000f8d90146bff8 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:53:52 +0900 Subject: [PATCH 09/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 17b3692b5..4af9e071c 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -64,7 +64,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { ## シャドーイング -テーマは通常、他の人も利用可能なパッケージとしてデプロイされるため、テーマそれ自体のコードに変更を加えることなく、（React コンポーネントのような）特定のファイルを編集する方法が必要になるでしょう。これを実現するのが、 _シャドーイング_ という方法です。 +テーマは通常、他の人も利用可能なパッケージとしてデプロイされるため、テーマそれ自体のコードに変更を加えることなく、（React コンポーネントのような）特定のファイルを編集する方法が必要になるでしょう。これを実現するのが、_シャドーイング_という方法です。 シャドーイングとは、 filesystem をベースとする API であり、これを使うことでビルド時に特定のファイルを置き換えることができます。例えば、 `Header` コンポーネントを含むようなテーマがあるとします。 `Header` をあなた独自のものに置き換えるには、新しいファイルを作り、これを適切な場所に配置し、シャドーイング機能がそれを関知できるようにします。 From 5b7e31f832d3eae6f6178a0429ba9b9dbd17800c Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:54:26 +0900 Subject: [PATCH 10/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 4af9e071c..1b0f7b7e2 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -66,7 +66,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { テーマは通常、他の人も利用可能なパッケージとしてデプロイされるため、テーマそれ自体のコードに変更を加えることなく、（React コンポーネントのような）特定のファイルを編集する方法が必要になるでしょう。これを実現するのが、_シャドーイング_という方法です。 -シャドーイングとは、 filesystem をベースとする API であり、これを使うことでビルド時に特定のファイルを置き換えることができます。例えば、 `Header` コンポーネントを含むようなテーマがあるとします。 `Header` をあなた独自のものに置き換えるには、新しいファイルを作り、これを適切な場所に配置し、シャドーイング機能がそれを関知できるようにします。 +シャドーイングとは、filesystem をベースとする API であり、これを使うことでビルド時に特定のファイルを置き換えることができます。例えば、`Header` コンポーネントを含むようなテーマがあるとします。 `Header` をあなた独自のものに置き換えるには、新しいファイルを作り、これを適切な場所に配置し、シャドーイング機能がそれを関知できるようにします。 ### オーバーライド From 03bc8293129bd8b7f8ddb0b98a181260c897f646 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:54:41 +0900 Subject: [PATCH 11/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 1b0f7b7e2..7dcc41254 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -121,7 +121,7 @@ module.exports = { } ``` -水平的な構成とは、例えば `gatsby-theme-blog` と `gatsby-theme-notes` のような、 2 つの異なるテーマが同時に使われるようなときのことを言います。 +水平的な構成とは、例えば `gatsby-theme-blog` と `gatsby-theme-notes` のような、2 つの異なるテーマが同時に使われるようなときのことを言います。 ```js:title=my-site/gatsby-config.js module.exports = { From 5423cf7459ed6653d7c9534f3ed1196d5e316198 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:54:56 +0900 Subject: [PATCH 12/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 7dcc41254..be9a3dcb5 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -131,7 +131,7 @@ module.exports = { テーマとは、根本的には複数の `gatsby-config.js` ファイルを 1 つの設定ファイルにマージするアルゴリズムです。そしてマージされたファイルをもとに、サイトのビルドが行われます。これがただしく行われるように、 2 つの `gatsby-config.js` をどのように組み合わせるのか定義する必要があります。その前に、 "parent/chile" の階層関係を、1 次元の配列にしておきましょう。これによって、複数のシャドーイングされたファイルが利用可能なときに、どのファイルを優先的に参照するのかという順序を定義できます。 -上で最初に示した例では、 `['gatsby-theme-parent', 'gatsby-theme-child']` の順番で参照されます（親テーマは常に、その子テーマより先に参照されます。そうすることで、子テーマが機能をオーバーライドできます）。 2 つ目に示した例では、 `['gatsby-theme-blog', 'gatsby-theme-notes']` の順になります。 +上で最初に示した例では、`['gatsby-theme-parent', 'gatsby-theme-child']` の順番で参照されます（親テーマは常に、その子テーマより先に参照されます。そうすることで、子テーマが機能をオーバーライドできます）。 2 つ目に示した例では、`['gatsby-theme-blog', 'gatsby-theme-notes']` の順になります。 一度このテーマの順序を定義したら、 reduce 関数を使ってテーマをマージします。[reduce 関数](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/merge-gatsby-config.js)では、 `gatsby-config.js` におけるそれぞれのキーをマージする方法が定義されています。この関数が呼び出された後に他の値を指定しない限り、キーの値は順番的に最後に指定したものが入ります。 From 217a6b32dc0e66fb85d2af5a858acd20d80f1ac4 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:55:21 +0900 Subject: [PATCH 13/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index be9a3dcb5..89aa5f339 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -135,5 +135,5 @@ module.exports = { 一度このテーマの順序を定義したら、 reduce 関数を使ってテーマをマージします。[reduce 関数](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/merge-gatsby-config.js)では、 `gatsby-config.js` におけるそれぞれのキーをマージする方法が定義されています。この関数が呼び出された後に他の値を指定しない限り、キーの値は順番的に最後に指定したものが入ります。 -- `siteMetadata` と `mapping` は lodash の `merge` 関数を使って深い階層までマージします。つまり、テーマはデフォルトの `siteMetadata` の値を定義可能であり、 `gatsby-config.js` における一般的な `siteMetadata` オブジェクトでオーバーライドできます。 +- `siteMetadata` と `mapping` は lodash の `merge` 関数を使って深い階層までマージします。つまり、テーマはデフォルトの `siteMetadata` の値を定義可能であり、`gatsby-config.js` における一般的な `siteMetadata` オブジェクトでオーバーライドできます。 - `plugins` は、重複を取り除いて標準化されたあと、マージされます。 From 9473a0ec290eb84e4ccbeba6e10bf7b033ccb1d9 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:55:37 +0900 Subject: [PATCH 14/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 89aa5f339..f6038b9a0 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -133,7 +133,7 @@ module.exports = { 上で最初に示した例では、`['gatsby-theme-parent', 'gatsby-theme-child']` の順番で参照されます（親テーマは常に、その子テーマより先に参照されます。そうすることで、子テーマが機能をオーバーライドできます）。 2 つ目に示した例では、`['gatsby-theme-blog', 'gatsby-theme-notes']` の順になります。 -一度このテーマの順序を定義したら、 reduce 関数を使ってテーマをマージします。[reduce 関数](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/merge-gatsby-config.js)では、 `gatsby-config.js` におけるそれぞれのキーをマージする方法が定義されています。この関数が呼び出された後に他の値を指定しない限り、キーの値は順番的に最後に指定したものが入ります。 +一度このテーマの順序を定義したら、reduce 関数を使ってテーマをマージします。[reduce 関数](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/merge-gatsby-config.js)では、`gatsby-config.js` におけるそれぞれのキーをマージする方法が定義されています。この関数が呼び出された後に他の値を指定しない限り、キーの値は順番的に最後に指定したものが入ります。 - `siteMetadata` と `mapping` は lodash の `merge` 関数を使って深い階層までマージします。つまり、テーマはデフォルトの `siteMetadata` の値を定義可能であり、`gatsby-config.js` における一般的な `siteMetadata` オブジェクトでオーバーライドできます。 - `plugins` は、重複を取り除いて標準化されたあと、マージされます。 From c280e0bc6163dadfb305c1f9e801fdd4a51b5f92 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:56:31 +0900 Subject: [PATCH 15/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index f6038b9a0..a91ba5902 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -129,7 +129,7 @@ module.exports = { } ``` -テーマとは、根本的には複数の `gatsby-config.js` ファイルを 1 つの設定ファイルにマージするアルゴリズムです。そしてマージされたファイルをもとに、サイトのビルドが行われます。これがただしく行われるように、 2 つの `gatsby-config.js` をどのように組み合わせるのか定義する必要があります。その前に、 "parent/chile" の階層関係を、1 次元の配列にしておきましょう。これによって、複数のシャドーイングされたファイルが利用可能なときに、どのファイルを優先的に参照するのかという順序を定義できます。 +テーマとは、根本的には複数の `gatsby-config.js` ファイルを 1 つの設定ファイルにマージするアルゴリズムです。そしてマージされたファイルをもとに、サイトのビルドが行われます。これがただしく行われるように、2 つの `gatsby-config.js` をどのように組み合わせるのか定義する必要があります。その前に、"parent/chile" の階層関係を、1 次元の配列にしておきましょう。これによって、複数のシャドーイングされたファイルが利用可能なときに、どのファイルを優先的に参照するのかという順序を定義できます。 上で最初に示した例では、`['gatsby-theme-parent', 'gatsby-theme-child']` の順番で参照されます（親テーマは常に、その子テーマより先に参照されます。そうすることで、子テーマが機能をオーバーライドできます）。 2 つ目に示した例では、`['gatsby-theme-blog', 'gatsby-theme-notes']` の順になります。 From 49b7e9d7185a20a2f87b3a8a69c0976e6814c3c9 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:56:52 +0900 Subject: [PATCH 16/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index a91ba5902..4a5be356a 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -70,7 +70,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { ### オーバーライド -`Header` の例に着目してみましょう。例えば、 `gatsby-theme-amazing` というテーマを作ったとします。このテーマでは、ナビゲーションや他の諸々のアイテムを表示するために `Header` コンポーネントを利用します。 npm パッケージのルートからコンポーネントまでのパスは、 `gatsby-theme-amazing/src/components/header.js` のようになります。 +`Header` の例に着目してみましょう。例えば、`gatsby-theme-amazing` というテーマを作ったとします。このテーマでは、ナビゲーションや他の諸々のアイテムを表示するために `Header` コンポーネントを利用します。 npm パッケージのルートからコンポーネントまでのパスは、`gatsby-theme-amazing/src/components/header.js` のようになります。 ときには `Header` コンポーネントに何か違うことをさせたいこともあるでしょう。例えば、色を変えたり、さらにナビゲーションアイテムを追加したりといったことです。これを実現するために、ウェブサイトの次のパスにファイルを作ります： `src/gatsby-theme-amazing/components/header.js` 。これで、どんな React コンポーネントもこのファイルからエクスポートでき、 Gatsby はテーマのコンポーネントではなく、こちらのファイルを参照するようになります。 From b8bf123286e232849869cfe8a31a3a6389ce0dba Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:57:06 +0900 Subject: [PATCH 17/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 4a5be356a..f42d3b983 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -54,7 +54,7 @@ module.exports = themeOptions => { ### 他の場所でオプションにアクセスする方法 -テーマはあくまでプラグインなので、これまで使ってきたライフサイクルに関する全てのメソッドのオプションを利用できます。例えば、テーマの `gatsby-node.js` で、 `createPages` の第 2 引数としてオプションを利用できます。 +テーマはあくまでプラグインなので、これまで使ってきたライフサイクルに関する全てのメソッドのオプションを利用できます。例えば、テーマの `gatsby-node.js` で、`createPages` の第 2 引数としてオプションを利用できます。 ```js:title=gatsby-node.js exports.createPages = async ({ graphql, actions }, themeOptions) => { From c108f095c6547760d88afbf6f8780a33f577a342 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:57:29 +0900 Subject: [PATCH 18/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index f42d3b983..136d01a73 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -72,7 +72,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { `Header` の例に着目してみましょう。例えば、`gatsby-theme-amazing` というテーマを作ったとします。このテーマでは、ナビゲーションや他の諸々のアイテムを表示するために `Header` コンポーネントを利用します。 npm パッケージのルートからコンポーネントまでのパスは、`gatsby-theme-amazing/src/components/header.js` のようになります。 -ときには `Header` コンポーネントに何か違うことをさせたいこともあるでしょう。例えば、色を変えたり、さらにナビゲーションアイテムを追加したりといったことです。これを実現するために、ウェブサイトの次のパスにファイルを作ります： `src/gatsby-theme-amazing/components/header.js` 。これで、どんな React コンポーネントもこのファイルからエクスポートでき、 Gatsby はテーマのコンポーネントではなく、こちらのファイルを参照するようになります。 +ときには `Header` コンポーネントに何か違うことをさせたいこともあるでしょう。例えば、色を変えたり、さらにナビゲーションアイテムを追加したりといったことです。これを実現するために、ウェブサイトの次のパスにファイルを作ります： `src/gatsby-theme-amazing/components/header.js` 。これで、どんな React コンポーネントもこのファイルからエクスポートでき、Gatsby はテーマのコンポーネントではなく、こちらのファイルを参照するようになります。 > 💡 ヒント: 他のテーマから同じメソッドを使うことで、コンポーネントをシャドーイングすることもできます。シャドーイングの高度な使い方については、[latent shadowing](https://johno.com/latent-component-shadowing)で紹介しています。 From a5f7d49433c41b76fd9966407aa23a554e321bae Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:57:56 +0900 Subject: [PATCH 19/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 136d01a73..8316b8111 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -80,7 +80,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { 前のセクションでは、コンポーネントを全く新しく置き換える方法についてお話ししました。では、テーマ全体をコピー&ペーストすることなしに、ちょっとした変更を加えたいときにはどうすれば良いでしょうか。そんな時は、コンポーネントを拡張しましょう。 -前に取り上げた `Header` コンポーネントの例を見てみましょう。シャドーイングしたファイルは、 `src/gatsby-theme-amazing/components/header.js` にあります。ここで、独自にオーバーライドした prop をコンポーネントに付与することで、元のコンポーネントをインポートして再度エクスポートするなどといったことができます。 +前に取り上げた `Header` コンポーネントの例を見てみましょう。シャドーイングしたファイルは、`src/gatsby-theme-amazing/components/header.js` にあります。ここで、独自にオーバーライドした prop をコンポーネントに付与することで、元のコンポーネントをインポートして再度エクスポートするなどといったことができます。 ```js import Header from "gatsby-theme-amazing/src/components/header" From 4b9f42cd6ed9ef680e45c372beda75248dca47ed Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 00:58:14 +0900 Subject: [PATCH 20/25] docs: Remove half-width space Co-Authored-By: BSKY --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 8316b8111..4baf1b8ce 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -89,7 +89,7 @@ import Header from "gatsby-theme-amazing/src/components/header" export default props =>
``` -このアプローチをとるということはつまり、テーマをアップグレードしたくなったときに、 `Header` コンポーネントに適用された全てのアップデートを活用できるということを意味します。なぜなら、 `Header` コンポーネントを全て置き換えたわけでなく、インポートしたものを修正しただけだからです。 +このアプローチをとるということはつまり、テーマをアップグレードしたくなったときに、`Header` コンポーネントに適用された全てのアップデートを活用できるということを意味します。なぜなら、`Header` コンポーネントを全て置き換えたわけでなく、インポートしたものを修正しただけだからです。 ### ファイルをシャドーイングする際に使うべきパスは？ From 674c9546fdef827a39fe687a72a4ba74e4616b01 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Wed, 29 Jan 2020 21:52:09 +0900 Subject: [PATCH 21/25] docs: Fix incorrect translation --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 4baf1b8ce..4f131f624 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -136,4 +136,4 @@ module.exports = { 一度このテーマの順序を定義したら、reduce 関数を使ってテーマをマージします。[reduce 関数](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/merge-gatsby-config.js)では、`gatsby-config.js` におけるそれぞれのキーをマージする方法が定義されています。この関数が呼び出された後に他の値を指定しない限り、キーの値は順番的に最後に指定したものが入ります。 - `siteMetadata` と `mapping` は lodash の `merge` 関数を使って深い階層までマージします。つまり、テーマはデフォルトの `siteMetadata` の値を定義可能であり、`gatsby-config.js` における一般的な `siteMetadata` オブジェクトでオーバーライドできます。 -- `plugins` は、重複を取り除いて標準化されたあと、マージされます。 +- `plugins` は、重複を取り除いて正規化されたあと、マージされます。 From 6fb27bb378d421f4ba3d53413987d6f7d38c888d Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Fri, 31 Jan 2020 17:58:04 +0900 Subject: [PATCH 22/25] Update docs/docs/theme-api.md Co-Authored-By: Jesse Katsumata --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 4f131f624..4e704b403 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -101,7 +101,7 @@ Gatsby がシャドーイング機能を全て自動でやってくれるよう gatsby-theme-amazing/src/components/header.js ``` -そして、下記のパスがサイト内でシャドーイングする場所です： +そして、下記のパスがサイト内でシャドーイングする場所です。 ```text /src/gatsby-theme-amazing/components/header.js From fec7cb39cfbbb041fb70d85cba618931f491e0d5 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Fri, 31 Jan 2020 17:58:21 +0900 Subject: [PATCH 23/25] Update docs/docs/theme-api.md Co-Authored-By: Jesse Katsumata --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 4e704b403..09c8e6300 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -95,7 +95,7 @@ export default props =>
Gatsby がシャドーイング機能を全て自動でやってくれるようになるまでは、手動でテーマ内のパスを見つけて、サイト内に正しいシャドーイング用のパスを作成する必要があります。 -幸いにも、これはそこまで手間ではありません。テーマ内にある、シャドーイングしたいファイルが `/src//` のようなパスになっているとしたら、自分のサイトの `src` 直下で `//` の形式でファイルを作ればよいのです。 `Header` の例で言えば、これはテーマにおけるコンポーネントへのパスのことです： +幸いにも、これはそこまで手間ではありません。テーマ内にある、シャドーイングしたいファイルが `/src//` のようなパスになっているとしたら、自分のサイトの `src` 直下で `//` の形式でファイルを作ればよいのです。 `Header` の例で言えば、これはテーマにおけるコンポーネントへのパスのことです。 ```text gatsby-theme-amazing/src/components/header.js From f750b49473961729e06538f53762b0be38b15696 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Fri, 31 Jan 2020 17:58:40 +0900 Subject: [PATCH 24/25] Update docs/docs/theme-api.md Co-Authored-By: Jesse Katsumata --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 09c8e6300..65a42e2ca 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -15,7 +15,7 @@ Gatsby が初めての方は、サイトを構築するためのガイドから ## 設定 -プラグインは、他の `gatsby-*` の形式で命名されたファイルなどと一緒に `gatsby-config` を含むことができるようになりました。通常、`gatsby-config.js` を含むプラグインのことをテーマと呼びます（もっと知りたい方は[theme composition](#theme-composition)`gatsby-config.js`をご覧ください）。典型的なユーザーサイトの `gatsby-config.js` の中身は次のようになります。 ここで、`gatsby-theme-name` には、2 つのオプション `postsPath` と `colors` が渡されています。 +プラグインは、他の `gatsby-*` の形式で命名されたファイルなどと一緒に `gatsby-config` を含むことができるようになりました。通常、`gatsby-config.js` を含むプラグインのことをテーマと呼びます（もっと知りたい方は[theme composition](#theme-composition)`gatsby-config.js`をご覧ください）。典型的なユーザーサイトの `gatsby-config.js` の中身は次のようになります。ここで、`gatsby-theme-name` には、2 つのオプション `postsPath` と `colors` が渡されています。 ```js:title=gatsby-config.js module.exports = { From c08b68a49cb2e56cc868b37866e376ec460a57e8 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Fri, 31 Jan 2020 17:58:49 +0900 Subject: [PATCH 25/25] Update docs/docs/theme-api.md Co-Authored-By: Jesse Katsumata --- docs/docs/theme-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/theme-api.md b/docs/docs/theme-api.md index 65a42e2ca..a76a8534c 100644 --- a/docs/docs/theme-api.md +++ b/docs/docs/theme-api.md @@ -74,7 +74,7 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => { ときには `Header` コンポーネントに何か違うことをさせたいこともあるでしょう。例えば、色を変えたり、さらにナビゲーションアイテムを追加したりといったことです。これを実現するために、ウェブサイトの次のパスにファイルを作ります： `src/gatsby-theme-amazing/components/header.js` 。これで、どんな React コンポーネントもこのファイルからエクスポートでき、Gatsby はテーマのコンポーネントではなく、こちらのファイルを参照するようになります。 -> 💡 ヒント: 他のテーマから同じメソッドを使うことで、コンポーネントをシャドーイングすることもできます。シャドーイングの高度な使い方については、[latent shadowing](https://johno.com/latent-component-shadowing)で紹介しています。 +> 💡 ヒント: 他のテーマから同じメソッドを使うことで、コンポーネントをシャドーイングすることもできます。シャドーイングの高度な使い方については、[latent shadowing](https://johno.com/latent-component-shadowing) で紹介しています。 ### 拡張