1 00:00:01,057 --> 00:00:02,830 ‫Instrutor: Nesta aula, você 2 00:00:02,830 --> 00:00:06,513 ‫aprenderá os fundamentos do trabalho com modelos de Pug. 3 00:00:07,950 --> 00:00:12,950 ‫Então, vamos abrir nosso modelo básico aqui e começar. 4 00:00:13,030 --> 00:00:17,720 ‫Então, em essência, Pug é uma sintaxe simples sensível a espaços em 5 00:00:17,720 --> 00:00:22,550 ‫branco para escrever html, então essa é realmente a essência do que é. 6 00:00:22,550 --> 00:00:24,900 ‫Agora, o que isso significa é que 7 00:00:24,900 --> 00:00:29,290 ‫tudo o que usamos para escrever elementos html é seu nome e recuo 8 00:00:29,290 --> 00:00:30,630 ‫em nosso código. 9 00:00:30,630 --> 00:00:32,320 ‫Então, vamos começar 10 00:00:32,320 --> 00:00:35,093 ‫configurando uma estrutura html muito simples aqui, 11 00:00:36,420 --> 00:00:38,170 ‫então nos dê algum espaço. 12 00:00:38,170 --> 00:00:41,680 ‫E então o html geralmente sempre começa com o 13 00:00:44,350 --> 00:00:45,990 ‫doctype e um html. 14 00:00:45,990 --> 00:00:49,300 ‫Portanto, para poder trabalhar adequadamente com o Pug, é claro que 15 00:00:49,300 --> 00:00:51,943 ‫você deve ter algum conhecimento de html; 16 00:00:53,100 --> 00:00:56,280 ‫caso contrário, isso pode não fazer muito sentido para você. 17 00:00:56,280 --> 00:00:58,090 ‫Mesmo assim, se você não souber 18 00:00:58,090 --> 00:01:01,750 ‫o html, não se preocupe, você ainda pode seguir o que estou fazendo 19 00:01:01,750 --> 00:01:03,300 ‫aqui e talvez apenas ler 20 00:01:03,300 --> 00:01:05,250 ‫um artigo sobre como começar com o 21 00:01:05,250 --> 00:01:07,053 ‫html porque é muito, muito simples. 22 00:01:08,250 --> 00:01:11,010 ‫De qualquer forma, sempre começamos com 23 00:01:11,010 --> 00:01:14,500 ‫doctype e depois com o primeiro elemento, então o 24 00:01:14,500 --> 00:01:18,720 ‫elemento abrangente em todos os nossos documentos html é sempre o 25 00:01:18,720 --> 00:01:21,960 ‫html, então dentro dele geralmente há um elemento head. 26 00:01:21,960 --> 00:01:23,650 ‫E então no Pug para 27 00:01:23,650 --> 00:01:26,360 ‫dizer que um elemento está dentro do outro, tudo 28 00:01:26,360 --> 00:01:28,700 ‫o que fazemos é usar uma tag. 29 00:01:28,700 --> 00:01:32,550 ‫Então usamos indentação, como mencionei no início, e 30 00:01:32,550 --> 00:01:33,720 ‫é isso. 31 00:01:33,720 --> 00:01:37,090 ‫Esse é o nosso elemento principal e, dentro dele, vamos 32 00:01:37,090 --> 00:01:39,770 ‫criar o título da página da web. 33 00:01:39,770 --> 00:01:41,573 ‫E então, mais uma etiqueta. 34 00:01:42,790 --> 00:01:43,773 ‫Então, 35 00:01:45,490 --> 00:01:47,210 ‫título, e digamos Natours. 36 00:01:47,210 --> 00:01:50,610 ‫Ok, então novamente apenas recuo, depois o 37 00:01:50,610 --> 00:01:52,997 ‫nome do elemento html e 38 00:01:52,997 --> 00:01:54,890 ‫o próprio conteúdo. 39 00:01:54,890 --> 00:01:57,450 ‫Sem tags de abertura, sem tags 40 00:01:57,450 --> 00:02:01,130 ‫de fechamento e nada da desordem que normalmente temos em html. 41 00:02:01,130 --> 00:02:04,040 ‫Na verdade, eu realmente gosto dessa sintaxe aqui 42 00:02:04,040 --> 00:02:05,660 ‫para escrever documentos html, então 43 00:02:05,660 --> 00:02:08,750 ‫eu acho realmente incrível, muito simples de usar e 44 00:02:08,750 --> 00:02:10,183 ‫de ler também. 45 00:02:11,320 --> 00:02:14,290 ‫Enfim, esse é o conteúdo que queremos na cabeça, 46 00:02:14,290 --> 00:02:16,660 ‫e agora também queremos criar um corpo. 47 00:02:16,660 --> 00:02:19,660 ‫Agora, esse corpo, é claro, não está dentro da 48 00:02:19,660 --> 00:02:22,340 ‫cabeça, ao invés disso está no mesmo 49 00:02:22,340 --> 00:02:25,870 ‫nível da cabeça, então basicamente também um filho direto do html. 50 00:02:25,870 --> 00:02:29,190 ‫E então tudo o que precisamos fazer é voltar um nível de 51 00:02:30,130 --> 00:02:31,830 ‫indentação e criar o elemento lá. 52 00:02:32,900 --> 00:02:35,323 ‫Então lá nós queremos nosso h1, e 53 00:02:36,490 --> 00:02:39,070 ‫agora precisamos usar um pouco mais de indentação. 54 00:02:39,070 --> 00:02:43,290 ‫Então é claro que não aqui, não aqui, mas aqui, tão 55 00:02:43,290 --> 00:02:44,913 ‫dentro do corpo. 56 00:02:47,404 --> 00:02:49,270 ‫Vamos também adicionar um 57 00:02:49,270 --> 00:02:52,410 ‫parágrafo e, para isso, usaremos o elemento p dizendo 58 00:02:52,410 --> 00:02:55,203 ‫algo como, este é apenas um texto. 59 00:02:56,228 --> 00:03:00,600 ‫Então, vamos tentar isso agora em nosso navegador, então 60 00:03:00,600 --> 00:03:03,223 ‫recarregue e vamos lá. 61 00:03:04,900 --> 00:03:08,200 ‫Tudo bem, e aqui você realmente vê toda 62 00:03:08,200 --> 00:03:12,400 ‫a estrutura que acabamos de criar com o doctype, o elemento 63 00:03:12,400 --> 00:03:15,740 ‫html e, claro, o cabeçalho e o corpo ali. 64 00:03:15,740 --> 00:03:19,620 ‫E você também vê esse título realmente aparecendo aqui. 65 00:03:19,620 --> 00:03:24,140 ‫Ótimo, a seguir vamos incluir um arquivo CSS e 66 00:03:24,140 --> 00:03:27,360 ‫também o favicon a ser 67 00:03:27,360 --> 00:03:31,280 ‫exibido aqui em vez dessa página genérica ali. 68 00:03:31,280 --> 00:03:33,230 ‫E se você conhece algum 69 00:03:33,230 --> 00:03:37,320 ‫html, sabe que esse tipo de coisa pertence aqui à cabeça. 70 00:03:37,320 --> 00:03:40,650 ‫Então, como você realmente incluiria uma folha de estilo 71 00:03:40,650 --> 00:03:42,233 ‫CSS com html normal? 72 00:03:43,350 --> 00:03:45,310 ‫Você faria algo assim. 73 00:03:45,310 --> 00:03:48,100 ‫Portanto, você criaria um elemento de link, 74 00:03:48,100 --> 00:03:50,763 ‫definiria que é uma folha de estilo 75 00:03:54,220 --> 00:03:55,853 ‫e também a 76 00:03:57,590 --> 00:03:59,453 ‫referência, assim como está. 77 00:04:00,393 --> 00:04:03,483 ‫Portanto, estilo CSS. css, e então 78 00:04:05,230 --> 00:04:10,230 ‫o que temos aqui, então isso e isso são atributos. 79 00:04:11,900 --> 00:04:15,260 ‫E assim, com Pug, escrevemos atributos como este. 80 00:04:15,260 --> 00:04:17,610 ‫Então, em vez de 81 00:04:17,610 --> 00:04:21,950 ‫ter esse elemento, simplesmente escrevemos link e, em seguida, 82 00:04:21,950 --> 00:04:25,140 ‫escrevemos esses atributos realmente entre parênteses, assim. 83 00:04:25,140 --> 00:04:28,030 ‫Então, sem nenhum espaço e parênteses abertos, e 84 00:04:28,030 --> 00:04:29,890 ‫aí é onde escrevemos 85 00:04:31,290 --> 00:04:33,343 ‫esses atributos exatamente como este. 86 00:04:35,410 --> 00:04:38,270 ‫E devemos sempre escrevê-los com aspas simples e 87 00:04:38,270 --> 00:04:39,553 ‫não aspas duplas, 88 00:04:41,600 --> 00:04:44,210 ‫por isso não precisamos mais deste aqui. 89 00:04:44,210 --> 00:04:47,140 ‫Agora, apenas uma coisa que eu gostaria 90 00:04:47,140 --> 00:04:51,970 ‫de dizer a você, é que também podemos usar html regular no Pug. 91 00:04:51,970 --> 00:04:54,880 ‫Portanto, se você quiser, pode deixar essa 92 00:04:54,880 --> 00:04:57,920 ‫linha de código aqui e Pug pode entendê-la perfeitamente. 93 00:04:57,920 --> 00:04:59,760 ‫Mas é claro que aqui 94 00:04:59,760 --> 00:05:02,223 ‫eu queria mostrar como podemos definir atributos com Pug. 95 00:05:03,860 --> 00:05:07,080 ‫E agora vamos fazer o mesmo para o favicon 96 00:05:07,080 --> 00:05:09,960 ‫e, novamente, precisamos de um elemento de link, 97 00:05:09,960 --> 00:05:12,160 ‫e nele definiremos alguns atributos. 98 00:05:14,510 --> 00:05:17,323 ‫Então definimos que este é um ícone 99 00:05:20,180 --> 00:05:23,723 ‫de atalho, também especificamos seu tipo, então imagem, e 100 00:05:24,830 --> 00:05:26,713 ‫neste caso é um 101 00:05:27,966 --> 00:05:30,530 ‫PNG, e novamente a referência a ele, 102 00:05:30,530 --> 00:05:35,530 ‫e é um favicon de imagem. png. 103 00:05:37,300 --> 00:05:40,103 ‫E agora vamos testar isso, e 104 00:05:40,980 --> 00:05:44,610 ‫você verá que na verdade parece um pouco diferente. 105 00:05:44,610 --> 00:05:46,460 ‫Portanto, temos nosso favicon, e 106 00:05:46,460 --> 00:05:48,943 ‫também nosso texto agora está bem empilhado. 107 00:05:50,342 --> 00:05:54,120 ‫E, de fato, você vê algumas propriedades CSS aparecendo aqui agora 108 00:05:54,120 --> 00:05:55,153 ‫no lado esquerdo. 109 00:05:56,490 --> 00:05:59,470 ‫E isso é claro porque eu escrevi 110 00:05:59,470 --> 00:06:01,443 ‫uma tonelada de CSS 111 00:06:02,980 --> 00:06:07,870 ‫para este aplicativo, então está tudo em público, CSS e estilo. 112 00:06:07,870 --> 00:06:09,733 ‫Então você vê que eu 113 00:06:10,690 --> 00:06:14,600 ‫tenho tipo, eu não sei, tipo mil linhas ou mais até mesmo 114 00:06:14,600 --> 00:06:16,950 ‫de CSS que eu escrevi apenas para este 115 00:06:16,950 --> 00:06:19,053 ‫aplicativo ficar tão bonito quanto parece. 116 00:06:21,784 --> 00:06:25,420 ‫Então, em outras palavras, por que esse estilo. O arquivo css 117 00:06:25,420 --> 00:06:28,820 ‫é carregado automaticamente da pasta CSS e 118 00:06:28,820 --> 00:06:32,110 ‫o favicon também é carregado automaticamente 119 00:06:32,110 --> 00:06:34,170 ‫da pasta de imagens. 120 00:06:34,170 --> 00:06:38,040 ‫Bem, antes de tudo, lembre-se de que cada um 121 00:06:38,040 --> 00:06:41,433 ‫desses ativos realmente dispara sua própria solicitação 122 00:06:42,330 --> 00:06:46,690 ‫http, então vamos realmente confirmar isso aqui nas fontes ou 123 00:06:46,690 --> 00:06:48,920 ‫no painel de rede. 124 00:06:48,920 --> 00:06:51,270 ‫E aqui você vê esses três pedidos, 125 00:06:51,270 --> 00:06:54,970 ‫um para a página em si, outro para o nosso estilo e 126 00:06:54,970 --> 00:06:56,593 ‫para o nosso favicon. 127 00:06:59,280 --> 00:07:02,410 ‫E então, novamente, por que funciona 128 00:07:02,410 --> 00:07:06,020 ‫assim, porque obviamente não temos um manipulador de 129 00:07:06,020 --> 00:07:09,460 ‫rota para qualquer um desses arquivos aqui. 130 00:07:09,460 --> 00:07:12,250 ‫Mas ainda é uma rota se você pensar 131 00:07:12,250 --> 00:07:15,140 ‫bem, porque é uma solicitação get para esse url 132 00:07:15,140 --> 00:07:17,210 ‫e também para esse url. 133 00:07:17,210 --> 00:07:20,930 ‫Então, deixe-me lembrar por que isso realmente funciona, 134 00:07:20,930 --> 00:07:24,590 ‫e é por causa desse middleware 135 00:07:24,590 --> 00:07:29,290 ‫que definimos em algum lugar aqui, então isso aqui. 136 00:07:29,290 --> 00:07:33,100 ‫Portanto, lembre-se disso usando o expresso. static, basicamente definimos 137 00:07:33,100 --> 00:07:36,190 ‫que todos os ativos estáticos sempre 138 00:07:36,190 --> 00:07:38,170 ‫serão servidos automaticamente a 139 00:07:38,170 --> 00:07:43,170 ‫partir de uma pasta chamada public, portanto, com esta pasta aqui. 140 00:07:43,690 --> 00:07:47,470 ‫E é por isso que quando dizemos estilo css slash, isso 141 00:07:47,470 --> 00:07:50,050 ‫na verdade vem da pasta pública. 142 00:07:50,050 --> 00:07:54,473 ‫E então essa pasta CSS é a pasta dentro do public, e o 143 00:07:55,612 --> 00:07:57,810 ‫mesmo é claro para as imagens. 144 00:07:57,810 --> 00:08:01,550 ‫Portanto, se em nosso html tivermos um favicon de barra de 145 00:08:01,550 --> 00:08:04,010 ‫imagem, ele abrirá a pasta de 146 00:08:04,010 --> 00:08:06,720 ‫imagens que está dentro de nossa pasta pública. 147 00:08:06,720 --> 00:08:10,673 ‫Novamente, porque assim o definimos em nosso aplicativo expresso. 148 00:08:12,360 --> 00:08:15,400 ‫Então você já aprendeu a criar elementos 149 00:08:15,400 --> 00:08:17,570 ‫no Pug usando indentação 150 00:08:17,570 --> 00:08:20,470 ‫e também aprendeu a usar atributos. 151 00:08:20,470 --> 00:08:21,810 ‫Mas outra coisa 152 00:08:21,810 --> 00:08:24,380 ‫muito legal é usar variáveis aqui. 153 00:08:24,380 --> 00:08:27,350 ‫Então, deixe-me mostrar como podemos realmente passar dados para 154 00:08:27,350 --> 00:08:31,040 ‫um modelo e, em seguida, como podemos usar esses dados aqui 155 00:08:31,040 --> 00:08:32,153 ‫mesmo no Pug. 156 00:08:35,300 --> 00:08:38,143 ‫Portanto, lembre-se de que temos essa 157 00:08:39,090 --> 00:08:42,580 ‫rota aqui, que usamos para renderizar nosso template base. 158 00:08:42,580 --> 00:08:43,860 ‫E, claro, se 159 00:08:43,860 --> 00:08:45,900 ‫for mais tarde, teremos um 160 00:08:45,900 --> 00:08:48,173 ‫arquivo separado, onde todas essas rotas estarão. 161 00:08:49,050 --> 00:08:52,810 ‫Mas, por enquanto, tudo o que quero fazer é realmente fazer isso funcionar. 162 00:08:52,810 --> 00:08:57,030 ‫De qualquer forma, para agora passar dados para este modelo aqui, 163 00:08:57,030 --> 00:09:00,560 ‫tudo o que precisamos fazer é definir um 164 00:09:00,560 --> 00:09:04,140 ‫objeto aqui e então simplesmente colocaremos alguns dados lá. 165 00:09:04,140 --> 00:09:07,263 ‫E esses dados estarão disponíveis no modelo do Pug. 166 00:09:08,390 --> 00:09:10,910 ‫Então, vamos simplesmente criar um objeto 167 00:09:10,910 --> 00:09:15,853 ‫aqui com uma propriedade tour e defini-lo como The Forest Tiger, e 168 00:09:18,795 --> 00:09:19,712 ‫então ... 169 00:09:20,950 --> 00:09:23,660 ‫vamos também criar uma propriedade do 170 00:09:23,660 --> 00:09:25,993 ‫usuário e defini-la como Jonas. 171 00:09:28,180 --> 00:09:30,710 ‫E essas variáveis que passamos aqui 172 00:09:30,710 --> 00:09:33,543 ‫são chamadas de locais no arquivo Pug. 173 00:09:34,840 --> 00:09:39,380 ‫Portanto, agora vamos realmente usar esses dados. 174 00:09:39,380 --> 00:09:41,630 ‫E o que eu quero fazer 175 00:09:41,630 --> 00:09:45,140 ‫agora é colocar essa variável de passeio em nosso h1. 176 00:09:45,140 --> 00:09:48,600 ‫Então, basicamente, eu quero criar um elemento h1, onde 177 00:09:48,600 --> 00:09:51,510 ‫o conteúdo é o nome do passeio. 178 00:09:51,510 --> 00:09:53,260 ‫E a maneira mais 179 00:09:53,260 --> 00:09:56,510 ‫simples de fazer isso é simplesmente usar a sintaxe igual 180 00:09:56,510 --> 00:10:01,340 ‫como esta, então h1 é igual, a seguir um espaço e, em seguida, tour. 181 00:10:01,340 --> 00:10:04,353 ‫E é isso, é realmente tudo o que temos que fazer. 182 00:10:05,830 --> 00:10:07,660 ‫Então, vamos tirar este aqui 183 00:10:07,660 --> 00:10:09,803 ‫e, na verdade, outra coisa que eu 184 00:10:09,803 --> 00:10:12,830 ‫queria mostrar a vocês é que no Pug, podemos criar 185 00:10:12,830 --> 00:10:15,450 ‫comentários e podemos criar dois tipos de comentários. 186 00:10:15,450 --> 00:10:19,100 ‫Portanto, o mais simples é simplesmente como em JavaScript, 187 00:10:19,100 --> 00:10:20,703 ‫assim como este. 188 00:10:21,890 --> 00:10:23,600 ‫E isso criará um 189 00:10:23,600 --> 00:10:26,120 ‫comentário que ficará visível no html. 190 00:10:26,120 --> 00:10:27,770 ‫Vamos agora dar uma 191 00:10:29,290 --> 00:10:30,520 ‫olhada nisso 192 00:10:30,520 --> 00:10:34,330 ‫e ter em mente que agora o h1 não será mais 193 00:10:34,330 --> 00:10:37,480 ‫The Park Camper, mas sim The Forest Hiker porque 194 00:10:37,480 --> 00:10:39,520 ‫essa é a variável do 195 00:10:39,520 --> 00:10:42,090 ‫passeio, ou em outras palavras, o passeio 196 00:10:42,090 --> 00:10:44,640 ‫local, que agora passou para este modelo. 197 00:10:44,640 --> 00:10:46,390 ‫E aqui, coloco 198 00:10:46,390 --> 00:10:49,373 ‫isso no h1 usando a sintaxe igual. 199 00:10:51,070 --> 00:10:53,160 ‫Então, vamos dar uma 200 00:10:53,160 --> 00:10:54,293 ‫olhada nisso. 201 00:10:55,360 --> 00:10:57,743 ‫E de fato agora é The Forest Hiker. 202 00:11:00,020 --> 00:11:02,920 ‫E também aqui está aquele comentário sobre 203 00:11:02,920 --> 00:11:05,250 ‫o qual acabamos de falar. 204 00:11:05,250 --> 00:11:07,940 ‫Como eu disse, aquela barra dupla 205 00:11:07,940 --> 00:11:10,810 ‫que fizemos basicamente cria um comentário html. 206 00:11:10,810 --> 00:11:14,820 ‫Portanto, esta sintaxe aqui é como escrevemos comentários em html, mas se 207 00:11:14,820 --> 00:11:19,380 ‫você realmente deseja que seja um comentário para o arquivo Pug, mas não 208 00:11:19,380 --> 00:11:21,950 ‫seja realmente enviado para html, você precisa 209 00:11:21,950 --> 00:11:24,093 ‫adicionar um travessão como este. 210 00:11:26,350 --> 00:11:29,513 ‫Então, se recarregarmos agora, o comentário deve ter sumido. 211 00:11:31,880 --> 00:11:34,550 ‫Portanto, esse tipo de código aqui, que escrevemos aqui, é 212 00:11:34,550 --> 00:11:36,163 ‫chamado de código em buffer. 213 00:11:37,080 --> 00:11:40,550 ‫E, na verdade, também poderíamos escrever algum 214 00:11:40,550 --> 00:11:44,880 ‫JavaScript aqui, então digamos que h2 seja igual ao 215 00:11:44,880 --> 00:11:48,700 ‫usuário, e então também podemos chamar toUppercase nisso. 216 00:11:53,080 --> 00:11:54,710 ‫JavaScript tão simples aqui 217 00:11:54,710 --> 00:11:57,600 ‫porque, novamente aqui neste código em buffer, que 218 00:11:57,600 --> 00:11:59,150 ‫é como isso 219 00:11:59,150 --> 00:12:02,403 ‫é chamado, podemos executar JavaScript simples como fizemos aqui. 220 00:12:05,840 --> 00:12:10,263 ‫Então, vamos lá, Jonas em maiúsculas. 221 00:12:12,160 --> 00:12:16,030 ‫Portanto, código em buffer, e se temos código em 222 00:12:16,030 --> 00:12:19,660 ‫buffer, também precisamos ter código sem buffer. 223 00:12:19,660 --> 00:12:22,890 ‫E então, basicamente, código sem buffer é o código 224 00:12:22,890 --> 00:12:25,620 ‫que não adicionará nada à saída. 225 00:12:25,620 --> 00:12:28,510 ‫E escrevemos isso escrevendo traço e então vamos 226 00:12:28,510 --> 00:12:30,863 ‫simplesmente fazer um pouco de JavaScript 227 00:12:31,990 --> 00:12:34,610 ‫aqui, por exemplo, apenas definindo uma variável. 228 00:12:34,610 --> 00:12:38,330 ‫Então, digamos que const x é igual a nove, e então 229 00:12:38,330 --> 00:12:40,720 ‫vamos fazer algum código em buffer novamente. 230 00:12:40,720 --> 00:12:45,200 ‫Então, novamente o código que adicionará algo à saída. 231 00:12:45,200 --> 00:12:47,870 ‫E, novamente, podemos usar JavaScript aqui, então 232 00:12:47,870 --> 00:12:50,290 ‫vamos fazer duas vezes x. 233 00:12:50,290 --> 00:12:54,613 ‫E aqui, teremos acesso a essa variável x. 234 00:12:56,710 --> 00:13:00,833 ‫Então deve ser 18 e de fato é. 235 00:13:01,990 --> 00:13:04,603 ‫Então, esses são todos os pequenos trechos de 236 00:13:04,603 --> 00:13:06,950 ‫código diferente que podemos usar no Pug. 237 00:13:06,950 --> 00:13:11,130 ‫Agora, há também uma terceira maneira de escrever código, e 238 00:13:11,130 --> 00:13:12,970 ‫deixe-me mostrar isso aqui. 239 00:13:12,970 --> 00:13:15,240 ‫Isso é chamado de interpolação e, na 240 00:13:15,240 --> 00:13:16,690 ‫verdade, aquele se parece 241 00:13:16,690 --> 00:13:19,370 ‫um pouco com as strings do template ES6. 242 00:13:19,370 --> 00:13:21,430 ‫Então, em vez de ter apenas 243 00:13:21,430 --> 00:13:23,233 ‫Natours aqui, vamos também adicionar 244 00:13:24,100 --> 00:13:26,883 ‫o nome do passeio, para que possamos fazer assim. 245 00:13:29,380 --> 00:13:33,620 ‫Assim, com a string de template no ES6, funciona assim, 246 00:13:33,620 --> 00:13:36,553 ‫mas aqui no Pug é com este 247 00:13:37,660 --> 00:13:39,350 ‫hash, então assim. 248 00:13:39,350 --> 00:13:41,230 ‫E aqui precisamos fazer 249 00:13:41,230 --> 00:13:45,090 ‫assim basicamente porque isso é código, então é variável, mas 250 00:13:45,090 --> 00:13:47,700 ‫isso não é código, é simplesmente texto. 251 00:13:47,700 --> 00:13:51,500 ‫Portanto, não podemos fazer isso porque tudo o que está 252 00:13:51,500 --> 00:13:53,630 ‫aqui é tratado como 253 00:13:53,630 --> 00:13:57,150 ‫JavaScript e, como isso não é JavaScript, não funcionaria. 254 00:13:57,150 --> 00:13:59,810 ‫E isso aqui é apenas uma 255 00:13:59,810 --> 00:14:02,730 ‫string, e se quisermos adicionar algo a essa 256 00:14:02,730 --> 00:14:05,430 ‫string, precisamos usar essa sintaxe de interpolação. 257 00:14:05,430 --> 00:14:07,053 ‫Ok, faz sentido? 258 00:14:08,620 --> 00:14:11,320 ‫Vamos apenas adicionar como esta barra aqui, que 259 00:14:11,320 --> 00:14:13,940 ‫também é simplesmente parte da string. 260 00:14:13,940 --> 00:14:15,717 ‫E agora esperamos que Natours 261 00:14:17,010 --> 00:14:18,573 ‫destrua The Forest Hiker, 262 00:14:19,440 --> 00:14:21,810 ‫então foi exatamente isso que eles conseguiram. 263 00:14:21,810 --> 00:14:24,700 ‫Ótimo, então esses são os fundamentos básicos 264 00:14:24,700 --> 00:14:26,760 ‫para trabalhar com Pug. 265 00:14:26,760 --> 00:14:28,970 ‫Mas, claro, há muito mais para aprender, 266 00:14:28,970 --> 00:14:30,330 ‫então vamos continuar fazendo 267 00:14:30,330 --> 00:14:31,980 ‫isso nas próximas duas palestras.