Introdução a linguagem Jade – parte 3

Terceiro posto da série de introdução a linguagem Jade. Neste post vamos analisar quais os recursos e funcionalidades disponíveis no Jade, para auxiliar na criação de templates.


Se precisar, aqui estão os links dos tutoriais anteriores:

Inicio da terceira parte.

Criando templates

Um dos recursos mais interessantes da linguagem Jade, é a capacidade de criar templates, o que permite reutilizar blocos de códigos (e consequentemente poupa mais tempo no desenvolvimento). Se antes utilizamos PHP apenas para utilizar o include, agora podemos fazer a mesma coisa com Jade, sem a necessidade de uma linguagem server side.

Include

Assim como no PHP, o Jade também possui um recurso include bem similar, mas que opera ao compilar o arquivo jade.

  • Primeiramente vamos criar uma pasta chamada include, na raiz do projeto, para agregar os arquivos que vamos incluir nos testes.
  • Os arquivos podem ter qualquer conteúdo compatível com a linguagem Jade, e não devem ser compilados.

Vamos criar o primeiro arquivo, headertext.jade, com o seguinte conteúdo:

| testando inclusão de conteudo com INCLUDE

Agora vamos criar o arquivo content.jade:

h1 testando inclusão de informação

p Em linguística, a noção de texto é ampla e ainda aberta a uma definição mais precisa. Grosso modo, pode ser entendido como manifestação linguística das ideias de um autor, que serão interpretadas pelo leitor de acordo com seus conhecimentos linguísticos e culturais. Seu tamanho é variável.

ul
    li: a link um
    li: a link dois
    li: a link tres
    li: a link quatro
    li: a link cinco
    
p Em linguística, a noção de texto é ampla e ainda aberta a uma definição mais precisa. Grosso modo, pode ser entendido como manifestação linguística das ideias de um autor, que serão interpretadas pelo leitor de acordo com seus conhecimentos linguísticos e culturais. Seu tamanho é variável.

Como fazer para incluir o conteúdo destes arquivos, em outro arquivo .jade? Pressupondo que os arquivos de conteúdo estejam na pasta include, você pode seguir o exemplo abaixo.

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
        nav
            .wrapper
                a.global-nav__header-tuts-logo-link(href="http://- tutsplus.com")
                    img.global-nav__header-tuts-logo-image(alt="tuts+", src="tuts_logo.svg")
                span.page-footer__tuts-brand-text
                    include include/headertext.jade
        main.wrapper 
            include include/content.jade

O resultado, no arquivo compilado em 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>
    <nav>
      <div class="wrapper"><a href="http://- tutsplus.com" class="global-nav__header-tuts-logo-link"><img alt="tuts+" src="tuts_logo.svg" class="global-nav__header-tuts-logo-image"></a><span class="page-footer__tuts-brand-text">testando inclusão de conteudo com INCLUDE</span></div>
    </nav>
    <main class="wrapper"> 
      <h1>testando inclusão de informação</h1>
      <p>Em linguística, a noção de texto é ampla e ainda aberta a uma definição mais precisa. Grosso modo, pode ser entendido como manifestação linguística das ideias de um autor, que serão interpretadas pelo leitor de acordo com seus conhecimentos linguísticos e culturais. Seu tamanho é variável.</p>
      <ul>
        <li><a>link um</a></li>
        <li><a>link dois</a></li>
        <li><a>link tres</a></li>
        <li><a>link quatro</a></li>
        <li><a>link cinco</a></li>
      </ul>
      <p>Em linguística, a noção de texto é ampla e ainda aberta a uma definição mais precisa. Grosso modo, pode ser entendido como manifestação linguística das ideias de um autor, que serão interpretadas pelo leitor de acordo com seus conhecimentos linguísticos e culturais. Seu tamanho é variável.</p>
    </main>
  </body>
</html>


Extends & Block

