Pular para o conteúdo

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!

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

src/pages/about.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="/about/">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/about.astro
    ---
    const pageTitle = "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 {pageTitle}.

    src/pages/about.astro
    <html lang="pt-BR">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
    <title>{pageTitle}</title>
    </head>
    <body>
    <a href="/">Início</a>
    <a href="/about/">Sobre</a>
    <a href="/blog/">Blog</a>
    <h1>Sobre Mim</h1>
    <h1>{pageTitle}</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 /about.

    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 pageTitle 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

Seção intitulada 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/about.astro
    ---
    const pageTitle = "Sobre Mim";
    const identify = {
    firstName: "Sarah",
    country: "Canadá",
    occupation: "Escritora Técnica",
    hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };
    const skills = ["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/about.astro
    <p>Aqui estão alguns fatos sobre mim:</p>
    <ul>
    <li>Meu nome é {identify.firstName}.</li>
    <li>Eu moro no {identify.country} e eu trabalho como uma {identify.occupation}.</li>
    {identify.hobbies.length >= 2 &&
    <li>Dois dos meus hobbies são: {identify.hobbies[0]} and {identify.hobbies[1]}</li>
    }
    </ul>
    <p>Minhas habilidades são:</p>
    <ul>
    {skills.map((habilidade) => <li>{habilidade}</li>)}
    </ul>
  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?

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/about.astro
    ---
    const pageTitle = "Sobre Mim";
    const identify = {
    firstName: "Sarah",
    country: "Canadá",
    occupation: "Escritora Técnica",
    hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };
    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];
    const happy = true;
    const finished = false;
    const goal = 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/about.astro
    {happy && <p>Estou feliz em estar aprendendo Astro!</p>}
    {finished && <p>Eu terminei esse tutorial!</p>}
    {goal === 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.

Dado o seguinte script .astro:

src/pages/about.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>}

Contribua

O que passa em sua cabeça?

Comunidade