Consideremos a pasta do nosso projecto “Jekyll paraDesigners” para acompanhar o raciocínio que conduz às soluções nela incluídas.

Sugiro observar os ficheiros no editor para acompanhar a explicação porque é mais intuitivo do que ficar apenas pelas imagens.

Liquid

Liquid é a linguagem que nos permite “chamar” templates (fragmentos de HTML que se repetem) e utilizar variáveis definidas no YAML (_config.yml e Front Matter).

Como nas restantes, vamos apenas referir e utilizar o básico. À medida que te fores familiarizando com estas tecnologias, poderás então acrescentar outras funcionalidades que precises.

Layouts

O projecto tem dois tipos diferentes de layout: a página de secção e a página de detalhe. Sendo que existem elementos comuns aos dois, como o head, cabeçalho, footer, etc, e o objectivo é não repetir código, fazemos depender estes dois layouts de um outro, o default.

Assim, no “default” colocamos tudo o que é comum e, onde haverá diferenças, temos a variável de Liquid “content”:

Layout "default"

Esta variável encontra-se apenas nos Layouts e é onde a colocarmos que o Jekyll irá inserir o conteúdo respectivo.

Layout "default"

Assim, para compilar a Página de Secção 1 (page1.html) o Jekyll coloca o seu conteúdo no lugar da variável “content” no layout “section” e este por sua vez será inserido no lugar da variável “content” do layout “default”:

Esquema dos layouts

Este esquema reflecte o reaproveitamento do código de forma a que este não se repita e, a ter de se alterar, fazê-lo apenas uma vez e essa alteração reflectir-se em todo o lado.

Mas para além da estrutura, existem outras situações onde o código se pode repetir, como por exemplo o menu principal, que queremos mostrar no topo e no rodapé. Para isso temos os templates.

Templates

Os templates são fragmentos de HTML que queremos reutilizar em diferentes localizações na mesma página, ou apenas em algumas delas. Estes guardam-se na pasta _includes e são chamados onde quer que se queira que estes apareçam. Para melhor exemplificar este comportamento, vamos considerar a reutilização de conteúdo simulado (ou “dummy”) do nosso projecto e como ter o menu principal em diferentes localizações na página sem repetir os seus itens.

Reutilização de conteúdo simulado

Porque o nosso projecto é basicamente uma maquete funcional com conteúdo simulado, criei templates (na pasta _includes) destes conteúdos para popular as páginas onde o mesmo representa o conteúdo final.

Esta utilização dos templates permite simular a página com o tipo de conteúdo que terá em produção. Por exemplo, o conteúdo simulado no template “conteudo_destaque_1.html” está a ser utilizado na Página 1 (page1.html) e na Página 4 (page4.html). A forma de “chamar” um template faz-se utilizando a tag de Liquid:

Tag de Liquid para incluir um template

Assim, este markup…

Template de conteúdo simulado

…será compilado nas duas páginas que chamam este template:

Tag de Liquid a chamar template Tag de Liquid a chamar template

Outros elementos como a paginação, a caixa de pesquisa e a lista de redes sociais, que se prevê que sejam utilizados em vários sítios distintos do site, são também elegíveis para

Itens do menu

No nosso projecto o menu repete-se no topo e no rodapé e esta é uma forma de, sempre que actualizamos as secções do mesmo, fazê-lo apenas uma vez e a actualização feita reflectir-se em todas as localizações da página onde esse template for chamado com a tag de Liquid:

Tag de Liquid a chamar os itens do menu

Assim, o conteúdo deste template…

Template com os itens do menu

…será compilado nestas duas localizações:

Template com os itens do menu

E isto permite, entre outras coisas, a atribuição de diferentes classes a cada ul para efeitos de estilo diferenciado.