Criando um blog com Jekyll - Parte 2

| #frontend #jekyll

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!


Mateus Medeiros - Desenvolvedor Front End

Autor

Mateus Medeiros

Desenvolvedor Front End apaixonado por novas tecnologias.

Comentários