Temas do Ghost

Comece a criar seus prprios temas para o Ghost

Switching Theme
What is Handlebars?
About Ghost themes
File Structure
Create your own
Built-in Helpers
Troubleshooting Themes
Mudando de Tema
Os temas para o Ghost esto em content/themes/
Se voc quer usar um tema diferente do padro Casper, d uma olhada nos
nossos temas personalizados na nosso marketplace gallery
(http://marketplace.ghost.org/). Baixe o tema de sua escolha, extraia ele e
coloque em content/themes ao lado do Casper.
Se voc quer fazer seu prprio, ns recomendamos copiar e renomear o
diretrio casper e editar os templates para parecerem e funcionarem da
maneira que voc quer.
Para mudar para seu mais novo tema:
1. Reinicie o Ghost. Nesse momento o Ghost no sabe que voc colocou uma
nova pasta dentro de content/themes ento precisamos reiniciar ele
2. Entre na parte de administrao do Ghost e navegue para
/ghost/settings/general/
3. Selecione o nome do tema nas opes 'Theme', no menu dropdown
4. Clique em 'Salvar'
5. Visite seu blog e maravilhe-se com seu novo tema.
** Nota: ** Se voc est no com um servio de hospedagem do Ghost, ao
invs de uma auto-instalao, para mudar o tema que voc precisa ir para a
adminsitrao do seu blog (https://ghost.org/blogs/) e clique em "Editar" ao
lado do nome do seu blog.
O que so Handlebars?
Handlebars (http://handlebarsjs.com/) a linguagem de templates usada pelo
Ghost.
A handlebars fornece os poderes necessrios para criar templates
semnticos efetivamente e sem frustraes.
Se voc est querendo comear a escrever seu prprio tema, voc
porovavelmente ir querer se familiarizar com a sintaxe do Handlebars primeiro.
D uma lida na documentao do handlebars
(http://handlebarsjs.com/expressions.html), ou veja esse tutorial do Treehouse
(http://blog.teamtreehouse.com/getting-started-with-handlebars-js) voc pode
pular a primeira seo da instalao e uso (ns fizemos essa parte para voc) e
focar na parte de Basic Expressions.
Ghost tambm faz uso de uma biblioteca adicional chamada express-hbs , que
acrescenta algumas novas funcionalidades (https://github.com/barc/express-
hbs#syntax) ao handlebars e o Ghost acaba se utilizando muito de, como por
exemplo, as funcionalidades de layouts e partials.
Sobre os Temas do Ghost
Temas do Ghost so para ser simples de construir e manter. Eles se guiam por
uma grande separao entre os templates (o HTML) e qualquer arquivo de lgica
(JavaScript). A handlebars so (quase) sem lgica e refora essa separao,
fornecendo o mecanismo auxiliar para que a lgica para a exibio de contedo
permanea separada e independente. Esta separao necessria para facilitar
a colaborao entre designers e desenvolvedores na construo de temas.
Templates Handlebars so hierrquicos (um template pode extender outro
template) e tambm suporta templates parciais. O Ghost usa essas funes para
reduzir a duplicao de cdigo e manter os templates individuais focados em
fazer um nico trabalho, e fazer isso bem. Uma boa estrutura de tema se torna
fcil de atualizar, e manter esses componentes separados faz ser muito mais fcil
reutilizar esses arquivos pelos temas.
Ns realmente esperamos que voc vai desfrutar de nossa abordagem para
fazer temas.
A Estrutura de Arquivos dos Temas do
Ghost
A estrutura recomendada essa:
.
/assets
| /css
| screen.css
| /fonts
| /images
| /js
default.hbs
index.hbs [obrigatrio]
post.hbs [obrigatrio]
Por enquanto no h nenhuma exigncia de que default.hbs ou quaisquer
outra pasta exista. recomendado que voc mantenha os seus assets dentro de
uma pasta chamada asset e fazer uso da {{asset}} helper para conter os
seus css, js, imagem, fonte e outros arquivos para o seu tema.
index.hbs e post.hbs so obrigatrios - Ghost no vai funcionar se estes
dois arquivos no estiverem presentes.
Nota: enquanto edita, um arquivo existente, as modificaes so geradas em
tempo real, mas voc ter que reiniciar o Ghost cada vez que voc adicionar ou
remover um arquivo a partir do diretrio do tema para que possa ser
reconhecido e utilizado.
Partials
Voc tambm pode adicionar, opcionalmente, um partials do diretrio de
seu tema. Isto deve incluir todos os templates que deseja usar no seu blog, por
exemplo list-post.hbs pode incluir o seu template para a mostrar um nico
post em uma lista, que pode ento ser usada na pgina inicial, e, no futuro, de
arquivamento. Para emitir o list-post.hbs por exemplo, voc usaria
{{> list-post}} . partials tambm onde voc pode colocar modelos
para substituir os modelos integrados utilizados por certos helpers como
paginao. Incluindo o arquivo pagination.hbs dentro da partials
permitir que voc especificar seu prprio HTML para a paginao.
default.hbs
Esse o layout padro, ou template base, que contm todas as partes chatas de
HTML que tm de aparecer em todas as pginas - o <html> , <head> e
<body> tags que esto junto com o {{ghost_head}} e {{ghost_foot}}
helpers, assim como qualquer cdigo HTML que compe um cabealho e rodap
repetido para o blog.
O template padro contm a handlebars {{{body}}} para indicar onde o
contedo vai estar partir de templates que estendem o templates padro.
Os templates para as pginas que tem {{!< default}} na primeira linha para
especificar que eles estendem o template padro, e que o seu contedo deve ser
colocado no lugar onde default.hbs {{{body}}} est definida.
index.hbs
Este o template para a pgina inicial, e se estende default.hbs . Para a
pgina inicial passada uma lista de artigos que devem ser exibidos, e
index.hbs define como cada um dos artigos devem ser exibidos.
No Casper (o tema padro atual), a pgina inicial tem um grande cabealho que
usa @blog como configuraes globais para a sada do logotipo, ttulo e
descrio do blog. Isto seguido por um usando o helper {{#foreach}} para
produzir uma lista dos posts mais recentes.
post.hbs
Este o template para um nico post, que tambm se estende default.hbs .
No Casper (o tema padro atual), o modelo nico post tem a sua prpria header,
utilizando tambm @blog como configuraes globais e, em seguida, usa o
assessor de dados {{#post}} para a sada de todos os detalhes dos posts.
page.hbs
Voc pode, opcionalmente, fornecer um template para pginas estticas. Se o
tema no tem um template page.hbs , o Ghost usar o padro post.hbs .
As pginas tm exatamente os mesmos dados disponveis como um post, elas
simplesmente no aparecem na lista de posts.
error.hbs
Voc pode, opcionalmente, fornecer um template de erro para qualquer erro
404 ou 500. Se o tema no fornece um template error.hbs o Ghost usar seu
padro.
Para ver como acessar os dados sobre um erro, de uma olhada no template de
erro padro do Ghost, que est localizado em
/core/server/views/user-error.hbs
Estilizao de posts & visualizao
Ao construir temas para o Ghost por favor, considere o escopo de suas classes, e
em particular os seus IDs, para tentar evitar confrontos entre o seu estilo
principal e o estilo dos seus posts. Voc nunca sabe quando um nome de classe
ou em particular um ID (por causa da auto-gerao de IDs para ttulos) vai ser
usado dentro de um post. Por isso melhor sempre coisas de escopo para uma
determinada parte da pgina. Por exemplo #meu-id poderia igualar as coisas
que voc no espera enquanto #meuthema-meu-id seria mais seguro.
Ghost tem como objetivo oferecer uma pr-visualizao realista de suas
mensagens com o seu editor de tela dividida, mas para isso, preciso carregar
um estilo personalizado de um tema para um post no site de administrao. Este
recurso ainda no foi implementado, mas altamente recomendvel manter
seus estilos de posts em um arquivo separado (post.css) a partir de outros
estilos para o seu tema (style.css) de modo que voc vai rapidamente ser capaz
de tirar proveito desse recurso na futuro.
Criando o seu prprio tema
Crie seu prprio tema para o Ghost copiando Casper, ou adicionando uma nova
pasta com o contedo no diretrio content/themes com o nome de seu
tema, como por exemplo meu-tema (nomes devem estar em letras minsculas, e
conter apenas letras, nmeros e hfens). Em seguida, adicione dois arquivos
vazios para sua nova pasta tema: index.hbs e post.hbs. Ele no vai mostrar nada,
mas isso efetivamente um tema vlido.
A lista de posts
index.hbs entregou um objeto chamado posts , que pode ser usado com o
helper foreach para a sada de cada post. Por exemplo
{{#foreach posts}}
// Aqui estamos no contexto de um nico post
// O que voc colocar aqui executado para cada posts
{{/foreach}}
Veja a seo sobre o helper {{#foreach}} para mais detalhes.
Paginao
Veja a seo sobre o helper {{pagination}} para mais detalhes.
Produzir mensagens individuais
Uma vez que voc est no contexto de um nico post, seja por loop atravs da
lista de postagens com foreach ou dentro de post.hbs voc tem acesso s
propriedades de um post.
Por enquanto, estes so:
id post id
title ttulo do post
url a URL relativa para de um post
content HTML do post
published_at Data que o post foi publicado
author detalhes completos do autor do post (veja abaixo para mais
detalhes)
Each of these properties can be output using the standard handlebars
expression, e.g. {{title}} .
Cada uma destas propriedades pode ser produzido usando a handlebars
padro, por exemplo, {{title}} .
Notas:
the content property is overridden and output by the {{content}}
helper which ensures the HTML is output safely & correctly. See the
section on the {{content}} helper for more info. a propriedade de
contedo substitudo pelo helper {{content}} que garante o HTML
saia com segurana e corretamente. Veja a seo sobre o helper
{{content}} para mais informaes.
a propriedade url fornecida pelo helper {{url}} Veja a seo sobre o
helper {{url}} para mais informaes.
Autor do post
Quando esta dentro do contexto de um nico post, os seguintes dados do autor
esto disponveis:
{{author.name}} the name of the author
{{author.email}} the author's email address
{{author.bio}} the author's bio
{{author.website}} the author's website
{{author.image}} the author's profile image
{{author.cover}} the author's cover image
Voc pode usar apenas {{author}} para ter o nome do autor.
Isto tambm pode ser feito por meio de um bloco de expresso:
{{#author}}
<a href="mailto:{{email}}">Email {{name}}</a>
{{/author}}
Tags do Post
Quando dentro do contexto de um nico post, os seguintes dados de tag esto
disponveis
{{tag.name}} nome da tag
Voc pode usar apenas {{tags}} para ter uma lista personalizada de tags, isso
tambm pode ser feito usando uma expresso de bloco:
<ul>
{{#tags}}
<li>{{name}}</li>
{{/tags}}
</ul>
Veja a seo sobre o helper de {{tags}} para mais detalhes das opes.
Configuraes Globais
Temas para o Ghost tm acesso a uma srie de configuraes globais atravs do
assessor de dados global @Blog .
{{@blog.url}} a url especifica para esta env esta em config.js
{{@blog.title}} o ttulo do blog na pgina de configuraes
{{@blog.description}} a descrio do blog a partir da pgina de
configuraes
{{@blog.logo}} o logotipo do blog retirado da pgina de
configuraes
Built-in Helpers
O Ghost tem diversos Helpers que lhe do as ferramentas que voc precisa para
construir o seu tema. Helpers so classificados em dois tipos: block e output
helpers
Block Helpers (http://handlebarsjs.com/block_helpers.html) tem uma marca
de incio e fim Exemplo: {{#foreach}}{{/foreach}} . O contexto entre as
tags muda e esses helpers tambm podem fornecer propriedades adicionais que
voc pode acessar com o smbolo '@'.
Output Helpers so muito parecidos com as expresses utilizadas para sada de
dados, por exemplo {{content}} . Eles realizam operaes teis sobre os
dados antes de ger-lo, e muitas vezes lhe proporcionam opes de como
formatar os dados. Alguns output helpers usam modelos para formatar os
dados com HTML. Alguns output helpers tambm so block helpers, fornecendo
uma variao da sua funcionalidade.
foreach
Tipo de Helper: block
Opicionais: columns (nmero)
{{#foreach}} um helper de loop especial projetado para trabalhar com
listas de posts. Por padro, cada helper no handlebars adiciona as propriedades
privadas @index como arrays e @key como objetos, que pode ser usado
dentro da cada loop.
foreach estende e adiciona as propriedades privadas adicionais de @first ,
@last , @even , @odd , @rowStart e @rowEnd para arrays e objetos. Isso
pode ser usado para produzir layouts mais complexos para as listas de post e
outros contedos. Para exemplos, veja abaixo:
@first & @last
O exemplo a seguir verifica atravs de um array ou objeto por exemplo, posts e
testa se a primeira entrada.
{{#foreach posts}}
{{#if @first}}
<div>Primeiro post</div>
{{/if}}
{{/foreach}}
We can also nest if statements to check multiple properties. In this example we
are able to output the first and last post separately to other posts.
Podemos tambm aninhar declaraes de if para verificar vrias
propriedades. Neste exemplo, possivel mostrar o primeiro e ltimo post
separado para outros lugares.
{{#foreach posts}}
{{#if @first}}
<div>Primeiro post</div>
{{else}}
{{#if @last}}
<div>ltimo post</div>
{{else}}
<div>Todos os outros posts</div>
{{/if}}
{{/if}}
{{/foreach}}
@even & @odd
O exemplo a seguir adiciona uma classe de par ou mpar, o que poderia ser
utilizada para o contedo de listras de zebra:
{{#foreach posts}}
<div class="{{#if @even}}even{{else}}odd{{/if}}">{{title}}</div>
{{/foreach}}
@rowStart & @rowEnd
The following example shows you how to pass in a column argument so that you
can set properties for the first and last element in a row. This allows for
outputting content in a grid layout.
O exemplo a seguir mostra como passar um argumento de coluna, de modo que
voc pode definir propriedades para o primeiro e ltimo elemento em uma linha.
Isto permite a sada de contedo em um layout em grid.
{{#foreach posts columns=3}}
<li class="{{#if @rowStart}}Primeiro{{/if}}{{#if @rowEnd}}ltimo{{/if}
}">{{title}}</li>
{{/foreach}}
content
Tipo de Helper: output
Opicionais: words (nmero), characters (nmero) [por pado mostra
todos]
{{content}} um helper muito simples de ser usado para a sada de
contedo do post. Ele garante que o seu HTML recebe sada corretamente.
Voc pode limitar a quantidade de contedo HTML de sada, passando um dos
opcionais:
{{content words="100"}} produzir apenas 100 palavras com as tags HTML
corretamente combinados.
excerpt
Tipo de Helper: output
Opicionais: words ( nmero), characters ( nmero) [por pado mostra
50 palavras]
{{excerpt}} sadas de contedo, porm retira todas as tags HTML. Isto bem
til para a criao de trechos de posts.
Voc pode limitar a quantidade de texto para a sada, passando uma das opes:
{{excerpt characters="140"}} produzir 140 caracteres de texto.
tags
Tipo de Helper: output
Opicionais: separator (string, default ", "), suffix (string), prefix
(string)
{{tags}} um auxiliar para a sada de uma lista de tags para um post
especfico. O padro uma lista separada por vrgula:
// a saida algo como 'minha-tag, minha-outra-tag, mais-tags'
{{tags}}
mas voc pode personalizar o separador entre tags:
// a saida algo como 'minha-tag | minha-outra-tag | mais tags'
{{tags separator=" | "}}
Alm de passar um prefixo ou sufixo opcional.
// a saida algo como 'Tagueado como: minha-tag | minha-outra-tag | mais
tags'
{{tags separator=" | " prefix="Tagueado como:"}}
date
Tipo de Helper: output
Opicionais: format (formato de data, default MMM Do, YYYY), timeago
(boolean)
{{date}} um auxiliar de formatao para datas em vrios formatos. Voc
pode passar uma data e uma string para formatar uma data:
// a saida algo como 'Julho 11, 2014'
{{date published_at format="MMMM DD, YYYY"}}
Ou voc pode passar uma flag para obter horas atrs:
// a saida algo como '5 minutos atrs'
{{date published_at timeago="true"}}
Se voc chamar {{date}} sem nenhum formato, o padro MMM Do, YYYY.
Se voc chamar {{date}} no contexto de um post sem dizer quais data para
exibir, o padro ser publicado em .
Se voc chamar {{date}} fora do contexto de um post sem dizer quais data
para exibir, o padro ser a data atual.
date use moment.js (http://momentjs.com/) para formatar a data. Veja a
documentao (http://momentjs.com/docs/#/parsing/string-format/) para uma
explicao completa para todas as formas possveis de formatao de data.
encode
Tipo de Helper: output
Opicionais: nenhum
{{encode}} um output helper simples, que vai codificar uma string, de modo
que ele possa ser utilizada em uma URL.
O exemplo mais bvio de onde isso til mostrado na Casper's post.hbs ,
para um link de compartilhamento do twitter
<a class="icon-twitter" href="http://twitter.com/share?text={{encode title
}}&url={{url absolute="true"}}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235
');return false;">
<span class="hidden">Twitter</span>
</a>
Sem usar o helper {{encode}} no titulo do post, os espaos outros sinais de
pontuao no ttulo no seriam tratado corretamente.
url
Tipo de Helper: output
Opicionais: absolute
{{url}} gera a url relativa para o post quando esta dentro do contexto de um
post.
Voc pode forar o url helper para a sada de uma URL absoluta usando o
opicional absolute, por exemplo: {{url absolute="true"}}
asset
Tipo de Helper: output
Opicionais: nenhum
O {{asset}} existe para facilitar a gesto dos assets. Em primeiro lugar, ele
garante que o caminho relativo para um asset sempre correto,
independentemente de como Ghost est instalado. Ento, se o Ghost est
instalado em um subdiretrio, os caminhos para os arquivos ainda estaram
corretos, sem ter que usar URLs absolutas.
Em segundo lugar, ele permite que os assets a serem armazenadas em cache.
Todos os assets so acessados com ?v=####### que muda quando o Ghost
reiniciado e garante que os assets podem ser cachiados quando necessrio.
Em terceiro lugar, proporciona estabilidade para desenvolvedores de tema para
que, como a manipulao dos asset do Ghost e a sua gesto madura, os
desenvolvedores de tema no precisam fazer mais ajustes para os seus temas,
quanto eles utilizam o asset helper.
Finalmente, isso impe um pouco de estrutura em temas, exigindo uma pasta de
assets , o que significa que o Ghost saber onde seus assets, e o tema de
instalao esto, desta maneira torna mais fcil o live reloading no futuro.
Uso
Para usar o {{asset}} helper para a obter o caminho de um asset,
simplesmente fornecer-lhe o caminho para o recurso que voc deseja carregar,
com relao a pasta de asset .
// a saida algo como: <link rel="stylesheet" type="text/css" href="/path
/to/blog/assets/css/style.css?v=1234567" />
<link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />
// a saida algo como: <script type="text/javascript" src="/path/to/blog/
assets/js/index.js?v=1234567"></script>
<script type="text/javascript" src="{{asset "js/index.js"}}"></script>
Favicons
Favicons so uma ligeira exceo regra de como usar o asset helper, porque o
navegador sempre pede um favicon, independentemente do tema, e Ghost tem
como objetivo atender a esse pedido o mais rpido possvel.
Por padro {{asset "favicon.ico"}} funciona exatamente da mesma
maneira como pedido pelo navegador, servindo o favicon padro do Ghost a
partir da pasta compartilhada. Isso significa que o navegador no tem que
procurar o tema que o blog esta usando ou onde o tema est antes de do
navegador requisitar.
Se voc preferir usar um favicon personalizado, voc pode faz-lo, colocando um
favicon.ico na pasta de asset do seu tema e usando o asset helper com uma
barra inicial:
{{asset "/favicon.ico"}}
This trailing slash tells Ghost not to serve the default favicon, but to serve it from
the themes asset folder. Esta barra no final diz ao Ghost para no para mostrar o
favicon padro, mas para mostrar o faviocon da pasta de asset do tema.
pagination (pagination-helper)
Tipo de Helper: output, template-driven
Opicionais: nenhum (em breve)
{{pagination}} um helper dirigido ao template que gera um HTML para os
'posts' mais recentes e links dos posts mais velhos "se eles esto disponveis,
tambm diz que a pgina que voc est.
Voc pode substituir o HTML gerado pelo pagination helper, colocando um
arquivo chamado pagination.hbs dentro de
content/themes/your-theme/partials .
body_class
Tipo de Helper: output
Opicionais: nenhum
{{body_class}} classes destinadas a tag <body> em default.hbs , teis
para o direcionamento de estilo para pginas especficas.
post_class
Tipo de Helper: output
Opicionais: nenhum
{{post_class}} classes destinadas ao connteiner de post, til para setar
seus posts com estilos.
ghost_head
Tipo de Helper: output
Opicionais: nenhum
{{ghost_head}} Vem pouco antes da tag </head> em default.hbs ,
usado colocar as meta tags, scripts e estilos. Ser hookavel.
ghost_foot
Tipo de Helper: output
Opicionais: nenhum
{{ghost_foot}} Vem pouco antes da tag </body> em default.hbs ,
usado colocar scripts. Mostra o Jquery por padro. Ser hookavel.
meta_title
Tipo de Helper: output
Opicionais: nenhum
{{meta_title}} outputs the post title on posts, or otherwise the blog title.
Used for outputting title tags in the </head> block. E.g.
<title>{{meta_title}}</title> . Will be hookable.
mostra o ttulo do post nos posts, ou caso contrrio o ttulo do blog. Usado para
sada de tags de ttulo no bloco </head> . Por exemplo `. Ser hookavel.
meta_description
Tipo de Helper: output
Opicionais: nenhum
{{meta_description}} - no mostra nada (ainda) nos posts, gera a
descrio do blog em todas as outras pginas. Usado para mostra a meta tag
description. Por exemplo
<meta name="description" content="{{meta_description}}" /> .
Ser hookavel.
Resoluo de Problemas nos Temas
1. Eu vejo o Erro: Falha ao achar os arquivos "index" ou "post"
Lovingly created and maintained by John O'Nolan (http://john.onolan.org) + Hannah Wolfe (http://erisds.co.uk) +
an amazing group of contributors (https://github.com/TryGhost/Ghost/contributors).
All code copyright (C) 2014 The Ghost Foundation - Released under the MIT
(http://tryghost.org/about/license.html) License.
All documentation is released under the Creative Commons By-3.0 (http://creativecommons.org/licenses/by/3.0/)
License.
Verifique se na pasta de seu tema contm um arquivo index.hbs e post.hbs
nomeados corretamente como so necessrios