‫Instrutor: Nesta aula, quero apenas mostrar rapidamente
‫um recurso que realmente temos em todas
‫as linguagens de programação.
‫Devemos incluir apenas um arquivo e, neste
‫caso, um modelo em outro modelo.
‫Então, digamos que queremos manter nosso
‫layout básico aqui realmente limpo,
‫sem nenhum conteúdo nele.
‫E então o que vamos fazer é colocar todo o
‫código do cabeçalho em um arquivo de cabeçalho.
‫E então inclua esse arquivo aqui.
‫E o mesmo também para o rodapé.
‫E então, nosso bloco de conteúdo,
‫então basicamente nosso corpo
‫aqui se torna este elemento muito limpo apenas com estes
‫includes e então este conteúdo aqui por enquanto.
‫OK.
‫Então, novamente, vamos criar um novo arquivo aqui para o cabeçalho.
‫dot pug
‫E na verdade eu gosto de prefixar esses arquivos que só
‫servem para serem incluídos com um sublinhado.
‫E se você estiver familiarizado com algo
‫como Sass, isso também será familiar para você.
‫Ok, agora vamos adicionar e colar isso aqui, e
‫não este código,
‫então acho que esqueci de copiar ou cortar.
‫E então cole aqui.
‫E agora esse recuo está todo errado
‫aqui, porque agora temos três níveis, como você
‫pode ver, então, um, dois,
‫três níveis onde esse código deveria realmente estar aqui.
‫Ok, e agora precisamos adicionar e corrigir isso, mas o que
‫podemos realmente fazer em vez de fazer manualmente é usar
‫uma extensão agradável que faz esse trabalho para nós.
‫Então, aqui na minha guia
‫de extensão, deixe-me mostrar a extensão que quero dizer.
‫E isso é chamado de embelezamento de Pug.
‫Ok, então vá em frente e instale este pacote, certo.
‫E depois de fazer
‫isso, você pode simplesmente selecionar
‫todo o código aqui pressionando command-A e, em seguida,
‫criar um comando VS Code dizendo command-shift-P.
‫E aqui, você escreve pug.
‫E isso vai embelezar o pug.
‫E você vê que você também tem o atalho
‫aqui e não tenho certeza se este é o padrão,
‫mas pelo menos no meu caso posso usar o atalho
‫também para embelezar este código.
‫Mas de qualquer forma, ao escrever
‫pug, você deve obter esta seleção aqui agora.
‫E se você clicar em Enter, ele irá,
‫como você pode ver, corrigir o recuo que estava errado neste arquivo.
‫Tudo bem?
‫Então salve-o, feche-o e vamos voltar
‫aqui na verdade.
‫E agora tudo o que precisamos fazer é dizer include _header.
‫E o mesmo para o
‫rodapé, vamos recortar aqui, criar um novo template ...
‫_footer
‫cole selecione-o,
‫command-shift-P ou provavelmente no Windows isso
‫é control-shift-P e então na
‫verdade o último que foi
‫usado aparecerá aqui na seleção.
‫Então, clique em voltar e pronto.
‫Isso também está corrigido agora.
‫Incluir...
‫rodapé.
‫E observe como nem mesmo precisamos especificar a
‫extensão dot pug novamente.
‫Portanto, salve-o e, quando recarregarmos,
‫ele deverá ter a mesma aparência.
‫Bem, não realmente, porque esses botões aqui, eles meio
‫que se deslocaram para baixo,
‫então eles deixaram esta barra de navegação.
‫Ou, na verdade, este cabeçalho, então isso não está
‫correto, talvez seja
‫algum problema com esse recuo automático aqui no cabeçalho.
‫E sim, na verdade isso não está
‫correto porque tudo isso deve estar dentro do cabeçalho.
‫Portanto, este nav, este div e este nav devem
‫estar todos no mesmo nível.
‫E agora está correto.
‫Só para ter certeza, vamos verificar também o rodapé.
‫Mas aqui, ele realmente está correto,
‫então não tenho certeza do que realmente deu errado nesta situação.
‫De qualquer forma, vamos tentar de novo agora.
‫E aqui vamos nós.
‫De qualquer forma, isso é simplesmente incluir alguns arquivos, uns
‫nos outros.
‫No próximo vídeo, faremos algo
‫um pouco parecido, mas ao mesmo tempo mais complexo e também mais útil.
‫Então, se você está curioso para saber o que
‫é isso, junte-se a mim na próxima.