Com o include, conseguimos importar arquivos com blocos de código para começar a criar um template. Com o extends, nós podemos utilizar todo o código de um arquivo .jade e reutilizar as funcionalidades deste, adicionando elementos/recursos.

  • Criamos um novo arquivo, com o nome de template_extends_block.jade.
  • No arquivo criado, incluímos na primeira a linha o recurso do extends para incluir o arquivo que estávamos utilizando antes, neste.
  • Ao salvar o arquivo, temos um arquivo HTML com todo o código presente no arquivo template, mais o código que incluímos através do include.

Uma observação interessante, agora, podemos de fato trabalhar com templates, uma vez que podemos editar o conteúdo de uma página alterando apenas o que é necessário, gerando novos arquivos a partir de um padrão.

O recurso block permite editar blocos de código do arquivo importado com o extends. Assim, podemos editar o necessário ao compilar o arquivo sem a necessidade de editar o arquivo de origem. Note o exemplo abaixo, com base no arquivo template_extends_block.jade.

//- exemplo do inclusão de conteúdo com o recurso extends. note que dentro do arquivo que estamos importando, também utilizamos os recursos de include do exemplo anterior, que continuam operando normalmente.
extends template_base_include

//- outra forma de utilizarmos conteudos pré definidos no template, é através do recurso block. com ele podemos criar blocos de códigos em um mesmo arquivo, ao invés de incluir arquivos separados
block title
  | Testando Jade - estrutura básica de um template
  
block content
  h1
    //- note que reutilizamos o block title que acabamos de criar, abaixo, que replica o mesmo titulo da página
    block title

  p Em linguística, a noção de texto é ampla e ainda aberta a uma definição mais precisa. Grosso modo, pode ser entendido como manifestação linguística das ideias de um autor, que serão interpretadas pelo leitor de acordo com seus conhecimentos linguísticos e culturais. Seu tamanho é variável.
  
  ul
    li: a link um
    li: a link dois
    li: a link três
    li: a link quatro
    li: a link cinco
      
  p Em linguística, a noção de texto é ampla e ainda aberta a uma definição mais precisa. Grosso modo, pode ser entendido como manifestação linguística das ideias de um autor, que serão interpretadas pelo leitor de acordo com seus conhecimentos linguísticos e culturais. Seu tamanho é variável.

Agora, vamos dar uma olhada no arquivo template_base_include.jade, que é o arquivo principal do nosso template.

//- exemplo de inclusão de conteúdo com o recurso include
doctype
html(lang="pt-br")
    head
        title
            //- abaixo exemplo de como forçar a inclusão de conteúdo padrão no template.
            | Default Titulo default
        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
        nav
            .wrapper
                a.global-nav__header-tuts-logo-link(href="http://- tutsplus.com")
                    img.global-nav__header-tuts-logo-image(alt="tuts+", src="tuts_logo.svg")
                span.page-footer__tuts-brand-text
                    //- note que apontamos para um arquivo localizado em uma pasta de nome include. não é necessário especificar a extensão do arquivo que deve ser incluso, a não ser que não se trate de um arquivo .jade (exemplo, .md)
                    include include/headertext
        main.wrapper
            //- inserindo conteúdo do arquivo importado com o recurso block. ver arquivo template_extends_block.jade
            block content

E por fim, os arquivos que inserimos com o recurso include, que apenas agregam conteúdo.

Conteúdo do arquivo content.jade.

h1 testando inclusão de informação  

p Em linguística, a noção de texto é ampla e ainda aberta a uma definição mais precisa. Grosso modo, pode ser entendido como manifestação linguística das ideias de um autor, que serão interpretadas pelo leitor de acordo com seus conhecimentos linguísticos e culturais. Seu tamanho é variável.

ul
    li: a link um
    li: a link dois
    li: a link trés
    li: a link quatro
    li: a link cinco
    
p Em linguística, a noção de texto é ampla e ainda aberta a uma definição mais precisa. Grosso modo, pode ser entendido como manifestação linguística das ideias de um autor, que serão interpretadas pelo leitor de acordo com seus conhecimentos linguísticos e culturais. Seu tamanho é variável.

Conteúdo do arquivo headertext.jade.

