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.