Introdução a linguagem Jade – parte 2

Continuação do post Introdução a linguagem Jade (HTML). Neste post vamos analisar a sintaxe e os recursos básicos da linguagem Jade. A intenção desta etapa é absorver a sintaxe para de fato começarmos a criar páginas HTML.

Sintaxe

Vamos analisar alguns exemplos simples de código para entender a sintaxe utilizada no Jade. Esses testes básicos da pra fazer no próprio HTML2Jade ou CodePen sem problemas.

Comentários

Código Jade

// comentários visiveis após output
//- comentários apenas visíveis nos templates .jade

Este código compilado vai apresentar apenas o primeiro comentário, já que o outro é exclusivo para arquivos .jade.

Tags comuns

Lembre-se que não precisamos abrir e fechar as tags que declaramos no arquivo Jade.

Código Jade

div
p
span
header
nav
section
main
aside
footer

Output HTML

<div></div>



<span></span>

<header></header>

<nav></nav>

<section></section>

<main></main>

<aside></aside>

<footer></footer>

Tags sem fechamento

Exemplos com algumas tags sem fechamento.

Código Jade

br
hr
img
meta
embed
Output HTML

<br/>
<hr/><img/>
<meta/>
<embed/>

Concatenando elementos

E para concatenar vários elementos? Note que a indentação do código na linguagem Jade é essencial para concatenar os elementos.

Código Jade

ul
  li
  li
  li
 
table
  tr
    td
Output HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
<table>
  <tr>
    <td></td>
  </tr>
</table>

Incluindo conteúdo nas tags

Até o momento, apenas declaramos as tags. E para incluir conteúdo nos elementos? Para declarar tags com conteúdo de texto, podemos utilizar as seguintes sintaxes.

Código Jade

p testando conteúdo 1
//outras maneiras de declarar conteúdos de texto
p
  | testando conteúdo 2
//note que no exemplo, é compilado todo o conteúdo declarado após a separação da tag. agora dê uma olhada no exemplo abaixo
p
  | testando conteúdo
  br
  | testando conteúdo após tag br
//exemplo de texto multi linha
p
  | texto multi linha 1
  | texto multi linha 2
  | texto multi linha 3
  | texto multi linha 4
  | texto multi linha 5
Output HTML

<p>testando conteúdo 1</p>
<!--outras maneiras de declarar conteudos de texto-->
<p>testando conteúdo 2</p>
<!--note que no exemplo, é compilado todo o conteudo declarado após a separação da tag. agora dê uma olhada no exemplo abaixo-->
<p>testando conteúdo<br/>testando conteúdo após tag br</p>
<!--exemplo de texto multi linha-->
<p>
  texto multi linha 1
  texto multi linha 2
  texto multi linha 3
  texto multi linha 4
  texto multi linha 5
</p>

Elementos com ClassID

Para facilitar ainda mais, também podemos declarar a Class e o ID no arquivo Jade, conforme o próximo exemplo.

Código Jade

//declarando uma tag com CLASS
div.container
//Class + conteúdo
div.container texto teste CLASS
//declarando uma tag com ID
div#container
//ID + conteúdo
div#container texto teste ID
Output HTML

<!--declarando uma tag com CLASS-->
<div class="container"></div>
<!--Class + conteúdo-->
<div class="container">texto teste CLASS</div>
<!--declarando uma tag com ID-->
<div id="container"></div>
<!--ID + conteúdo-->
<div id="container">texto teste ID</div>

Se você vai utilizar o elemento DIV com alguma ID ou CLASS, não é necessário informar a tag DIV, podemos fazer conforme o exemplo abaixo.

Código Jade

.container
#container
//a declaração mesclando elementos funciona da mesma maneira, segue exemplo.
.pai teste 1
    .filho teste 2    
#pai teste 1
    #filho teste 2
Output HTML