| testando inclusão de conteúdo com INCLUDE

Append e Prepend blocks

Recursos como append e prepend são comuns em diversas linguagens, como o jQuery por exemplo. No Jade também podemos utilizar o recurso, que pode ser muito útil para editar templates, quando a necessidade é de gerar novas páginas.

Peguemos o arquivo append_prepend.jade como exemplo. Neste importamos o arquivo template_extends_block.jade. Segue exemplo.

Jade:

//- testando append e prepend

//- importamos o arquivo padrão do template
extends template_base_include

//- editamos o block title para o titulo da página em questão
block title
| Testando Jade - append and prepend
//- testamos o prepend. esse recurso adiciona conteudo no inicio do elemento em questão, neste caso, apontamos para o block content, que declaramos no arquivo template_base_include.jade
block prepend content
| inicio...
//- testamos o append. o recurso funciona da mesma maneira que o prepend, porém adiciona conteudo ao fim do elemento.
block append content
| fim...
//- note que o conteúdo declarado com o append e prepend estão devidamente posicionados, junto ao conteúdo padrão do block content

Output HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Testando Jade - append and prepend</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>
    <nav>
      <div class="wrapper"><a href="http://- tutsplus.com" class="global-nav__header-tuts-logo-link"><img alt="tuts+" src="tuts_logo.svg" class="global-nav__header-tuts-logo-image"></a><span class="page-footer__tuts-brand-text">testando inclusão de conteúdo com INCLUDE</span></div>
    </nav>
    <main class="wrapper">
      <!-- abaixo o output do prepend e append -->
      inicio...
      Default conteúdo padrão
      fim...
    </main>
  </body>
</html>


Note no arquivo compilado, que o conteúdo que fora incluído com os recursos append e prepend foram devidamente compilados. Mais para frente vamos ver ter mais exemplos do uso destes recursos.

Utilizando variáveis e condicionais para configurar um template

A linguagem Jade nos permite utilizar variáveis e condicionais praticamente da mesma maneira que fazemos com outras linguagens. Lembra um pouco as técnicas utilizadas no Sass.

Vamos imaginar o seguinte cenário, onde precisamos de um template, que vai contar com diversas páginas, cada um com uma informação, mas base padrão. A melhor maneira, de fato é criando um template, mas como configurar as informações padrões, como links de estilos e meta tags?

Podemos criar um arquivo de configuração utilizando o recurso de variáveis e condicionais.

Vamos criar um arquivo chamado __config.jade (dois underlines), com a seguinte linha de código.

//- arquivo com configurações padrões do template
//- o hifen antes da variável significa que a linha deve ser interpretada como código.
- var PageTitle = "Revisando Jade"
- var MetaDesc  = "Meta descrição padrão via config.jade"
- var GoogleFonts = "Open+Sans"

Agora, editamos o arquivo template_base_include.jade, da seguinte maneira, para que possamos incluir o arquivo de configuração no template.

//- importando arquivo de configuração do template
include __config.jade

doctype
html(lang="pt-br")
    head
        title
            block title
                //- importando o valor da variável PageTitle. note a que é necessário utilizar a interpolação
                | #{PageTitle}
        //- meta tag description importando o valor declarado na variável MetaDesc (sem aspas), no arquivo config.jade
        meta(name="description", content=MetaDesc)
        block metatags
        block linktags
            link(href="#", rel="stylesheet", type="text/css")
    body
    //- finalizamos o exemplo no body para não confundir com no decorrer do arquivo template_base_include.jade.

O código compilado vai ficar da seguinte maneira (note que o código compilado vai até a tag body, para não confundir com os exemplos do include):

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <- titulo conforme a variável PageTitle -->
    <title>Revisando Jade</title>
    <- descrição da meta tag conforme a variável MetaDesc -->
    <meta name="description" content="Meta descrição padrão via config.jade">
    <link href="#" rel="stylesheet" type="text/css">
  </head>
  <body>

Agora, com o mesmo exemplo, vamos usar uma condicional, que neste caso vai servir para compilar ou não, um bloco de código, com base em alguma informação/condição (caso esta exista).

