Do WordPress para o Ghost – Parte 04: crie seu próprio template

No final do artigo anterior comentei que iria falar um pouco sobre o painel administrativo do Ghost, mas resolvi continuar falando de templates. Desta vez, quero mostrar um pouco da estrutura básica de um novo template.

O mais importante é saber que o desenvolvimento de temas para Ghost não é nenhum bicho de sete cabeças – muito pelo contrário – com um pouco de paciência e atenção, seu primeiro layout estará pronto para ir ao ar em poucas horas.

Agora chega de papo e como diria meu pai, vamos colocar a mão na massa!

Estrutura básica de temas Ghost

O mais importante no desenvolvimento de templates é entender a sua anatomia e estrutura de pastas e arquivos.

No caso do Ghost, ela deve ser parecida com isso:

/css
- style.css
/fonts
/img
/js
/lib
/partials
default.hbs
index.hbs (obrigatório)
post.hbs (obrigatório)

Note que é obrigatório ter na estrutura do seu tema os arquivos index.hbs e post.hbs. O default.hbs também é muito importante, pois é nele que você define o layout principal da página (header – conteúdo – footer). É possível ainda, e até recomendado, que o cabeçalho e rodapé possuam arquivos separados (partials), mas vamos deixar isso para depois.

O arquivo index.hbs é utilizado para a página inicial e demais que mostram a listagem de postagens, como a de uma categoria (tag) específica. Já o post.hbs é o arquivo que “monta” o post único.

Preparando seu ambiente

Você pode desenvolver um novo tema Ghost utilizando algum outro como base, assim poderá utiliza-lo como framework e deixar de lado muitas tarefas desnecessárias. Você pode utilizar o Casper.

A primeira coisa a se fazer é copiar o tema para dentro da pasta /content/themes. Não esqueça de renomear o nome da pasta. Para exemplificar, vamos mudar para “meutema”. A estrutura de pastas deve ficar assim:

ghost/content/themes/meutema/

Dica importante: sempre que criar ou configurar algo novo no Ghost é necessário reiniciar a aplicação para que ela tenha efeito. Por isso, caso acesse a área administrativa do Ghost e não encontre o seu novo tema, acesse seu servidor e digite o comando:

ghost restart

Agora você pode alterar o CSS e substituir todas as imagens e ícones pelos seus próprios. Caso as alterações não surtam efeito, será necessário reiniciar a aplicação novamente.

Modelo de default.hbs

Este é um modelo básico do arquivo default.hbs:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    {{ghost_head}}
</head>
<body class="{{body_class}}">
    <div class="wrap">
      {{! Todos os conteudos dos sub-templates serao carregados aqui }}
      {{{body}}}

      {{ghost_foot}}
    </div>
</body>
</html>

Este arquivo é a base do layout, com as chamadas para o CSS, JS e etc, além de definir onde o conteúdo principal será carregado. Ele pode ser incrementado e até existem algumas partes que não coloquei, para deixar tudo mais simples. Você pode trabalhar com “partials”, mas pretendo falar disso em outro artigo/vídeo.

Modelo de index.hbs

<header>
  <h1 class="page-title">{{@blog.title}}</h1>
  <h2 class="page-description">{{@blog.description}}</h2>    
</header>

<main role="main">
<!-- Post loop -->
  {{#foreach posts}}
	<article class="{{post_class}}">
    <header class="post-header">
   	<h2><a href="{{url}}">{{title}}</a></h2>
    </header>
    <section class="post-excerpt">
 	<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">...</a></p>
    </section>
    <footer class="post-meta">
      {{#if author.profile_image}}<img src="{{author.profile_image}}" alt="Foto do autor" />{{/if}}
      {{author}}
      {{tags prefix=" on "}}
      <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
    </footer>
  </article>
  {{/foreach}}

</main>

<!-- Paginacao mostrada em todas as paginas -->
{{pagination}}

Modelo post.hbs

Este sub-template, ou arquivo, é o responsável por “montar” a página de post único. Apesar de bem simples, é uma das mais importantes.

{{#post}}
              
<article class="{{post_class}}">
  <header class="post-header">
    <h1 class="post-title">{{title}}</h1>
    <section class="post-meta">
      <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">
        {{date format="DD MMMM YYYY"}}
      </time> 
      {{tags prefix=" on "}}
    </section>  
  </header>
  <section class="post-content">
    {{content}}
  </section>     
</article>

{{/post}}

Conclusão

Criando apenas três arquivos é possível desenvolver um tema para o Ghost. Claro que neste exemplo faltam muitas coisas, por isso decidi dividi-lo em dois. No próximo artigo vou gravar um vídeo demonstrando tudo isso que falei e depois colocar para rodar.

Deixe nos comentários se quer ver algo diferente no vídeo e se este conteúdo ajudou de alguma forma o seu projeto.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: