Pular para o conteúdo
Astro Astro

Adicione conteúdo dinâmico sobre você

Agora que você tem um website de múltiplas páginas com conteúdo HTML, é hora de adicionar um pouco de HTML dinâmico!

Se prepare para...

  • Definir o título da sua página no frontmatter, e usá-lo em seu HTML
  • Mostrar elementos HTML condicionalmente
  • Adicionar conteúdo sobre você

Qualquer arquivo HTML é válido na linguagem Astro. Porém, você pode fazer mais com Astro do que com apenas HTML regular!

Defina e utilize uma variável

Abra sobre.astro, que deve se parecer com isso:

src/pages/sobre.astro
---


---
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Início</a>
    <a href="/sobre/">Sobre</a>
    <a href="/blog/">Blog</a>
    <h1>Sobre Mim</h1>
    <h2>... e meu novo site Astro!</h2>


    <p>Estou resolvendo o tutorial introdutório do Astro. Esta é a segunda página no meu website, e é a primeira que eu mesmo construí!</p>


    <p>Este site será atualizado enquanto eu completo mais desse tutorial, então continue verificando e veja como minha jornada está indo!</p>
  </body>
</html>

  1. Adicione a seguinte linha de JavaScript no script frontmatter, entre as cercas de código:

    src/pages/sobre.astro
    ---
    const tituloPagina = "Sobre Mim";
    ---

  2. Substitua ambos o título estático “Astro” e o cabeçalho “Sobre Mim” no seu HTML com a variável dinâmica {tituloPagina}.

    src/pages/sobre.astro
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{tituloPagina}</title>
      </head>
      <body>
        <a href="/">Início</a>
        <a href="/sobre/">Sobre</a>
        <a href="/blog/">Blog</a>
        <h1>Sobre Mim</h1>
        <h1>{tituloPagina}</h1>
        <h2>... e meu novo site Astro!</h2>
    

        <p>Estou resolvendo o tutorial introdutório do Astro. Esta é a segunda página no meu website, e é a primeira que eu mesmo construí!</p>
    

        <p>Este site será atualizado enquanto eu completo mais desse tutorial, então continue verificando e veja como minha jornada está indo!</p>
      </body>
    </html>

  3. Recarregue a pré-visualização da sua página /sobre.

    O texto da sua página deve parecer o mesmo, e o título da sua página mostrado na aba do seu navegador deve agora ter “Sobre Mim” ao invés de “Astro”.

    Ao invés de copiar o texto diretamente em tags HTML, você apenas definiu e então utilizou uma variável em duas seções do seu arquivo .astro, respectivamente.

  4. Utilize o mesmo padrão para criar um valor de tituloPagina para utilizar em index.astro (“Página Inicial”) e blog.astro (“Meu Blog de Aprendizado sobre Astro”). Atualize o HTML dessas páginas em ambos os lugares para que o título da sua página corresponda com o cabeçalho mostrado em cada página.

Escreva expressões do JavaScript no Astro

  1. Adicione o seguinte JavaScript ao seu frontmatter, entre as cercas de código:

    (Você pode customizar o código por si mesmo, mas este tutorial irá utilizar o seguinte exemplo.)

    src/pages/sobre.astro
    ---
    const tituloPagina = "Sobre Mim";
    

    const identidade = {
      nome: "Sarah",
      pais: "Canadá",
      ocupacao: "Escritora Técnica",
      hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };
    

    const habilidades = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];
    ---

  2. Então, adicione o seguinte código ao seu template HTML, abaixo do seu conteúdo existente:

    src/pages/sobre.astro
    <p>Aqui estão alguns fatos sobre mim:</p>
    <ul>
      <li>Meu nome é {identidade.nome}.</li>
      <li>Eu moro no {identidade.pais} e eu trabalho como uma {identidade.ocupacao}.</li>
      {identidade.hobbies.length >= 2 &&
        <li>Dois dos meus hobbies são: {identidade.hobbies[0]} and {identidade.hobbies[1]}</li>
      }
    </ul>
    <p>Minhas habilidades são:</p>
    <ul>
      {habilidades.map((habilidade) => <li>{habilidade}</li>)}
    </ul>

Teste seu conhecimento

  1. O frontmatter de um arquivo .astro é escrito em:

  2. Em adição ao HTML, a sintaxe do Astro te permite incluir:

  3. Quando você precisa escrever seu JavaScript dentro de chaves?

Renderize elementos condicionalmente

Você também pode utilizar suas variáveis do script para escolher entre renderizar ou não elementos individuais do conteúdo do <body> do seu HTML.

  1. Adicione as seguintes linhas ao seu script frontmatter para definir variáveis:

    src/pages/sobre.astro
    ---
    const tituloPagina = "Sobre Mim";
    

    const identidade = {
      nome: "Sarah",
      pais: "Canadá",
      ocupacao: "Escritora Técnica",
      hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };
    

    const habilidades = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];
    

    const feliz = true;
    const terminado = false;
    const meta = 3;
    ---

  2. Adicione as seguintes linhas abaixo do seus parágrafos existentes.

    Então, verifique a pré-visualização ao vivo na aba do seu navegador para ver o que é mostrado na página:

    src/pages/sobre.astro
    {feliz && <p>Estou feliz em estar aprendendo Astro!</p>}
    

    {terminado && <p>Eu terminei esse tutorial!</p>}
    

    {meta === 3 ? <p>Minha meta é terminar em 3 dias.</p> : <p>Minha meta não é em 3 dias.</p>}

  3. Faça commit das suas mudanças para o GitHub antes de seguir em frente. Faça isso sempre que quiser salvar o seu trabalho e atualizar seu website ao vivo.

Analise o Padrão

Dado o seguinte script .astro:

src/pages/sobre.astro
---
const sistemaOperacional = "Linux";
const quantidade = 3;
const calcado = "botas";
const estudante = false;
---

Para cada expressão do template Astro, você consegue prever o HTML (ou nenhum!) que será enviado ao navegador? Clique para revelar se você está certo!

  1. <p>{sistemaOperacional}</p>

  2. {estudante && <p>Ainda estou na escola.</p>}

  3. <p>Eu tenho {quantidade + 8} pares de {calcado}</p>

  4. {sistemaOperacional === "MacOS" ? <p>Estou utilizando um Mac.</p> : <p>Não estou utilizando um Mac.</p>}

Checklist

Recursos