Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.

Commit

Permalink
Merge pull request #27 from gutofoletto/traducao-tutorial-part-three
Browse files Browse the repository at this point in the history 
translate:  tutorial/part-three/index.md
  • Loading branch information
@jessescn
jessescn authored Nov 29, 2019
2 parents 2a615d3 + 2465113 commit b8ee096
Showing 1 changed file with 53 additions and 54 deletions.
107 changes: 53 additions & 54 deletions docs/tutorial/part-three/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,54 @@ typora-copy-images-to: ./
disableTableOfContents: true
---

Welcome to part three!
Boas-vindas a parte três!

## What's in this tutorial?
## O que veremos nesse tutorial?

In this part, you'll learn about Gatsby plugins and creating "layout" components.
Nessa parte, você irá aprender sobre plugins do Gatsby e como criar componentes de layout.

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.
Plugins do Gatsby são pacotes JavaScript que ajudam a adicionar funcionalidades a um site Gatsby. O Gatsby foi projetado para ser extensível, o que significa que os plugins podem estender e modificar praticamente qualquer coisa que o Gatsby faz.

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.
Componentes de layout são para seções do seu site que você quer compartilhar entre diversas páginas. Por exemplo, normalmente sites tem componentes de layout para um cabeçalho e rodapé que são compartilhados. Outras coisas comuns de se adicionar em um layout são _sidebars_ e/ou menu de navegação. Nesta página, por exemplo, o cabeçalho no topo é parte de um componente de layout do gatsbyjs.org.

Let's dive into part three.
Vamos nos aprofundar na parte três.

## Using plugins
## Usando 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.
Você provavelmente tem familiaridade com o conceito de plugins. Diversos sistemas de software suportam adição de plugins customizados para acrescentar novas funcionalidades ou, até mesmo, modificar o funcionamento interno do software. Os plugins do Gatsby funcionam da mesma maneira.

Community members (like you!) can contribute plugins (small amounts of JavaScript code) that others can then use when building Gatsby sites.
Membros da comunidade (como você!) podem contribuir com plugins (pequenas quantidades de código JavaScript) que outros podem utilizar quando estiverem construindo sites com Gatsby.

> There are already hundreds of plugins! Explore the Gatsby [Plugin Library](/plugins/).
> Existem centenas de plugins! Explore a [Biblioteca de Plugins](/plugins) do Gatsby.
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.
Nosso objetivo com plugins é que eles sejam simples de instalar e utilizar. Provavelmente você irá utilizar plugins em quase todos os sites Gatsby que você for construir. Enquanto você estiver percorrendo o restante do tutorial você terá muitas oportunidades para praticar a instalação e utilização de plugins.

For an initial introduction to using plugins, we'll install and implement the Gatsby plugin for Typography.js.
Para uma introdução inicial em como utilizar plugins, vamos instalar e implementar o plugin Gatsby para Typography.js

[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/) é uma biblioteca JavaScript que gera estilos base de tipografia para o seu site. A biblioteca tem um [plugin Gatsby correspondente](/packages/gatsby-plugin-typography/) para simplificar o seu uso em um site Gatsby.

### ✋ Create a new Gatsby site
### ✋ Criar um novo 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:
Como mencionamos na [parte dois](/tutorial/part-two/), a partir desse ponto é, provavelmente, uma boa ideia fechar as janelas do terminal e os arquivos das partes anteriores do tutorial, de modo que as coisas mantenham-se organizadas na sua área de trabalho. Em seguida, abra uma nova janela do terminal e execute os seguintes comandos para criar um novo site Gatsby em um novo diretório chamado `tutorial-part-three` e entrar nesse diretório.

```shell
gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-three
```

### ✋ Install and configure `gatsby-plugin-typography`
### ✋ Instalar e configurar o `gatsby-plugin-typography`

There are two main steps to using a plugin: Installing and configuring.
Há dois passos principais para utilização de um plugin: Instalação e configuração.

1. Install the `gatsby-plugin-typography` NPM package.
1. Instale o pacote do NPM `gatsby-plugin-typography`.

