‘Front Matter’ é onde o Jekyll começa a ser realmente cool.

[ tradução livre de: Jekyll docs ]

Não precisamos aprender os meandros do formato YAML até porque, no contexto de utilização que aqui exploramos, bastará saber as linhas que nos proporcionam as funcionalidades básicas.

Não existindo base de dados em Jekyll, é com recurso ao YAML que se atribuem dados de configuração transversalmente ao site e a cada página individualmente.

Para as configurações transversais ao site, o Jekyll utiliza o ficheiro “_config.yml” que se encontra na raiz da pasta do projecto:

_config.yml

Uma nota a reter: as alterações feitas neste ficheiro não têm impacto imediato no site. Isto porque o “_config.yml” é lido quando se executa o Jekyll e não volta a ser preciso. Assim, quando precisares alterar algo neste ficheiro, tens de parar a execução (ponto 4 de “Utilização básica”) e voltar a executá-lo (ponto 3 do mesmo artigo).

Front Matter

É no Front Matter que atribuimos dados de configuração e meta-dados específicos a cada página. Este, está contido num bloco entre triplos hifens e localizar-se no início do documento.

Neste exemplo simples estão definidos a descrição da página e o layout que o Jekyll vai utilizar para a compilar.

--- layout: default description: Aqui descrevemos o conteúdo da página. --- |

Esta atribuição de valores a variáveis irá pemitir algumas “magias”, como estas apenas utilizando o id da página:

Destacar item do menu com class=”active”

Como em tudo, há várias formas de obter a class “active” no item do menu correspondente à secção ou página em que se está. A que se segue é a mais simples de todas as que encontrei.

Primeiro adicionamos um elemento único a cada página de secção correspondente a cada elemento do menu. Tomando o nosso projecto experimental como exemplo, consideremos o YAML da page1.html:

_config.yml

O id “page1”, para além de identificador único, funciona também como variável, e é com esta que vamos trabalhar. Consideremos o menu do nosso projecto: Os itens do menu estão na pasta “_includes” (mais à frente explico porquê) no ficheiro menu_principal_itens.html:

Itens do menu principal

Vamos desconstruir o li correspondente à secção “page1”:

Markup do li simples

Markup

Removendo o restante código (para analisar de seguida) ficamos com o html que já conhecemos das listas que compôem os menus.

Markup do li simples

YAML

Olhando para o código separado do resto fica mais fácil compreender:

YAML if statement

A declaração inicial significa “Se o id da página for igual a page1”.

YAML if

A razão de serem utilizados dois sinais de igual é o facto de apenas um = ser utilizado em programação para fazer comparações, sendo que dois == significa mesmo igual.

Depois vem a class “active” após a qual vem o fecho do if

YAML endif

Assim, o que isto significa é: Se a página tiver o id “page1”, acrescenta a class “active” a este li. É assim que o menu do nosso projecto experimental está configurado, pelo que poderás testar esta “magia” no browser.

Outra utilização do id da página

Uma coisa que às vezes dá jeito é ter uma class no body de cada página de forma a permitir overries específicos. Como esta variável representa o id da página, bastará utilizá-la no body. Tendo em conta que o mesmo markup vai servir para compilar todas as páginas que utilizem o mesmo layout, a abstracção que a variável permite é, para nós designers, pura magia:

YAML id variable

Assim, e tal como acontece com o nosso projecto, cada página é compilada com o seu id único, sem que para tal tenhamos de ter um bloco de markup para cada página. #win!

Depois compilada a página, podemos ver o identificador único “page1” como class no markup final:

YAML id variable

Para mais informação sobre YAML: Jekyll Front Matter.