‫Instrutor: Nesta aula, você
‫aprenderá os fundamentos do trabalho com modelos de Pug.
‫Então, vamos abrir nosso modelo básico aqui e começar.
‫Então, em essência, Pug é uma sintaxe simples sensível a espaços em
‫branco para escrever html, então essa é realmente a essência do que é.
‫Agora, o que isso significa é que
‫tudo o que usamos para escrever elementos html é seu nome e recuo
‫em nosso código.
‫Então, vamos começar
‫configurando uma estrutura html muito simples aqui,
‫então nos dê algum espaço.
‫E então o html geralmente sempre começa com o
‫doctype e um html.
‫Portanto, para poder trabalhar adequadamente com o Pug, é claro que
‫você deve ter algum conhecimento de html;
‫caso contrário, isso pode não fazer muito sentido para você.
‫Mesmo assim, se você não souber
‫o html, não se preocupe, você ainda pode seguir o que estou fazendo
‫aqui e talvez apenas ler
‫um artigo sobre como começar com o
‫html porque é muito, muito simples.
‫De qualquer forma, sempre começamos com
‫doctype e depois com o primeiro elemento, então o
‫elemento abrangente em todos os nossos documentos html é sempre o
‫html, então dentro dele geralmente há um elemento head.
‫E então no Pug para
‫dizer que um elemento está dentro do outro, tudo
‫o que fazemos é usar uma tag.
‫Então usamos indentação, como mencionei no início, e
‫é isso.
‫Esse é o nosso elemento principal e, dentro dele, vamos
‫criar o título da página da web.
‫E então, mais uma etiqueta.
‫Então,
‫título, e digamos Natours.
‫Ok, então novamente apenas recuo, depois o
‫nome do elemento html e
‫o próprio conteúdo.
‫Sem tags de abertura, sem tags
‫de fechamento e nada da desordem que normalmente temos em html.
‫Na verdade, eu realmente gosto dessa sintaxe aqui
‫para escrever documentos html, então
‫eu acho realmente incrível, muito simples de usar e
‫de ler também.
‫Enfim, esse é o conteúdo que queremos na cabeça,
‫e agora também queremos criar um corpo.
‫Agora, esse corpo, é claro, não está dentro da
‫cabeça, ao invés disso está no mesmo
‫nível da cabeça, então basicamente também um filho direto do html.
‫E então tudo o que precisamos fazer é voltar um nível de
‫indentação e criar o elemento lá.
‫Então lá nós queremos nosso h1, e
‫agora precisamos usar um pouco mais de indentação.
‫Então é claro que não aqui, não aqui, mas aqui, tão
‫dentro do corpo.
‫Vamos também adicionar um
‫parágrafo e, para isso, usaremos o elemento p dizendo
‫algo como, este é apenas um texto.
‫Então, vamos tentar isso agora em nosso navegador, então
‫recarregue e vamos lá.
‫Tudo bem, e aqui você realmente vê toda
‫a estrutura que acabamos de criar com o doctype, o elemento
‫html e, claro, o cabeçalho e o corpo ali.
‫E você também vê esse título realmente aparecendo aqui.
‫Ótimo, a seguir vamos incluir um arquivo CSS e
‫também o favicon a ser
‫exibido aqui em vez dessa página genérica ali.
‫E se você conhece algum
‫html, sabe que esse tipo de coisa pertence aqui à cabeça.
‫Então, como você realmente incluiria uma folha de estilo
‫CSS com html normal?
‫Você faria algo assim.
‫Portanto, você criaria um elemento de link,
‫definiria que é uma folha de estilo
‫e também a
‫referência, assim como está.
‫Portanto, estilo CSS. css, e então
‫o que temos aqui, então isso e isso são atributos.
‫E assim, com Pug, escrevemos atributos como este.
‫Então, em vez de
‫ter esse elemento, simplesmente escrevemos link e, em seguida,
‫escrevemos esses atributos realmente entre parênteses, assim.
‫Então, sem nenhum espaço e parênteses abertos, e
‫aí é onde escrevemos
‫esses atributos exatamente como este.
‫E devemos sempre escrevê-los com aspas simples e
‫não aspas duplas,
‫por isso não precisamos mais deste aqui.
‫Agora, apenas uma coisa que eu gostaria
‫de dizer a você, é que também podemos usar html regular no Pug.
‫Portanto, se você quiser, pode deixar essa
‫linha de código aqui e Pug pode entendê-la perfeitamente.
‫Mas é claro que aqui
‫eu queria mostrar como podemos definir atributos com Pug.
‫E agora vamos fazer o mesmo para o favicon
‫e, novamente, precisamos de um elemento de link,
‫e nele definiremos alguns atributos.
‫Então definimos que este é um ícone
‫de atalho, também especificamos seu tipo, então imagem, e
‫neste caso é um
‫PNG, e novamente a referência a ele,
‫e é um favicon de imagem. png.
‫E agora vamos testar isso, e
‫você verá que na verdade parece um pouco diferente.
‫Portanto, temos nosso favicon, e
‫também nosso texto agora está bem empilhado.
‫E, de fato, você vê algumas propriedades CSS aparecendo aqui agora
‫no lado esquerdo.
‫E isso é claro porque eu escrevi
‫uma tonelada de CSS
‫para este aplicativo, então está tudo em público, CSS e estilo.
‫Então você vê que eu
‫tenho tipo, eu não sei, tipo mil linhas ou mais até mesmo
‫de CSS que eu escrevi apenas para este
‫aplicativo ficar tão bonito quanto parece.
‫Então, em outras palavras, por que esse estilo. O arquivo css
‫é carregado automaticamente da pasta CSS e
‫o favicon também é carregado automaticamente
‫da pasta de imagens.
‫Bem, antes de tudo, lembre-se de que cada um
‫desses ativos realmente dispara sua própria solicitação
‫http, então vamos realmente confirmar isso aqui nas fontes ou
‫no painel de rede.
‫E aqui você vê esses três pedidos,
‫um para a página em si, outro para o nosso estilo e
‫para o nosso favicon.
‫E então, novamente, por que funciona
‫assim, porque obviamente não temos um manipulador de
‫rota para qualquer um desses arquivos aqui.
‫Mas ainda é uma rota se você pensar
‫bem, porque é uma solicitação get para esse url
‫e também para esse url.
‫Então, deixe-me lembrar por que isso realmente funciona,
‫e é por causa desse middleware
‫que definimos em algum lugar aqui, então isso aqui.
‫Portanto, lembre-se disso usando o expresso. static, basicamente definimos
‫que todos os ativos estáticos sempre
‫serão servidos automaticamente a
‫partir de uma pasta chamada public, portanto, com esta pasta aqui.
‫E é por isso que quando dizemos estilo css slash, isso
‫na verdade vem da pasta pública.
‫E então essa pasta CSS é a pasta dentro do public, e o
‫mesmo é claro para as imagens.
‫Portanto, se em nosso html tivermos um favicon de barra de
‫imagem, ele abrirá a pasta de
‫imagens que está dentro de nossa pasta pública.
‫Novamente, porque assim o definimos em nosso aplicativo expresso.
‫Então você já aprendeu a criar elementos
‫no Pug usando indentação
‫e também aprendeu a usar atributos.
‫Mas outra coisa
‫muito legal é usar variáveis aqui.
‫Então, deixe-me mostrar como podemos realmente passar dados para
‫um modelo e, em seguida, como podemos usar esses dados aqui
‫mesmo no Pug.
‫Portanto, lembre-se de que temos essa
‫rota aqui, que usamos para renderizar nosso template base.
‫E, claro, se
‫for mais tarde, teremos um
‫arquivo separado, onde todas essas rotas estarão.
‫Mas, por enquanto, tudo o que quero fazer é realmente fazer isso funcionar.
‫De qualquer forma, para agora passar dados para este modelo aqui,
‫tudo o que precisamos fazer é definir um
‫objeto aqui e então simplesmente colocaremos alguns dados lá.
‫E esses dados estarão disponíveis no modelo do Pug.
‫Então, vamos simplesmente criar um objeto
‫aqui com uma propriedade tour e defini-lo como The Forest Tiger, e
‫então ...
‫vamos também criar uma propriedade do
‫usuário e defini-la como Jonas.
‫E essas variáveis que passamos aqui
‫são chamadas de locais no arquivo Pug.
‫Portanto, agora vamos realmente usar esses dados.
‫E o que eu quero fazer
‫agora é colocar essa variável de passeio em nosso h1.
‫Então, basicamente, eu quero criar um elemento h1, onde
‫o conteúdo é o nome do passeio.
‫E a maneira mais
‫simples de fazer isso é simplesmente usar a sintaxe igual
‫como esta, então h1 é igual, a seguir um espaço e, em seguida, tour.
‫E é isso, é realmente tudo o que temos que fazer.
‫Então, vamos tirar este aqui
‫e, na verdade, outra coisa que eu
‫queria mostrar a vocês é que no Pug, podemos criar
‫comentários e podemos criar dois tipos de comentários.
‫Portanto, o mais simples é simplesmente como em JavaScript,
‫assim como este.
‫E isso criará um
‫comentário que ficará visível no html.
‫Vamos agora dar uma
‫olhada nisso
‫e ter em mente que agora o h1 não será mais
‫The Park Camper, mas sim The Forest Hiker porque
‫essa é a variável do
‫passeio, ou em outras palavras, o passeio
‫local, que agora passou para este modelo.
‫E aqui, coloco
‫isso no h1 usando a sintaxe igual.
‫Então, vamos dar uma
‫olhada nisso.
‫E de fato agora é The Forest Hiker.
‫E também aqui está aquele comentário sobre
‫o qual acabamos de falar.
‫Como eu disse, aquela barra dupla
‫que fizemos basicamente cria um comentário html.
‫Portanto, esta sintaxe aqui é como escrevemos comentários em html, mas se
‫você realmente deseja que seja um comentário para o arquivo Pug, mas não
‫seja realmente enviado para html, você precisa
‫adicionar um travessão como este.
‫Então, se recarregarmos agora, o comentário deve ter sumido.
‫Portanto, esse tipo de código aqui, que escrevemos aqui, é
‫chamado de código em buffer.
‫E, na verdade, também poderíamos escrever algum
‫JavaScript aqui, então digamos que h2 seja igual ao
‫usuário, e então também podemos chamar toUppercase nisso.
‫JavaScript tão simples aqui
‫porque, novamente aqui neste código em buffer, que
‫é como isso
‫é chamado, podemos executar JavaScript simples como fizemos aqui.
‫Então, vamos lá, Jonas em maiúsculas.
‫Portanto, código em buffer, e se temos código em
‫buffer, também precisamos ter código sem buffer.
‫E então, basicamente, código sem buffer é o código
‫que não adicionará nada à saída.
‫E escrevemos isso escrevendo traço e então vamos
‫simplesmente fazer um pouco de JavaScript
‫aqui, por exemplo, apenas definindo uma variável.
‫Então, digamos que const x é igual a nove, e então
‫vamos fazer algum código em buffer novamente.
‫Então, novamente o código que adicionará algo à saída.
‫E, novamente, podemos usar JavaScript aqui, então
‫vamos fazer duas vezes x.
‫E aqui, teremos acesso a essa variável x.
‫Então deve ser 18 e de fato é.
‫Então, esses são todos os pequenos trechos de
‫código diferente que podemos usar no Pug.
‫Agora, há também uma terceira maneira de escrever código, e
‫deixe-me mostrar isso aqui.
‫Isso é chamado de interpolação e, na
‫verdade, aquele se parece
‫um pouco com as strings do template ES6.
‫Então, em vez de ter apenas
‫Natours aqui, vamos também adicionar
‫o nome do passeio, para que possamos fazer assim.
‫Assim, com a string de template no ES6, funciona assim,
‫mas aqui no Pug é com este
‫hash, então assim.
‫E aqui precisamos fazer
‫assim basicamente porque isso é código, então é variável, mas
‫isso não é código, é simplesmente texto.
‫Portanto, não podemos fazer isso porque tudo o que está
‫aqui é tratado como
‫JavaScript e, como isso não é JavaScript, não funcionaria.
‫E isso aqui é apenas uma
‫string, e se quisermos adicionar algo a essa
‫string, precisamos usar essa sintaxe de interpolação.
‫Ok, faz sentido?
‫Vamos apenas adicionar como esta barra aqui, que
‫também é simplesmente parte da string.
‫E agora esperamos que Natours
‫destrua The Forest Hiker,
‫então foi exatamente isso que eles conseguiram.
‫Ótimo, então esses são os fundamentos básicos
‫para trabalhar com Pug.
‫Mas, claro, há muito mais para aprender,
‫então vamos continuar fazendo
‫isso nas próximas duas palestras.