‫-: Tudo bem.
‫Neste vídeo, vou mostrar como
‫usar um dos
‫recursos mais importantes e complexos do Pug.
‫E isso é estende.
‫Com extends, seremos capazes
‫de usar o mesmo layout
‫base para cada página que desejamos renderizar.
‫No momento, terminamos nosso template base com um
‫bom cabeçalho e um bom rodapé.
‫Agora, vamos começar a preencher seu conteúdo.
‫Agora, é claro,
‫queremos carregar conteúdo diferente para páginas diferentes.
‫E, para começar, queremos uma página de visão geral com
‫todos os passeios e, em seguida, uma
‫página com todos os detalhes de um passeio específico.
‫Portanto, agora vamos implementar algumas rotas
‫para essas duas páginas.
‫E vou fazer isso aqui, abaixo
‫do primeiro que já criamos.
‫Portanto, / visão
‫geral E então algo muito semelhante a antes.
‫E novamente, um pouco mais tarde, na verdade, no
‫próximo vídeo, colocaremos essas
‫rotas em seus próprios arquivos separados.
‫Então, renderize, e agora nesta página de visão geral,
‫vamos realmente querer
‫renderizar um modelo chamado visão geral.
‫Isso ainda não existe,
‫então vamos rapidamente em frente e criar um.
‫Então, visão geral. pug E,
‫na verdade, também vamos passar alguns dados.
‫E passaremos no título da página
‫que neste caso, diremos Todos
‫os Passeios.
‫Agora, vamos pegar esse
‫código e copiá-lo para o tour.
‫Portanto, também queremos uma rota para um passeio específico novamente.
‫E aqui, queremos
‫um modelo que também é chamado de tour.
‫E então o título disso, por enquanto,
‫vamos fazer de
‫novo, The Forest Hiker Tour.
‫Portanto, por enquanto, este é apenas um espaço
‫reservado e, claro, um
‫pouco mais tarde, faremos isso de fato.
‫Porque, neste ponto, ainda
‫estamos aprendendo como o Pug realmente funciona.
‫Agora, vamos criar esse modelo de passeio também.
‫E é isso.
‫Ok, agora com esses dois novos modelos feitos aqui, é
‫isso que vamos fazer.
‫Em cada um desses modelos, e neste
‫caso aqui a visão geral,
‫queremos apenas colocar o conteúdo para aquela página específica.
‫Portanto, não queremos nenhum rodapé aqui e
‫nenhum cabeçalho e nenhuma das coisas que temos na base.
‫Então, novamente, apenas o
‫conteúdo da página de visão geral.
‫Então é exatamente isso que vamos colocar
‫neste arquivo e, em seguida, basicamente injetaremos esse
‫conteúdo no modelo base, que podemos
‫chamar de modelo pai.
‫Esse processo é então chamado de extensão.
‫Assim, sempre que o modelo de visão geral é
‫renderizado, pegamos o modelo base
‫e o preenchemos com o conteúdo deste arquivo,
‫e então o estendemos.
‫Aqui está como implementamos isso.
‫Primeiro, na base, precisamos colocar um bloco.
‫Vou realmente fazer isso aqui.
‫Então vamos deletar tudo
‫isso, e aqui, colocar um bloco.
‫E esse bloco, vou chamá-lo de conteúdo.
‫Então, dentro desse bloco, também podemos
‫ter algum conteúdo.
‫Então, vamos colocar um h1 aqui.
‫Mas esse conteúdo será substituído posteriormente.
‫De qualquer forma, vamos colocá-lo
‫aqui apenas como um marcador de posição, basicamente.
‫Portanto, este é um título de espaço reservado.
‫Ok, então temos nosso bloco aqui, e agora podemos
‫ir para nossa página de visão
‫geral e dizer que queremos estender nosso modelo básico.
‫Portanto, estenda a base.
‫Ou, na verdade, isso é chamado de extends.
‫Portanto, este arquivo estende o arquivo base.
‫E claro, se esse aqui fosse
‫chamado, por exemplo, de índice. pug, então
‫aqui diríamos estende o índice.
‫Agora, qual é exatamente o
‫conteúdo que será estendido no modelo base?
‫Bem, isso é tudo o que colocamos no bloco de conteúdo.
‫Então, também aqui, criamos um bloco chamado conteúdo.
‫E aí, como sempre, podemos colocar nosso conteúdo.
‫Digamos apenas: esta é a visão geral do tour.
‫Aqui, basicamente redefinimos o bloco de conteúdo
‫que está na base.
‫Então, novamente, temos este
‫bloco aqui que é chamado de conteúdo,
‫e agora, colocando o mesmo bloco de conteúdo bem
‫aqui nesta página, que está
‫estendendo a base, estamos basicamente redefinindo esse bloco.
‫Cada arquivo pode estender apenas um outro arquivo.
‫Portanto, só podemos estender a
‫base aqui, mas podemos ter blocos diferentes em cada um dos arquivos.
‫Portanto, poderíamos ter um bloqueio para a cabeça aqui também.
‫E então podemos estender isso também
‫no modelo de visão geral.
‫E, na verdade, faremos isso um pouco mais tarde.
‫Mas, por enquanto, é claro, vamos manter as coisas simples.
‫Ok, isso faz sentido?
‫Vamos agora prosseguir e realmente fazer a mesma coisa aqui.
‫Portanto, isso estende o layout de base.
‫E o que exatamente isso se estende?
‫Bem, isso vai estender o bloco de conteúdo.
‫E então colocaremos este no
‫h1, esta é a página de detalhes do tour.
‫Portanto, antes de testar isso, vamos recapitular rapidamente o
‫que acabamos de fazer.
‫Então, queremos usar este modelo básico aqui
‫como nosso ponto de partida.
‫Então, como um esqueleto que tem todo o material
‫HTML, como
‫este cabeçalho, e também o cabeçalho e o rodapé,
‫mas não o conteúdo específico de cada página.
‫Então, em cada uma dessas
‫páginas aqui, temos apenas o conteúdo dessa página em si.
‫E podemos fazer
‫isso porque podemos basicamente injetar
‫esse conteúdo aqui no template base pai usando extend.
‫Então, basicamente, pense nisso como o oposto de incluir.
‫Aqui, este modelo inclui dois modelos pais.
‫Este modelo aqui inclui dois modelos filhos, o
‫cabeçalho e o rodapé.
‫Portanto, novamente, a base é o
‫pai, e o cabeçalho e o rodapé são os filhos.
‫Então, aqui, o pai incluiu os filhos.
‫Mas com extends, é o contrário, onde
‫as crianças, como podemos dizer, então podemos dizer
‫que a visão
‫geral também é uma criança da
‫base, mas aqui é a criança que inclui a base.
‫Então, basicamente, tudo o que está em torno deste conteúdo de bloco.
‫Você pode imaginar que todo esse
‫código aqui, tudo isso que não é o
‫conteúdo do bloco, é então copiado para este arquivo.
‫Essa é uma boa maneira de imaginar como isso funciona.
‫Isso nos permite usar aqui em nossa rota a visão
‫geral e os modelos de passeio em vez de usar a base.
‫Mas ainda, é claro, usando todo esse HTML
‫que temos aqui.
‫Ok, então espero que faça sentido agora.
‫Vamos tentar fazer isso.
‫Vou apenas copiar o URL.
‫Então, agora vamos escrever uma visão geral.
‫E assim, de fato, obtemos o h1 que diz Esta
‫é a visão geral do tour.
‫E, na verdade, também vamos usar a variável title
‫que passamos para esses modelos.
‫Lembre-se de que aqui temos o
‫título Todos os passeios na visão geral e, no passeio,
‫temos O caminhante da floresta.
‫Então, vamos colocar isso no título.
‫Na verdade, podemos fazer isso aqui
‫mesmo no modelo básico.
‫Então, quando bem
‫aqui na visão geral, estendemos o
‫modelo básico, o modelo básico ainda tem acesso aos locais,
‫portanto, às variáveis que passamos para o modelo.
‫Aqui, podemos fazer o que fizemos antes,
‫então, interpolação com a variável, então com o local.
‫Então, tudo que precisamos fazer é colocar o título aqui, assim.
‫E se recarregarmos agora, você
‫verá Todos os passeios aqui no topo.
‫Agora vamos fazer um tour.
‫Esta é a página de detalhes do tour e aqui
‫você vê o The Forest Hiker Tour.
‫Agora, se carregarmos este, devemos
‫obter aquele placeholder que
‫colocamos no bloco.
‫Lembre-se disso?
‫E, de fato, este é o título de espaço reservado.
‫Excelente.
‫Este é um mecanismo poderoso e muito importante
‫para entendermos e usarmos para todos os
‫modelos que construiremos no restante
‫da seção.
‫No próximo vídeo, vamos finalmente limpar
‫um pouco essa bagunça que temos aqui e refatorar
‫todo esse código
‫aqui em alguns arquivos diferentes.