Criando um blog com Jekyll - Parte 2
Introdução
Dando continuidade ao tutorial de como criar um blog com Jekyll, hoje vamos configurar a pasta _layouts e a página inicial do blog, o arquivo index.html. Você pode acompanhar o andamento do nosso tutorial no GitHub. Se você ainda não viu a primeira parte, corre lá e depois volta aqui:
Pasta _layouts
Na pasta _layouts, tem - por padrão - 3 arquivos:
- default.html: estrutura padrão das páginas.
- page.html: estrutura de páginas secundárias.
- post.html: estrutura dos posts.
Nós iremos manter todas elas, vamos agora editá-las. Lembrando que não existe espaço entre as chaves.
default.html
<!DOCTYPE html>
<html>
<!-- Incui o arquivo head.html -->
{ % include head.html % }
<body>
<!-- Inclui o arquivo header.html -->
{ % include header.html % }
<div class="page-content">
<!-- Inclui o conteúdo da página -->
{ { content } }
</div>
<!-- Inclui o arquivo footer.html -->
{ % include footer.html % }
</body>
</html>Nós mantemos a maior parte do arquivo, apenas retiramos o wrapper da página. Aqui estamos incluindo os arquivos head.html, header.html e footer.html que estão na pasta _includes que configuramos na parte anterior.
page.html
---
layout: default
---
<article class="post">
<!-- Chamamos o título da página -->
<h1 class="post-title">{ { page.title } }</h1>
<!-- Incluimos o conteúdo da página -->
<div class="post-content">
{ { content } }
</div>
</article>Incluimos a estrutura do arquivo default.html, e colocamos uma estrutura simples com apenas o título e o conteúdo da página.
post.html
---
layout: default
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<!-- Chamamos o título do post -->
<h1 class="post-title" itemprop="name headline">{ { page.title } }</h1>
<!-- Incluimos a data e o autor do post -->
<p class="post-meta"><time datetime="{ { page.date | date_to_xmlschema } }" itemprop="datePublished">{ { page.date | date: "%-d %b, %Y" } }</time>{ % if page.author % } | <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{ { page.author } }</span></span>{ % endif % }</p>
<!-- Icluimos o conteúdo do post -->
<div class="post-content" itemprop="articleBody">
{ { content } }
</div>
<!-- Incluimos os botões de compartilhamento -->
{ % include share.html % }
<!-- Incluimos a seção com o autor do post -->
{ % include author.html % }
<!-- Incluimos os comentários -->
{ % include comments.html % }
</article>Aqui também incluimos o arquivo default.html, abaixo do título incluimos a data e o autor do post. Depois do conteúdo, incluimos os arquivos que criamos na parte anterior: share.html, author.html e comments.html.
Página inicial do blog: index.html
Terminamos as estruturas dos layouts, agora vamos editar nossa página inicial. Ela ficou assim:
---
layout: default
---
<div class="home">
<ul class="post-list">
<!-- Procura os posts no blog e lista eles -->
{ % for post in site.posts % }
<li>
<!-- Inclui o título com link do post -->
<h2>
<a class="post-link" href="{ { post.url | prepend: site.baseurl } }">{ { post.title } }</a>
</h2>
<!-- Inclui a data e autor do post -->
<span class="post-meta">{ { post.date | date: "%-d %b, %Y" } } { % if page.author % } | { { page.author } } { % endif % }</span>
<!-- Inclui a descrição do post -->
<p class="post-description">{ { post.description } }</p>
<!-- Inclui um Leia mais com o link do post -->
<a href="{ { post.permalink | prepend: site.baseurl } }"> Leia mais sobre { { post.title } }...</a>
<!-- Inclui as tags do post -->
{ % include tags.html % }
</li>
<hr>
{ % endfor % }
</ul>
<!-- Incrição do feed -->
<p class="rss-subscribe"> Inscreva-se <a href="{ { "/feed.xml" | prepend: site.baseurl } }">via RSS</a></p>
</div>Listamos os posts com:
- Título
- Data e autor do post
- Descrição do post
- Leia mais com o link do post
- Tags do post
No final da página, tem um link para subscrição do feed do blog.
Conclusão
Chegamos ao final da segunda parte, configuramos a pasta _layouts e a página inicial do blog. Até agora já temos prontos as pastas: _includes e _layouts e os arquivos: _config.yml e index.html. Na próxima parte vamos editar nosso CSS, adicionar JavaScript e aprender a escrever posts.
Dúvida? Comente!
Até a próxima!