<div class="container"></div>
<div id="container"></div>
<!--a declaração mesclando elementos funciona da mesma maneira, segue exemplo.-->
<div class="pai">teste 1
  <div class="filho">teste 2</div>
</div>
<div id="pai">teste 1
  <div id="filho">teste 2</div>
</div>

Agora, e se o elemento tiver mais de uma Class? Podemos declarar o elemento da seguinte maneira.

Código Jade

.style1.style2.style3
    .style4
Output HTML

<div class="style1 style2 style3">
  <div class="style4"></div>
</div>

Podemos incluir um ID com base no ultimo exemplo, mas partindo da premissa de que um ID pode ser utilizado apenas uma vez, não é possível declarar vários ID’s. O exemplo acima, com um ID, ficaria da seguinte maneira:

Código Jade

.style1.style2.style3#id_one
    .style4
Output HTML

<div id="id_one" class="style1 style2 style3">
  <div class="style4"></div>
</div>

Adicionando atributos aos elementos HTML

Pense na tag “a”, referente a link. Podemos utilizar a seguinte sintaxe para declarar seus atributos.

Código Jade

a(href="#", target="_blank", rel="nofollow") link
Output HTML

<a href="#" target="_blank" rel="nofollow">link</a>

Mas e as classes e id, como fazemos declarar junto aos atributos? Temos algumas sintaxes válidas para isso, conforme o exemplo a seguir.

Código Jade

//podemos manter a class ou id no elemento da seguinte maneira
a.class#id(href="#", target="_blank", rel="nofollow") link 2

//declarando atributos, classes e ids com outra sintaxe. note que os atributos são declarados com indentação
a.class#id(
  href="#",
  target="_blank",
  rel="nofollow"
) link 3
Output HTML

<a id="id" href="#" target="_blank" rel="nofollow" class="class">link 2</a>
<a id="id" href="#" target="_blank" rel="nofollow" class="class">link 3</a>

Existe mais duas formas interessantes para declarar os atributos, que podem habilitar recursos mais poderosos da linguagem Jade. Um deles é a possibilidade de declarar os atributos como uma array, o outro é a possibilidade de declarar os atributos com um objeto JavaScript, conforme os exemplos abaixo.

Código Jade

//os atributos também podem ser declarados como uma array
a(
  href="#",
  target="_blank",
  rel="nofollow",
  id="idname",
  class=["class1", "class2", "class3"]
) link 4

//exemplo de declaração de atributos como um objeto javascript. essa opção é muito útil para criar templates dinâmicos, vamos explorar estes recursos a frente
a()&attributes({
  'id': 'idname',
  'href': 'link.html',
  'target': '_blank',
  'class': ['class1', 'class2', 'class3']
}) link 5
Output HTML

<a href="#" target="_blank" rel="nofollow" id="idname" class="class1 class2 class3">link 4</a>

<a id="idname" href="link.html" target="_blank" class="class1 class2 class3">link 5</a>

Estrutura básica de uma página

Vamos criar um estrutura básica para páginas HTML, antes de explorarmos os recursos de template do Jade.

Com as linhas de código abaixo, é possível criar uma página pronta para produção.

Código Jade

doctype
html(lang="pt-br")
    head    
        title Testando Jade - estrutura básica template
        meta(charset="utf-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale-1.0")
        meta(name="description", content="descrição da página")
        link(href="#", rel="stylesheet", type="text/css")
    body
        //inicio do body - area de codificação
Output HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>  
    <title>Testando Jade - estrutura básica template</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale-1.0">
    <meta name="description" content="descrição da página">
    <link href="#" rel="stylesheet" type="text/css">
  </head>
  <body>
    <!--inicio do body-->
  </body>
</html>

Conclusão

Bom, finalizamos a segunda parte com um semi template de uma página HTML básica. Na próxima parte vamos dar uma olhada nos recursos para criação de template que o Jade tem a oferecer.

Qualquer dúvida estou a disposição nos comentários.