```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.
> Nota: Typography.js precisa de alguns pacotes adicionais, então esses pacotes foram incluídos nas instruções. Requisitos adicionais como esse serão listados nas instruções de "instalação" de cada plugin.
2. Edit the file `gatsby-config.js` at the root of your project to the following:
2. Modifique o arquivo `gatsby-config.js` na raíz do seu projeto para o seguinte:

```javascript:title=gatsby-config.js
module.exports = {
Expand All @@ -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.
O `gatsby-config.js` é outro arquivo especial que o Gatsby irá reconhecer automaticamente. É nesse arquivo que você adiciona plugins e outras configurações do site.

> Check out the [doc on gatsby-config.js](/docs/gatsby-config/) to read more, if you wish.
> Se deseja saber mais, confira a [documentação sobre 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 precisa de um arquivo de configuração. Crie uma nova pasta chamada `utils` dentro da pasta `src`. Em seguida, adicione um novo arquivo chamado `typography.js` na pasta `utils` e copie o seguinte conteúdo para dentro do arquivo:

```javascript:title=src/utils/typography.js
import Typography from "typography"
Expand All @@ -82,20 +82,19 @@ export const { scale, rhythm, options } = typography
export default typography
```

4. Start the development server.
4. Inicie o servidor de desenvolvimento.

```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 `<style>` element to the `<head>` element with its generated CSS:
Assim que você carregar o site, se você inspecionar o HTML gerado utilizando as ferramentas de desenvolvedor do Chrome, você verá que o plugin de tipografia adicionou um elemento `<style>` no elemento`<head>` com o CSS que foi gerado:

![typography-styles](typography-styles.png)

### ✋ Make some content and style changes
### ✋ Faça mudanças de conteúdo e estilo

Copy the following into your `src/pages/index.js` so you can see the
effect of the CSS generated by Typography.js better.
Copie o código a seguir para o seu `src/pages/index.js` de forma que você visualize melhor os efeitos do CSS gerado pelo Typography.js

```jsx:title=src/pages/index.js
import React from "react"
Expand All @@ -111,12 +110,12 @@ export default () => (
)
```
Your site should now look like this:
Agora seu site deve se parecer com isso:
![no-layout](no-layout.png)
Let's make a quick improvement. Many sites have a single column of text centered in the middle of the page. To create this, add the following styles to the
`<div>` in `src/pages/index.js`.
Vamos fazer uma pequena melhoria. Muitos sites tem uma coluna única de texto centralizadas no centro da página. Para criar isso adicione os seguintes estilos na
`<div>` em `src/pages/index.js`.
```jsx:title=src/pages/index.js
import React from "react"
Expand All @@ -135,11 +134,11 @@ export default () => (
![with-layout2](with-layout2.png)
Sweet. You've installed and configured your very first Gatsby plugin!
Maravilha. Você instalou e configurou seu primeiríssimo plugin do Gatsby!
## Creating layout components
## Criando componentes de layout
Now let's move on to learning about layout components. To get ready for this part, add a couple new pages to your project: an about page and a contact page.
Agora vamos aprender sobre componentes de layout. Para se preparar para essa parte, adicione algumas novas páginas no seu projeto: uma página _sobre_ e uma página de _contato_
```jsx:title=src/pages/about.js
import React from "react"
Expand All @@ -165,19 +164,19 @@ export default () => (
)
```
Let's see what the new about page looks like:
Vamos ver como a nova página _sobre_ ficou:
![about-uncentered](about-uncentered.png)
Hmm. It would be nice if the content of the two new pages were centered like the index page. And it would be nice to have some sort of global navigation so it's easy for visitors to find and visit each of the sub-pages.
Hmm. Seria legal se o conteúdo das duas páginas fossem centralizados como na página inicial. E também serial legal se tivéssemos alguma navegação global, facilitando que os novos visitantes encontrem e visitem as outras páginas.
You'll tackle these changes by creating your first layout component.
Você irá realizar essas mudanças criando seu primeiro componente de layout
### ✋ Create your first layout component
### ✋ Crie seu primeiro componente de layout
1. Create a new directory at `src/components`.
1. Crie um novo diretório em `src/components`.
2. Create a very basic layout component at `src/components/layout.js`:
2. Crie um componente, bem básico, de layout em `src/components/layout.js`:
```jsx:title=src/components/layout.js
import React from "react"
Expand All @@ -189,7 +188,7 @@ export default ({ children }) => (
)
```
3. Import this new layout component into your `src/pages/index.js` page component:
3. Importe esse componente de layout novo no seu componente de página `src/pages/index.js`:
```jsx:title=src/pages/index.js
import React from "react"
Expand All @@ -208,17 +207,17 @@ export default () => (
![with-layout2](with-layout2.png)
Sweet, the layout is working! The content of your index page is still centered.
Que ótimo, o layout está funcionando! O conteúdo da sua página inicial ainda está centralizado.
But try navigating to `/about/`, or `/contact/`. The content on those pages still won't be centered.
Mas tente navegar para `/about/`, ou `/contact`. O conteúdo nessas páginas não estão centralizados ainda.
4. Import the layout component in `about.js` and `contact.js` (as you did for `index.js` in the previous step).
4. Importe o componente de layout no `about.js` e `contact.js` (como você fez no `index.js` no passo anterior).
The content of all three of your pages is centered thanks to this single shared layout component!
O conteúdo de todas as suas três páginas está centralizado graças a esse único componente de layout compartilhado!
### ✋ Add a site title
### ✋ Adicione um título ao site
1. Add the following line to your new layout component:
1. Adicione a seguinte linha a um dos seus novos componentes de layout:
```jsx:title=src/components/layout.js
import React from "react"
Expand All @@ -231,13 +230,13 @@ export default ({ children }) => (
)
```
If you go to any of your three pages, you'll see the same title added, e.g. the `/about/` page:
Se você for a qualquer uma das suas três páginas, você verá o mesmo título adicionado, como, por exemplo, na página `/about/`:
![with-title](with-title.png)
### ✋ Add navigation links between pages
### ✋ Adicione links de navegação entre páginas
1. Copy the following into your layout component file:
1. Copie o seguinte no arquivo do seu componente de layout:
```jsx:title=src/components/layout.js
import React from "react"
Expand Down Expand Up @@ -272,10 +271,10 @@ export default ({ children }) => (
![with-navigation2](with-navigation2.png)
And there you have it! A three page site with basic global navigation.
E aí está! Um site com três páginas e navegação global básica.
_Challenge:_ With your new "layout component" powers, trying adding headers, footers, global navigation, sidebars, etc. to your Gatsby sites!
_Desafio:_ Com os poderes do seu novo "componente de layout", tente adicionar cabeçalho, rodapé, navegação global, sidebar, etc. nos seus sites Gatsby.
## What's coming next?
## O que vem a seguir?
Continue on to [part four of the tutorial](/tutorial/part-four/) where you'll start learning about Gatsby's data layer and programmatically creating pages!
Siga para a [parte quatro do tutorial](/tutorial/part-four/) onde você irá começar a aprender sobre a camada de dados do Gatsby e como criar páginas programaticamente.

0 comments on commit b8ee096

Please sign in to comment.