Você provavelmente já ouviu falar Fantasma , a nova plataforma de blogs que conquistou o mundo dos blogs; é simples, é elegante, é sexy; tem aquela coisa de previsão ao vivo. O que há para não gostar?
Estou mudando para Fantasma , como muitos web designers, de um fundo WordPress. Mas antes que eu realmente conseguisse envolver minha cabeça WordPress 'funções de modelo, eu tentei dezenas, possivelmente centenas, de opções CMS. Alguns dos mais memoráveis incluem ExpressionEngine , Textpattern , o malfadado FrogCMS , um script antigo e antigo chamado CuteNews , e muitos mais.
Por um longo tempo o WordPress me deu tudo que eu precisava: funções poderosas de template; um suprimento infinito de plugins; apenas vendo o que eu poderia fazer.
Mas o WordPress tem sido muito mais do que um mecanismo de blog por algum tempo agora. Ele está se movendo de forma constante em direção ao reino da estrutura de algumas maneiras. Uma estrutura de publicação, se você quiser.
Cheguei ao ponto em que quero um software que blogue e é isso. Eu quero escrever meus posts em Markdown , digite algumas palavras-chave, adicione uma ou duas imagens e pressione "Publicar" e, em seguida, esqueça a coisa toda.
Acontece que eu não estou sozinho no meu desejo por uma plataforma de blogs simples. Os criadores por trás do Ghost se esforçaram ao máximo para remover todos os problemas que adicionamos ao processo de criação de blogs e construir uma plataforma de publicação rápida e simples que fará o trabalho. É uma fera totalmente diferente.
Ele opera com base na filosofia de que um CMS para blogs deve fazer uma coisa e fazê-lo bem. Você não verá nenhuma revista lançada nesta plataforma sem muita personalização. É um blog, e transformá-lo em qualquer outra coisa seria uma espécie de derrotar seu propósito.
Então, há o fato de que é construído sobre novas tecnologias. Ghost é construído em Node.js , que executa o código JavaScript no servidor e não no navegador. Ela é amada pelas mesmas pessoas que amam a hospedagem PaaS, e todos esses novos sistemas que pessoas como eu estão lutando para entender. De certo modo, tem sido preparado para o futuro desde o início. Faz parte da primeira geração de uma nova geração de CMS.
Lembre-se, na perspectiva do blogueiro, é apenas uma interface simples para blogar. Do ponto de vista do usuário final, nada realmente mudou, exceto talvez o tema do blog padrão pareça um pouco “plano”. Mas sob o capô, estamos vendo algo totalmente novo, e isso é uma coisa boa.
Instalando Ghost o caminho mais fácil.
Normalmente, você deve instalar um componente ou dois separadamente para instalar e executar o Ghost em uma máquina local. Você teria que instalar o Node.js, e então você teria que entrar e começar a instalar alguns pacotes de Node extras manualmente a partir da linha de comando.
É isso mesmo, a configuração típica do Ghost requer o uso da linha de comando. Para pessoas mais acostumadas com o processo de “configuração de cinco minutos” do WordPress com bancos de dados MySQL e um instalador gráfico, isso pode ser desconfortável.
Pode ser uma dor no pescoço se você não estiver acostumado a usar a linha de comando em uma máquina Mac ou Linux.
Felizmente, as pessoas amáveis em Bitnami fez instaladores gráficos para Windows, Mac e Linux.
Aqui estão todos os passos que você precisa seguir:
Como o instalador fornece todos os componentes necessários, como o Node.js e um mini-servidor, o diretório de arquivos não é exatamente simples.
Você precisará abrir a pasta em que instalou o Ghost e navegar para apps / ghost / htdocs / . Essa é a instalação real do Ghost.
Os temas estão localizados em apps / ghost / htdocs / content / themes / .
Os temas do Ghost são bastante fáceis de criar, contanto que você saiba HTML e CSS. O conhecimento de programação é útil, mas não estritamente necessário. O sistema de templates do Ghost é simples, e até bastante intuitivo, se você criou temas para o WordP… ahem, outros CMSs antes.
Eu sei eu sei. A comparação com o WordPress é antiga. Mas esse software tem dominado o mercado há anos - assim como o Photoshop tem para imagens - as comparações são inevitáveis. Neste caso, eles são úteis.
As pessoas que criaram temas do WordPress encontrarão algumas das estruturas de arquivos e linguagem de modelos para se familiarizarem, embora muito mais simples. As funções PHP do WordPress oferecem muita flexibilidade; mas eles também complicam o processo de codificação do tema.
Sistema de templates de Ghost (construído com Guidão ), é semântica, poderosa e muito mais legível do que as funções brutas do PHP com as quais estamos acostumados a trabalhar. Pessoalmente, acho muito mais fácil de usar.
Por outro lado, significa puramente para construir blogs. Você não estará construindo um site de notícias híbrido / rede social / fórum com essa coisa. Mais simples, mas limitado. Esse é o trade-off inerente a toda a plataforma.
Criando um tema básico para o Ghost.
Agora, se você assistiu ao vídeo (você realmente deveria), você saberá o básico. Você terá sua instalação do Ghost no modo de desenvolvimento e terá um tema muito limitado para trabalhar.
Para recapitular, tecnicamente, você só precisa de três arquivos para criar um tema do Ghost:
index.hbs (This template will list your posts)post.hbs (This will display a single post)package.json (This contains theme information)
No entanto, existem outros modelos básicos que você provavelmente deseja incluir. É claro que você pode criar modelos personalizados para páginas, postagens, autores, tags e muito mais. Nós vamos chegar a tudo isso ao longo do tempo.
Por enquanto, quero me concentrar apenas no básico: estrutura do tema, extensão de arquivos de modelo e onde colocar todo o HTML. Isso significa adicionar alguns arquivos e pastas extras ao nosso tema do Ghost. Vamos dar uma olhada na estrutura revisada:
default.hbsindex.hbspage.hbspost.hbspackage.jsonassets/css/images/javascript/partials/ (Just examples, here. Not required.)navigation.hbsloop.hbs
default.hbs irá atuar como base do seu tema. Seu ,
e tags vai aqui. Todos os outros modelos serão renderizados "dentro" deste. Agora você não precisa fazer isso dessa maneira; mas é uma prática padrão, e é altamente recomendada pelos próprios desenvolvedores do Ghost.page.hbs é exatamente o que você acha que é, o modelo para páginas estáticas. A pasta de ativos é bastante autoexplicativa.
A pasta partials / é onde você guardaria os bits e os pedaços de código que você usa mais de uma vez, em vários modelos. Por exemplo, o navigation.hbs pode incluir o nome / logotipo do site e a navegação principal. O loop.hbs pode gerar uma lista de posts com algum HTML genérico e estilo. Isso pode ser usado em vários lugares no site.
Então, vamos mostrar exatamente o quão simples pode ser o modelo. Primeiro, vamos configurar nosso arquivo default.hbs :
{{! Here we see the functions for page titles and descriptions. }}{{meta_title}} {{! Anything in the assets/ folder can be easily linked to, like so: }}{{! This function here outputs meta keywords, some styling information, stuff like that. }}{{ghost_head}}{{! Any .hbs file in the partials folder can be called in like this. }}{{> header}}{{! This is where the content of all the sub-templates will be output. }}{{{body}}}{{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }}{{ghost_foot}}
Agora vamos criar o template navigation.hbs , porque isso vai estar em todas as páginas:
{{! This should be fairly self-explanatory. }} {{@blog.title}}
{{! Each post excerpt will be displayed with this same markup. }}{{#foreach posts}}» {{/para cada}}{{! Links para as páginas seguintes e anteriores de links. Você pode definir quantos links estão em cada página no painel de administração. }}{{paginação}}
Agora vamos juntar tudo com o template index.hbs , que também funcionará como home page, a menos que você especifique o contrário. O código para isso, vendo como dividimos e organizamos a maior parte do HTML em outro lugar, é muito simples:
{{!< default}}{{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}}{{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }}{{> loop}}
E é isso. Eu te disse que era simples!
Se você tiver problemas, confira o tema padrão do Ghost e o documentação . Brinque com o HTML, brinque com o sistema de modelos e comece a estilizar seu tema.
Da próxima vez, vamos cavar um pouco mais. Enquanto isso, divirta-se!
Usos da imagem em destaque Imagem fantasma via Shutterstock.