From b027ebf8674cc1565e2c89073643a402aadd6d8e Mon Sep 17 00:00:00 2001 From: Hirotaka Mizutani Date: Fri, 17 Jan 2020 11:54:05 +0900 Subject: [PATCH 1/3] docs: translate tutorial/part-three/index --- docs/tutorial/part-three/index.md | 108 +++++++++++++++--------------- 1 file changed, 53 insertions(+), 55 deletions(-) diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 0c5cadf3c..9abb74867 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -1,57 +1,57 @@ --- -title: Creating Nested Layout Components +title: ネストしたレイアウトコンポーネントの作成 typora-copy-images-to: ./ disableTableOfContents: true --- -Welcome to part three! +パート 3 へようこそ！ -## What's in this tutorial? +## このチュートリアルの内容は？ -In this part, you'll learn about Gatsby plugins and creating "layout" components. +このパートでは、Gatsby プラグインと「レイアウト」コンポーネントの作成について学びます。 -Gatsby plugins are JavaScript packages that help add functionality to a Gatsby site. Gatsby is designed to be extensible, which means plugins are able to extend and modify just about everything Gatsby does. +Gatsby プラグインは、Gatsby サイトに機能を追加するのに役立つ JavaScript パッケージです。Gatsby は拡張可能に設計されています。つまり、プラグインは Gatsby が行うほぼすべてを拡張および変更できます。 -Layout components are for sections of your site that you want to share across multiple pages. For example, sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. On this page for example, the header at the top is part of gatsbyjs.org's layout component. +レイアウトコンポーネントは、複数のページで共有するサイトためのセクションです。たとえば、サイトには通常、共有ヘッダーとフッターを持つレイアウトコンポーネントがあります。その他に、レイアウトに追加する一般的なものとして、サイドバーやナビゲーションメニューがあります。例として、このページの上部のヘッダーは、gatsbyjs.org のレイアウトコンポーネントの一部です。 -Let's dive into part three. +それでは、パート 3 を詳しくみていきましょう。 -## Using plugins +## プラグインの使用 -You’re probably familiar with the idea of plugins. Many software systems support adding custom plugins to add new functionality or even modify the core workings of the software. Gatsby plugins work the same way. +おそらく、あなたはプラグインの概念には馴染みがあることでしょう。多くのソフトウェアシステムでは、カスタムプラグインを追加して、新しい機能を追加したり、ソフトウェアのコア機能を変更したりできます。Gatsby プラグインも同じように機能します。 -Community members (like you!) can contribute plugins (small amounts of JavaScript code) that others can then use when building Gatsby sites. +コミュニティメンバー(あなたのような！)は、他の人が Gatsby サイトを構築するためのプラグイン（少量の JavaScript コード）を提供できます。 -> There are already hundreds of plugins! Explore the Gatsby [Plugin Library](/plugins/). +> すでに何百ものプラグインがあります！Gatsby [プラグインライブラリ](/plugins/)をご覧ください。 -Our goal with plugins is to make them straightforward to install and use. You will likely be using plugins in almost every Gatsby site you build. While working through the rest of the tutorial you’ll have many opportunities to practice installing and using plugins. +プラグインの目標は、簡単にインストールして使用できるようにすることです。おそらく、構築するほとんどすべての Gatsby サイトでプラグインを使用することになります。このチュートリアルの残りの部分の作業を通じて、プラグインをインストールして使うための練習をたくさんできます。 -For an initial introduction to using plugins, we'll install and implement the Gatsby plugin for Typography.js. +プラグインを使う最初の紹介として、Typography.js の Gatsby プラグインをインストールして実装します。 -[Typography.js](https://kyleamathews.github.io/typography.js/) is a JavaScript library which generates global base styles for your site's typography. The library has a [corresponding Gatsby plugin](/packages/gatsby-plugin-typography/) to streamline using it in a Gatsby site. +[Typography.js](https://kyleamathews.github.io/typography.js/) は、サイトのタイポグラフィ向けに全体の基本となるスタイルを生成する JavaScript ライブラリーです。ライブラリーには、Gatsby サイトで効率よく使用できるように[対応する Gatsby プラグイン](/packages/gatsby-plugin-typography/)があります。 -### ✋ Create a new Gatsby site +### ✋ 新しい Gatsby サイトの作成 -As we mentioned in [part two](/tutorial/part-two/), at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory: +[パート 2](/tutorial/part-two/) で述べたように、この時点で、前のチュートリアルで使用したターミナルウィンドウとプロジェクトファイルを閉じて、デスクトップをクリアに保つことをお勧めします。次に、新しいターミナルウィンドウを開き、次のコマンドを実行して、`tutorial-part-three` というディレクトリーに新しい Gatsby サイトを作成し、この新しいディレクトリーに移動します。 ```shell gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world cd tutorial-part-three ``` -### ✋ Install and configure `gatsby-plugin-typography` +### ✋ `gatsby-plugin-typography` をインストールして設定する -There are two main steps to using a plugin: Installing and configuring. +プラグインを使用するには、インストールして、設定するという 2 つの主な手順があります。 -1. Install the `gatsby-plugin-typography` NPM package. +1. `gatsby-plugin-typography` NPM パッケージをインストールします。 ```shell npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates ``` -> Note: Typography.js requires a few additional packages, so those are included in the instructions. Additional requirements like this will be listed in the "install" instructions of each plugin. +> ヒント: Typography.js にはいくつかの追加パッケージが必要なため、それらの手順も含まれます。このような追加の必要なものは、それぞれのプラグインの「インストール」手順に記載されています。 -2. Edit the file `gatsby-config.js` at the root of your project to the following: +2. プロジェクトのルートにあるファイル `gatsby-config.js` を次のように編集します。 ```javascript:title=gatsby-config.js module.exports = { @@ -66,11 +66,11 @@ module.exports = { } ``` -The `gatsby-config.js` is another special file that Gatsby will automatically recognize. This is where you add plugins and other site configuration. +`gatsby-config.js` は、Gatsby が自動的に認識するもう 1 つの特別なファイルです。これのファイルには、プラグインや他のサイト設定を追加します。 -> Check out the [doc on gatsby-config.js](/docs/gatsby-config/) to read more, if you wish. +> [gatsby-config.js のドキュメント](/docs/gatsby-config/)を参照して、詳細は必要に応じてお読みください。 -3. Typography.js needs a configuration file. Create a new directory called `utils` in the `src` directory. Then add a new file called `typography.js` to `utils` and copy the following into the file: +3. Typography.js には設定ファイルが必要です。`src` ディレクトリーに `utils` という新しいディレクトリーを作成します。次に、`typography.js` という新しいファイルを `utils` に追加し、次の内容をファイルにコピーします。 ```javascript:title=src/utils/typography.js import Typography from "typography" @@ -82,20 +82,19 @@ export const { scale, rhythm, options } = typography export default typography ``` -4. Start the development server. +4. 開発サーバーを起動します。 ```shell gatsby develop ``` -Once you load the site, if you inspect the generated HTML using the Chrome developer tools, you’ll see that the typography plugin added a `