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!
Get ready to…
- 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
Seção intitulada Defina e utilize uma variávelAbra about.astro
, que deve se parecer com isso:
-
Adicione a seguinte linha de JavaScript no script frontmatter, entre as cercas de código:
-
Substitua ambos o título estático “Astro” e o cabeçalho “Sobre Mim” no seu HTML com a variável dinâmica
{pageTitle}
. -
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. -
Utilize o mesmo padrão para criar um valor de
pageTitle
para utilizar emindex.astro
(“Página Inicial”) eblog.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.
- Defina variáveis no seu script do Astro utilizando expressões do JavaScript ou TypeScript.
- Use essas variáveis no seu template do Astro dentro de chaves
{ }
para dizer ao Astro que você está utilizando JavaScript.
Escreva expressões do JavaScript no Astro
Seção intitulada Escreva expressões do JavaScript no Astro-
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.)
-
Então, adicione o seguinte código ao seu template HTML, abaixo do seu conteúdo existente:
- Escrever um template Astro é muito parecido com escrever HTML, porém você pode incluir expressões do JavaScript nele.
- O script frontmatter do Astro contém apenas JavaScript.
- Você pode utilizar todos os operadores lógicos, expressões e funções modernas do JavaScript em qualquer seção do seu arquivo
.astro
. Porém, chaves são necessárias (apenas) no corpo do template HTML.
Teste seu conhecimento
Seção intitulada Teste seu conhecimento-
O frontmatter de um arquivo
.astro
é escrito em: -
Em adição ao HTML, a sintaxe do Astro te permite incluir:
-
Quando você precisa escrever seu JavaScript dentro de chaves?
Renderize elementos condicionalmente
Seção intitulada Renderize elementos condicionalmenteVocê 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.
-
Adicione as seguintes linhas ao seu script frontmatter para definir variáveis:
-
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:
-
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.
A sintaxe de template do Astro é similar a sintaxe do JSX. Se você estiver se perguntando como utilizar seu script no seu HTML, então pesquisar em como é feito no JSX é provavelmente um bom início!
Analise o Padrão
Seção intitulada Analise o PadrãoDado o seguinte script .astro
:
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!
-
<p>{sistemaOperacional}</p>
-
{estudante && <p>Ainda estou na escola.</p>}
-
<p>Eu tenho {quantidade + 8} pares de {calcado}</p>
-
{sistemaOperacional === "MacOS" ? <p>Estou utilizando um Mac.</p> : <p>Não estou utilizando um Mac.</p>}