include __config.jade

doctype
html(lang="pt-br")
    head
        title
            block title
                //- importando o valor da variável PageTitle. note a que é necessário utilizar a interpolação
                | #{PageTitle}
        //- meta tag description importando o valor declarado na variável MetaDesc (sem aspas), no arquivo config.jade
        meta(name="description", content=MetaDesc)
        block metatags
        block linktags
            link(href="#", rel="stylesheet", type="text/css")
            //- abaixo criamos uma condição, caso exista uma variável chamada GoogleFont, o link para uma font do google fonts é inserido, e utilizamos o valor da variável, que é o nome da fonte, para autocompletar o link.
            if GoogleFonts
                link(href='https://fonts.googleapis.com/css?family=' + GoogleFonts, rel="stylesheet", type="text/css")
    body
    //- finalizamos o exemplo no body para não confundir com no decorrer do arquivo template_base_include.jade.


Alterando as configurações com base nas variáveis (complementando as configurações com variáveis)

Antes analisamos um exemplo de criação de template, com valores padrões, utilizando variáveis. Agora vamos ver como podemos utilizar as mesmas variáveis para criar diversas páginas, com base no template, alterando as configurações necessárias para cada uma delas.

Vamos utilizar recursos que já analisamos no tutorial para aplicar essa configuração com base em variáveis, não é necessário utilizar nenhum novo recurso da linguagem para tal.

Vamos criar um novo arquivo chamado manual_config_with_variables.jade para testar as funcionalidades desta categoria. Neste arquivo, vamos declarar o seguinte bloco de código.

//- primeiro utilizamos o extends para gerar o template baseado no arquivo template_base_include.jade.
extends template_base_include

//- no arquivo template_base_include.jade, transformamos o include do arquivo de configuração __config.jade em um block. conferir o arquivo template_base_include.jade.
//- neste arquivo (manual_config_with_variables.jade), editamos o block config (que porta as configurações) com o recurso append.
block append config
    //- declaramos novamente a variável PageTitle, que armazena o título padrão do template, subscrevendo seu valor atual pelo valor abaixo.
    - var PageTitle = "Revisando Jade - alterando configuração template com variáveis"
    //- note que podemos criar diversas páginas com estas mesmas linhas de código, apenas mudando os valores das variáveis. no arquivo __config.jade, o jQuery está inativo por padrão definido como false. aqui definimos o jQuery como true, e o recurso é compilado no arquivo gerado (manual_config_with_variables.html).
    - var jQuery = true
    - var MetaDesc = "Neste arquivo testamos a alteração de contéudo em uma página do template com base em variáveis"

Note no arquivo compilado, que os textos no template foram substituídos conforme o valor que definimos para as variáveis no arquivo manual_config_with_variables.jade.

Output HTML:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Revisando Jade - alterando configuração template com variáveis
    </title>
    <meta name="description" content="Neste arquivo testamos a alteração de contéudo em uma página do template com base em variáveis">
    <link href="#" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <script src="//code.jquery.com/jquery-1.12.0.min.js" type="javascript/text"></script>
  </head>
  <body>
    <nav>
      <div class="wrapper">
        <h1>Revisando Jade - alterando configuração template com variáveis</h1><br><a href="http://tutsplus.com" class="global-nav__header-tuts-logo-link"><img alt="tuts+" src="tuts_logo.svg" class="global-nav__header-tuts-logo-image"></a><span class="page-footer__tuts-brand-text">asdasd - importanto headertext.jade</span>
      </div>
    </nav>
    <main class="wrapper"> - importando content.jade
    </main>
  </body>
</html>


Fim da terceira parte…

Nesta etapa conferimos todas os recursos e funcionalidade do Jade que possibilitam a criação e manipulação de templates. Até aqui já conferimos os principais recursos da linguagem. Na próxima etapa do tutorial vamos ver como utilizar filtros de linguagem nos arquivos jade e alguns extras com algumas boas práticas com a linguagem.

Valeu! 🙂