Transcrições
1. Introdução: Olá e seja bem-vindo ao Ghost Theme Development: Como personalizar sua publicação fantasma. Sou Christopher Dodd, sou um desenvolvedor web freelancer e professor de
topo aqui no SkillShare.com, cobrindo tudo o desenvolvimento web e freelancer online. Na aula de hoje, aprenderemos os fundamentos do desenvolvimento do tema Ghost para lhe dar controle total da aparência de sua publicação Ghost. Para aqueles de vocês que não estão familiarizados com o Ghost, eu simplesmente descreveria isso como a alternativa moderna e
mais eficiente ao WordPress. É super rápido e vem sem o inchaço estendido do WordPress, tornando-o uma plataforma ideal para hospedar um blog ou outra publicação online. É precisamente por isso que decidi mudar meu próprio site pessoal para o Ghost em 2021 e vi uma enorme melhoria de velocidade quando comparado ao WordPress. Então, se você estiver pronto para aprender a desenvolver e personalizar temas Ghost, clique no próximo vídeo e eu o verei por dentro.
2. Por que usar o Ghost: Antes de mostrar como instalar o Ghost em seu computador, quero falar rapidamente sobre por que recomendo o Ghost, pois tenho certeza de que muitos de vocês assistindo não ouviram muito sobre essa plataforma antes. Ghost foi fundada em abril de 2013, aproximadamente 10 anos após o WordPress, após uma campanha bem sucedida no Kickstarter para criar uma nova plataforma focada exclusivamente na publicação profissional. As palavras-chave estão focadas apenas na publicação profissional. Isso é importante porque mostra que o Ghost é especializado em fazer uma coisa muito bem. Pessoalmente, desde que mudou do WordPress para o Ghost em 2021, posso dizer confortavelmente que o Ghost é uma plataforma muito melhor para publicação online. Um dos maiores benefícios para o Ghost é o quão rápido ele é, 1900 por cento mais rápido que o WordPress, de fato, acordo com estudos independentes. Por quê? Porque o Ghost, ao contrário do WordPress, é construído em uma pilha de tecnologia moderna. Quando mudei meu site do WordPress para o Ghost, meu grau de velocidade de acordo com o GT Metrix
melhorou drasticamente de um F e alguns Bs para todos As. O mesmo pode ser dito para interagir dentro do lado administrativo do Ghost também. O administrador é um aplicativo web de página única, o que significa que a interatividade é mais suave e rápida. Sem mencionar, a interface é limpa e simples. Ao contrário do WordPress, com todos os seus vários menus. O administrador do Ghost não muda dependendo qual tema ou integração você adiciona ao seu site, significa que a experiência é muito mais consistente do que em uma plataforma como o WordPress. O trade-off, no entanto, é que as modificações seu site são mais difíceis de fazer sem conhecimento de codificação. Felizmente para você, isso não será um problema depois de participar desta aula. Para concluir, você provavelmente não encontraria o Ghost alcançando a notabilidade mainstream, já que é um desenvolvimento de uma plataforma de foco, mas para aqueles de vocês que sabem como aproveitar o poder do Ghost, você deve encontrar a experiência tanto para si mesmo quanto o usuário é notavelmente mais satisfatório.
3. Ferramentas e conhecimentos necessários: Nesta aula, vamos nos concentrar nas especificidades que compõem os temas Ghost. Obviamente, o desenvolvimento do tema Ghost inclui as três linguagens da web front-end, incluindo HTML, CSS e JavaScript. Mas essa não é uma classe focada em nenhum desses tópicos. Espera-se, antes de fazer essa aula, que você tenha uma sólida compreensão de HTML e CSS. Em termos de ferramentas necessárias, como de costume, você precisará de um navegador da Web, Google Chrome é recomendado; e um editor de código, que nesta classe, usarei o Visual Studio Code. No próximo vídeo, mostrarei como baixar e instalar o Ghost localmente para que você possa começar a trabalhar no desenvolvimento de temas Ghost. Mas quando nosso tema for construído, precisaremos enviá-lo para um anfitrião online. As especificidades de tudo isso serão discutidas em toda a aula.
4. Como instalar o Ghost: Como mencionado no vídeo anterior, vamos querer instalar o Ghost localmente. Localmente, o que significa que vamos executá-lo em nosso próprio computador. Há duas partes nisso: a primeira parte é instalar a interface de linha de comando, então Ghost CLI, e a segunda parte é que vamos
instalar uma instância do Ghost em nossa máquina local. Poderemos executar um pequeno servidor aqui e operar com o Ghost como faríamos em um site ao vivo, exceto que tudo será local e temos acesso
fácil ao código para o qual desenvolver nosso tema Ghost. Como mencionado aqui, não é adequado para uso em produção. Isso é algo que usamos para desenvolver os temas e, quando estivermos prontos para publicar, enviaremos esse código para o nosso site ao vivo. Mas, por enquanto, o que vamos fazer é começar com a instalação do Ghost CLI e, para isso,
precisamos garantir que temos uma versão de suporte do Node e do npm instalada. Este primeiro requisito aqui sob pré-requisitos, que cobrirá 99,9% das pessoas assistindo a isso. Eu ficaria muito surpreso se você tivesse um sistema operacional diferente desses três, então você deveria ser bom para isso. O Node.js é um ambiente de tempo de execução que é muito comum no desenvolvimento web moderno. Se você estiver fazendo outro desenvolvimento web, você deve ter esse instalado. Caso contrário, o link estará lá, Nodejs.org, e você pode seguir as instruções de instalação lá. Caso contrário, se você tiver o Node instalado, certifique-se de ter o npm instalado e, em seguida, está pronto para acompanhar. Se você não tem certeza se tem esses dois instalados, vamos abrir uma janela de terminal agora mesmo. Vou limpar todos esses avisos. Eu uso um chamado iTerm, então pode parecer um pouco diferente do seu aplicativo de terminal. Você usará o terminal em um Mac ou prompt de linha de comando em um Windows por padrão. Mas aqui no meu aplicativo de terminal, o que posso fazer para verificar se tenho o Node e npm instalados é apenas executar o comando para verificar a versão. Posso verificar a versão do meu Node e você pode ver que é 16.9.1 e então eu posso ir npm-v e isso me dirá minha versão npm. Vou apenas ampliar aqui para que vocês possam vê-lo com mais clareza. Como você pode ver quando executamos esses comandos, temos números de versão surgindo e isso significa que temos o Node e o npm instalados. A próxima coisa que vamos fazer é instalar a CLI do Ghost com este comando aqui agora que sabemos que temos o Node e o npm instalados. Vou copiar e colar esse comando em nosso terminal e isso instalará a versão mais recente da CLI Ghost. Após cerca de 20 segundos, isso deve ser instalado e agora podemos começar a encontrar um diretório para instalar nosso site Ghost. O que vou fazer é claro que, vou então navegar para um diretório que tenho no meu computador, code/skillshare. É aqui que mantenho todos os meus projetos do Skillshare e aqui vou criar um novo diretório usando o comando mkdir, e vou chamar esse site Ghost. Depois de criar isso, vou navegar para esse diretório vazio e agora estou dentro do site Ghost. Agora vamos executar o comando para instalar o
Ghost, ghost install local e vamos ver se ele funciona. Recebemos um erro bem cedo, não
tenho certeza se você vai ter o mesmo erro, mas esse é um erro bastante comum, então seria importante que muitos de vocês vejam como resolver isso. É o erro que diz que a versão do Node.js que você usa não é suportada. Como você pode ver aqui, esta é a lista de versões do Node suportadas e, se você se lembra antes, vimos que estávamos executando o 16.9.1. Obviamente, isso será diferente dependendo da versão que você tem,
mas, como você pode ver, há uma discrepância lá e é por isso que temos o erro. Infelizmente para desenvolvedores, isso não é incomum de um erro. Existem muitos pacotes Node diferentes por aí que só são executados em versões específicas do Node. Você pensaria que todos eles seriam executados na versão mais recente do Node, mas acho que o Node muda tão rapidamente que você precisa de uma solução para alternar entre diferentes versões do Node e, para isso, há um pacote chamado nvm. Vou mostrar que, se você ainda não o tiver,
ele deve aparecer como o primeiro resultado quando você digitar nvm no Google, e aqui você pode ver o Gerenciador de versões do nó. Se rolarmos para baixo, poderemos ver o comando para instalá-lo. Já o tenho instalado, mas esse é o comando que você executaria se ainda não o tivesse instalado. Podemos ir até aqui, como você pode ver no meu computador específico, ele diz que o nvm já está instalado e ele só vai tentar atualizar. Para você, pode estar fazendo uma nova instalação, apenas certifique-se de ter o Node Version Manager instalado e, dessa forma,
podemos selecionar uma versão específica do Node para executar o Ghost. Um pouco frustrante, mas infelizmente, isso vem com o território de ser um desenvolvedor. Às vezes, você precisa escolher e alternar entre as versões do nó. Agora você pensaria que será capaz de mudar
para a versão do Node apenas executando o nvm use node. Este é o comando que você usa para alterar sua versão do Node e acho que foi, até
esqueci o que dizia. Deixe-me executar o fantasma install local novamente. Temos esses números de versão novamente, aqui vamos nós, 14.15.0. Você pensaria que seria capaz de usar o comando nvm use node, que é o comando para alterar uma versão. Vou usar o nvm use o nó 14.15.0 e agora você pode ver que agora mudamos para essa versão. Você pensaria que isso funcionaria para executar o fantasma install local. Mas, infelizmente, para mim, diz
que não é compatível com a versão atual do Node. É estranho eu recebo esse erro diferente que não tem os números suportados,
mas, ao mesmo tempo, ainda não
consigo instalar uma instância Ghost. Não consigo explicar por que esse é o caso, mas essa versão ainda não é compatível com o Ghost. O que eu faria é procurar as versões dos nós compatíveis com o Ghost e verificar os fóruns mais recentes. Este aqui é uma gravação de tela anterior de um post no fórum que encontrei chamado erro de download com Ghost
CLI, encontrei uma resposta do Kevin na equipe de que a versão mínima suportada é 14.16.1. Se você instalar isso usando nvm e, em seguida, executar nvm use node e defini-lo para essa versão, ele deverá funcionar para essa versão específica do Ghost CLI. Sei que essa não é a resposta mais limpa, mas infelizmente, algo que o Ghost não deixou claro em seu site ou dentro da mensagem de erro. Agora vamos executar o fantasma install local. Como você pode ver, nossa instalação está avançando agora. Eu só vou pular em frente aqui para que
não tenhamos que esperar que a coisa toda vá. Como você pode ver, estamos quase lá, estamos iniciando o Ghost agora e aqui você pode ver que o Ghost foi instalado com sucesso, para concluir a configuração da sua publicação, visite este endereço que permitirá que você configure seu administrador do Ghost. Vamos abrir isso. Vou manter pressionada o Command e, em seguida, clicar nesse link para que eu o acesse e agora você pode ver que posso executar a instalação do Ghost. Vou clicar em “Criar conta”. Vou chamar isso de Skillshare, meu nome é Christopher Dodd, e colocarei alguns detalhes aqui que
salvei anteriormente e aqui vou pular isso para convidar usuários da equipe. Agora, estou dentro de uma nova instalação do Ghost e aqui você pode ver o administrador do Ghost, sobre o
qual falaremos em apenas um segundo. Se quisermos visualizar o site, podemos clicar neste link aqui e isso nos levará ao nosso site Ghost, que foi pré-preenchido com alguns exemplos de blogposts e está usando o tema em Casper. Se você quiser verificar o tema que está usando atualmente, clique nele para acessar as configurações. Observe que esta interface está sujeita a alterações, mas atualmente é assim que ela se parece e entrando em Configurações, podemos então entrar no Tema e, em seguida, você pode ver o Casper está instalado por padrão. Em um momento, vamos sair desse tema e
vamos substituí-lo por nosso próprio tema. Mas, por enquanto, estamos trabalhando com esse tema existente e estamos puxando postagens de blog de dentro do administrador aqui. Como você pode ver, temos algumas postagens de blog que vêm por padrão com o Ghost. Se quisermos nos livrar deles, apenas
excluímos todos eles e também temos algumas páginas que foram fornecidas pelo Ghost. Acho que temos uma etiqueta aqui e, em Staff, temos eu e o usuário Ghost. O usuário Ghost é aquele ao qual todas essas postagens e páginas do blog foram atribuídas e, se estivermos procurando de onde vem essa navegação, podemos entrar em Configurações novamente, clicar em Navegação, e você pode ver que é aqui que nosso a navegação está vindo. Isso é o que você obtém pronto para uso do Ghost, mas é claro que, nesta aula, vamos aprender a personalizar isso, construir nosso próprio tema. Mas todos vamos usar os mesmos dados do Ghost. Vamos usar tags,
autores, páginas e postagens. Mas agora que temos o Ghost instalado, vou esperar até o próximo vídeo para mostrar mais sobre o Ghost e vamos abordar alguns dos conceitos básicos de como tudo isso funciona.
5. Fundamentos do Ghost: Bem-vindo de volta, todos. Nesta lição, vamos abordar alguns dos conceitos básicos dos sites
Ghost e do desenvolvimento do tema Ghost. Como você pode ver, estou executando uma instância Ghost aqui e o endereço do administrador é o seguinte. Se eu olhar para o meu navegador aqui, você pode ver o endereço para apenas verificar o site como ele é, é o mesmo menos o fantasma da barra. Slash ghost é o que usamos para acessar o administrador. O que vou fazer é colocar no slash ghost, e isso nos levará de volta ao administrador. Quero chamar sua atenção para outros
dois documentos aqui que nos guiarão durante toda a aula. Aqui está a documentação oficial. Eu mudei da instalação do Ghost para a visão geral dos temas. Dentro da documentação do desenvolvedor, isso é claro que está sujeito a alterações, mas no momento da gravação, está aqui neste menu de temas, você tem todos os detalhes sobre temas. Acabei de clicar na visão geral para chegar a esta página. Eu encorajo você a ler a documentação. Mas o que eu fiz além disso foi criado meu próprio guia para o Desenvolvimento de Temas Fantasmas. Isso será publicado no momento em que você estiver assistindo a essa aula, e o URL será guia de desenvolvimento do tema fantasma. Mas deve ser o último post no meu blog para o futuro previsível. Deve ser muito fácil de encontrar indo a crystalfreelancer.com/blog ou crystalfreelancer.com, seguido pela lesma específica aqui. Neste guia, o que faço é passar pelo básico que estamos cobrindo agora, e dividi todo o artigo em quatro categorias: modelos, rotas, contexto e ajudantes. À medida que avançamos nos vídeos posteriores, quando começarmos a criar modelos que combinam com rotas, se eu rolar para baixo aqui, você pode ver que criei um pequeno diagrama aqui. Eu acho que para coisas como estrutura, ter um diagrama realmente ajuda a conceituar o que está acontecendo, e neste diagrama o que temos está à esquerda temos as diferentes rotas. Se você estiver na rota da página inicial, verá index.hbs, a menos que haja um modelo home.hbs. Isso é o que tudo isso significa. Não se preocupe, entraremos nisso mais tarde no vídeo. Mas toda a base do Ghost Theme Development são rotas e modelos. Acessando essas rotas diferentes, o modelo que você obterá depende de quais modelos você realmente tem em seu tema e o nome também, porque a convenção de nomenclatura é muito importante. Mas, em um nível fundamental, você tem esses dois modelos aqui que formam a espinha dorsal de todos os temas do Ghost, que são índice e post. Porque se subirmos aqui ao básico aqui, um blog em sua forma mais básica é uma coleção de postagens no blog. Vamos voltar ao nosso administrador aqui e vamos explicá-lo no contexto do administrador do Ghost. O item de menu mais proeminente aqui são suas postagens. Você tem esse pequeno menu suspenso aqui. Você pode ver as postagens em termos de rascunhos agendados ou publicados. Agora, isso faz sentido porque o Ghost é uma plataforma de publicação. É uma plataforma de blogs. É puro. Ele faz essa forma de sites muito bem, é por isso
que eu recomendo aqueles de vocês que estão indo especificamente para um blog usarem fantasma. Ele não faz absolutamente tudo bem, mas o que ele faz é focar na funcionalidade central de um blog, que é uma coleção de posts. Se entrarmos aqui, você pode ver aqui está nossa lista de postagens. Como vimos no último vídeo, isso já foi preenchido. Mas se entrarmos aqui e clicarmos em “Nova postagem”, vamos chamar esta postagem de exemplo, e aqui podemos inserir todas as coisas, como uma imagem, HTML de
marcação, ou podemos simplesmente começar a digitar. Tudo isso economiza super rápido. O editor é super rápido. Também podemos adicionar uma imagem de recurso à nossa postagem do blog também. Então, aqui, o que podemos fazer é atualizar o URL do post, alterar a data de publicação, adicionar tags, adicionar um trecho, alterar o autor e alterar o modelo, se outros tablets tiverem sido definidos no tema, o que atualmente eles não têm. Isso é um monte de detalhes, mas essencialmente com exceção das páginas, todos os outros tipos de dados que veremos
nesse pequeno menu estão relacionados à organização de nossas postagens. Em um sistema como digamos WordPress ou Shopify, no WordPress você tem algo chamado categoria, e então você tem tags, na Shopify você tem algo chamado coleção, e então você tem tags. Em Ghost, não há conceito de categoria. O que você tem, em vez disso, é algo chamado tag primária. Para esta postagem, a primeira tag que coloquei nessa caixa é a tag principal. O que vou fazer é apenas criar uma nova tag agora chamada Exemplo Tag e, em seguida, vou marcá-la com os primeiros passos também. Ele terá duas tags, mas essa primeira tag é conhecida como a tag primária. Se você quisesse criar categorias mutuamente exclusivas, é
assim que você faria isso. Você colocaria a categoria ou a tag que deseja categorizar a postagem principalmente como a primeira tag. Aqui embaixo, o autor é
definido automaticamente porque atualmente estou logado como Christopher Dodd, mas eu poderia facilmente mudar isso para Ghost e depois ter este artigo atribuído a outro usuário. Vou manter isso atribuído a mim mesmo. Isso é basicamente para configurações de postagem. Vamos dar uma olhada no que isso parece. Isso só vai ser um rascunho. Eu não faria isso em um site normal, mas como estamos trabalhando em desenvolvimento, posso publicar isso e ele publicará instantaneamente. Vamos voltar às postagens e vamos ver os outros tipos de conteúdo. Como mencionei antes, as tags são a maneira como você organiza seu conteúdo no Ghost. Se eu clicar em tags aqui, você pode ver que temos as diferentes tags e o número de postagens atribuídas a cada uma. Quero chamar sua atenção para as tags um pouco mais neste vídeo porque elas são um pouco diferentes de quais tags estão em muitos outros sistemas. Como você pode ver, dentro de uma tag, temos muitas opções de personalização. Podemos adicionar uma imagem de tag, podemos adicionar uma cor, podemos dar a ela um nome mais fácil de usar. Podemos até dar uma descrição e personalizar seus metadados. Agora, isso é muito diferente de muitos outros sistemas, que uma tag é apenas uma cadeia de caracteres. É isso. Ele não tem todos esses outros dados anexados a ele. Mas o ponto que estou fazendo aqui é que não temos categorias no Ghost. Tags são basicamente suas categorias também. Tags de sistema muito flexíveis funcionam bem para oferecer muita flexibilidade em termos de como
organizar o conteúdo do seu site e com o uso da tag principal que acabamos de discutir, que nos dá todos os benefícios dessa flexibilidade sem o trade-off de ter essas categorias mutuamente exclusivas. Se você quiser categorizar suas postagens por grupos mutuamente exclusivos, você pode usar a tag principal. Então, para personalizar a equipe ou os autores, podemos ir até aqui para o menu de coisas aqui, e aqui podemos adicionar dados ao usuário. Se eu entrar em meu nome aqui, posso mudar minha Slug. Posso me dar uma imagem de capa e uma foto de perfil. Posso me dar um site de localização, e todos esses dados estão disponíveis para usarmos dentro do Ghost Theme Development. Claro, você tem integrações aqui e você tem membros se estiver executando um site de associação pago. Nesta aula, não vamos falar sobre o Ghost como uma forma de criar um site de associação, vamos falar sobre o Ghost em termos de blogs, mas isso também é uma opção aqui. Ouvi dizer que o Ghost também é muito poderoso para isso. A pequena coisa final aqui que eu quero chamar sua atenção são as páginas. As páginas são exatamente como postagens, é que elas não estão organizadas em nosso índice de coleções aqui. Eles só estão sozinhos. Temos que ligá-los em algum lugar. Não há um loop com todas as nossas páginas. Eles são apenas postagens que ficam fora de postagens e não pertencem à coleção principal do seu site Ghost. Como você pode ver alguns dos exemplos aqui estão coisas como a sua página Sobre,
sua página de contato, sua página de privacidade. Esses não são realmente blogposts. Eles vão parecer e sentir o mesmo, talvez, mas são postagens no blog no sentido de que não vamos dar-lhes tags e a data em que foram publicadas pode não ser necessariamente tão importante. Isso é praticamente o mesmo em qualquer plataforma de blogs que você tenha suas postagens e suas páginas. Basicamente, a única diferença é que as postagens formam uma coleção e têm datas nelas. Páginas você também pode mostrar a data publicada no Ghost Theme Development, mas isso não é tão comum. A diferença é com as postagens, queremos poder percorrer elas
e, quando novas postagens estiverem disponíveis, podemos publicá-las em feeds RSS, coisas assim. Se você já teve alguma experiência com blogs antes, isso deve ser bem claro para você. A última coisa que eu só quero reiterar aqui é que sua navegação fica em suas configurações aqui, para que você possa entrar nas configurações e clicar em navegação, e é aqui que você define seus dados de navegação. Vimos, se eu voltar ao nosso site clicando neste link, você pode ver nossa navegação aqui. Se eu fosse remover alguns itens aqui, vamos remover tudo, exceto sobre, e pressione Salvar. Acho que realmente tenho que clicar em Lixeira aqui. Vamos tentar novamente por aqui. Você pode ver nossos encolhimentos de navegação e nossa nova postagem no blog que publicamos também está lá. Então, o que vou fazer como não queremos um post sem imagem, vou adicionar uma imagem em destaque aqui. Eu posso encontrar um aleatoriamente do Unsplash. Vamos apenas inserir um lá. Clique em “Atualizar”. Volte ao nosso tema, opa. Deixe-me voltar para Início, e aqui você pode ver que temos nosso exemplo de post em Exemplo Tag e aqui em Introdução, todas as nossas outras postagens. Agora, se você está se perguntando de onde vem esse Introdução, essa é a tag principal. Muito importante o que você coloca como sua primeira etiqueta. É claro que, em seu tema Ghost enquanto você o está desenvolvendo, você pode optar por apresentar a tag principal ou tratá-la como uma tag normal. Cabe a você. Mas em termos de criação dessas categorias aqui, você usaria a tag principal. Eu só quero deixar isso claro porque isso é algo diferente no Ghost em comparação com outras plataformas de blogs. Agora que demos uma olhada dentro do administrador do Ghost e você deve estar um pouco familiarizado com ele, você se acostumará mais com o passar do tempo, vamos sair do nosso tema e começar a reconstruí-lo para que possamos aprender como tudo funciona . O tema que estamos usando, se eu entrar em Configurações e entrar no Tema aqui, é Casper. Se eu tivesse outro tema pronto, eu poderia enviá-lo e mudar para esse tema. Mas para os propósitos de nós, medida que estamos desenvolvendo um novo tema, e queremos ver todas as nossas mudanças acontecendo assim que elas acontecerem, vou manter as coisas fáceis para nós e
vamos sair do nosso Tema Casper aqui. Quando isso estiver pronto, podemos empacotar isso
e, em seguida, fazer o upload para o nosso site ao vivo assim que o criarmos. Para isso, o que vou fazer é abrir nosso projeto no meu editor de código. Como mencionado anteriormente, o editor de código que estou usando para essa classe é o Visual Studio Code. Vou abrir uma nova janela nesse programa. Você pode ver todos esses avisos diferentes aqui. Vou fechar isso. Deixe-me expandir isso e, em seguida, o que vou fazer é clicar em “Abrir” aqui. A partir daqui, vá para minha pasta Código, acesse minha pasta Skillshare e abra o site Ghost. Ao fechar esse menu de boas-vindas aqui, você pode ver que temos três pastas: Conteúdo, Atual e Versões. Vamos entrar em Conteúdo e entrar em Temas, e aqui está nosso código de tema para Casper. Temos muitos códigos diferentes em vários arquivos. Nesta aula, em vez de mudar as coisas que já existem, quero começar de baixo para cima para que vocês tenham um entendimento fundamental. O que vou fazer é literalmente começar a excluir alguns desses arquivos. Vou excluir todos os modelos, exceto os obrigatórios. Se voltarmos à publicação do blog ou à documentação, há apenas dois modelos necessários no tema Ghost, e esses são index.hbs e post.hbs. Como mencionado anteriormente, isso faz sentido porque um blog em sua forma mais básica é simplesmente uma coleção de posts. Se você não tem um lugar onde as pessoas possam visualizar todas as suas postagens e não tiver um modelo para exibir uma postagem, basicamente não poderá ter um site. Não há muitos arquivos necessários, você só precisa ter certeza de que você tem um index.hbs e um post.hbs. Vamos separar todos os nossos modelos além desses, que possamos aprender a reconstruir. Vou me livrar de todos esses modelos aqui. Vou me livrar de tudo na pasta de ativos também. Vamos colocar nossos próprios ativos
e, em seguida, dentro de nossos parciais aqui, vamos nos livrar de tudo lá também. O que vou fazer é levar isso a um nível muito básico. Vamos remover tudo isso e eu só terei uma página 1 que diz Índice
e, em seguida, no post, vou dividir isso e ter um modelo que apenas diz Post. Como fizemos alterações em nossos arquivos hbs, removemos alguns arquivos hbs, é uma boa ideia reiniciar nossa instância Ghost. Vou voltar para o terminal aqui,
e vou executar o comando Ghost restart,
que, como você pode suspeitar, vamos parar nossa instância do Ghost e, em seguida, iniciá-la novamente. Localmente, isso não deve demorar muito para fazer. Lá vai você. Ele foi reiniciado. Vamos voltar ao nosso site Ghost agora e ver como ele se parece. Lá você pode ver no diretório raiz, estou olhando para o modelo de índice. Obviamente, não há nada lá, exceto h1, mas isso é o que esperamos porque acabamos de estripar isso. Então, se eu for a um post específico, então qual era uma das postagens que tínhamos? Se eu voltar ao meu administrador do Ghost aqui, e eu passar para posts de exemplo, então clicando em Exibir postagem, você verá que acabamos de publicar. Sem dados dinâmicos, mas você pode ver claramente que eliminamos o modelo de índice que estava servindo na página inicial e nós eliminamos o modelo de postagem. Isso é o que eu quero que você veja é que agora podemos
acessar esses dois modelos com nossas duas rotas principais. As rotas, é claro, são uma das quatro categorias sobre as quais falo neste guia. Falamos sobre modelos e falamos sobre rotas. Entramos em muitos detalhes sobre rotas porque as rotas são algo muito importante no desenvolvimento do tema Ghost. Na verdade, o arquivo que você altera suas rotas não está realmente em seu tema. Antes de começarmos a mudar nossas rotas e atualizar nossos modelos, eu só quero chamar sua atenção para esse arquivo. É o arquivo routes.yaml e o local para procurá-lo está dentro do diretório de configurações, dentro do diretório de conteúdo. Vou clicar nisso
e dar uma olhada no arquivo routes.yaml. Esta é a configuração padrão para rotas como falamos na postagem do blog aqui, esse é o padrão. Vamos entrar em mais detalhes sobre como isso funciona e a sintaxe por trás do YAML no próximo vídeo. Mas, essencialmente, quero chamar sua atenção é que temos nossas rotas definidas aqui, e temos uma única rota de coleta aqui, que está carregando nosso índice e está sendo atendida na rota raiz. Isso é o que determina que estamos executando nosso índice de postagens de blog na rota raiz. Então este link permanente aqui nos diz que estamos executando a lesma do nosso post no blog logo após a primeira barra. Claro, pode fazer sentido que a página inicial seja um índice de postagens e, se entrarmos aqui e digitar posts de exemplo, ela mostrará uma postagem. Mas isso é tudo personalizável dentro do Ghost também. Podemos atualizar essas rotas, o que faremos em um vídeo futuro. Na verdade, acredito que seja o próximo vídeo. Espero que isso não seja muita informação. Vou deixá-lo lá e vamos aprofundar as rotas e modelos no próximo vídeo. Mas o que eu queria demonstrar neste vídeo era como o administrador funciona. É bem simples quando você coloca a cabeça em torno dele. Estamos apenas executando uma coleção de postagens. Temos algumas páginas ao lado e categorizamos nossas postagens por tags e autores. Podemos adicionar dados às tags e podemos adicionar dados aos autores, e também podemos exibi-los em nosso tema Ghost. Finalmente, podemos personalizar nossas rotas usando o arquivo routes.yaml, sobre
o qual aprenderemos no próximo vídeo. Vejo você no próximo.
6. Estrutura do tema e template padrão: Nesta lição, vamos nos aprofundar na estrutura do tema e falar sobre os vários modelos que compõem seu tema Ghost. Vamos nos aprofundar neste diagrama aqui, e se
tivermos algum tempo, vamos entrar mais no roteamento avançado. Mas há muitos detalhes lá. Então, vamos começar aqui com a estrutura do tema. Agora, para explicar esse diagrama, o que tenho à esquerda são as rotas. Então, onde quer que você esteja acessando a página inicial ou uma página de blog, ou uma página ou post, você acabará por padrão, se formos para, aqui, o arquivo index.hbs ou o arquivo post.hbs. Quero que você ignore todos esses modelos cinza no momento aqui e entenda que se tudo o que você tem em seu tema Ghost é um index.hbs e um post.hbs
e, claro, um hbs padrão opcional, que abordaremos em apenas um segundo. Não importa para qual rota você vai, você sempre acabará em um desses modelos. Agora, esses modelos entre o nome da rota e esses modelos padrão são todos modelos opcionais. E esses modelos opcionais permitem que você personalize o que aparece em rotas mais específicas. Por exemplo, se não quiséssemos nossa página de índice
na página inicial e uma das páginas específicas que vai na rota de rota, não
podemos definir isso usando home.hbs. Este é provavelmente o exemplo mais simples de todo o diagrama. Se formos para a página inicial e não tivermos um home.hbs, então iremos indexar por padrão. Se fizermos isso, também temos que atualizar nossas rotas. Vou te mostrar isso em apenas um segundo. Mas avançando mais para baixo, se entrarmos no próximo exemplo, a próxima rota, se olharmos para uma rota de índice, basicamente como olhar para o blog em geral ou uma visão filtrada da coleção geral. Digamos que, por exemplo, estamos analisando todas essas postagens de blog filtradas por um autor específico. Se houver um modelo chamado autor desse oferecer.hbs, esse modelo será carregado antes desses modelos. Por padrão, se formos para uma página de índice onde quer que estejamos filtrando por autor ou tag, ela irá para index.hbs. Mas se, por exemplo, estivermos filtrando por um determinado autor e tivermos um arquivo autor.hbs, então o código desse arquivo autor.hbs será veiculado. Mas se digamos, por exemplo, estamos olhando para o usuário Christopher, que é um dos meus usuários no meu site Ghost no momento, esse é o lesma para o meu usuário. Se eu tiver um modelo chamado author-christopher.hbs, ele será carregado antes do arquivo author.hbs e à frente do arquivo index.hbs. Espero que este diagrama comece a fazer um pouco mais de sentido aqui, mas vou mostrar a vocês como isso realmente funciona dentro do tema Ghost em apenas um segundo. Então, seguindo essa mesma lógica, aqui você pode ver se filtramos por uma determinada tag, por padrão, obteremos o modelo index.hbs, a menos que tenhamos nosso modelo tag.hbs. E se estivermos filtrando por uma determinada tag e
definimos um modelo personalizado para essa tag específica
, ela servirá esse modelo específico. Seguindo para essas rotas para publicações e páginas individuais, se estivermos acessando uma página e não houver página.hbs, nenhum modelo personalizado sendo definido na página e nenhum modelo personalizado especificamente para essa página, então nós iremos load post, mas somente se nenhum desses três existir. Há muitas opções aqui para página,
podemos ter um modelo de página.hbs, podemos ter um modelo personalizado, mas que pode se aplicar a posts e páginas, e vou mostrar como você faz isso em apenas um segundo. Ou podemos ter um modelo de página relacionado a uma página muito específica e que será carregado antes de tudo isso. Portanto, essa é uma compreensão passo a passo do que essas linhas e colunas significam. Vamos realmente colocar isso em prática dentro do nosso tema Ghost. Então, antes de tudo, o que eu quero fazer é definir um arquivo.hbs padrão. E o que isso faz é conter algum código de invólucro que contorna qualquer modelo que seja veiculado aqui. É por isso que o tenho sentado no topo. Isso significa que o default.hbs irá envolver qualquer modelo que esteja sendo veiculado. E isso é útil para coisas como cabeçalhos e rodapés, que serão os mesmos em cada página. Voltando ao nosso código, o que vou fazer é criar um arquivo.hbs padrão. Em nosso arquivo.hbs padrão, vamos carregar em algum conteúdo HTML boilerplate aqui. Vou colocá-lo na tag doctype. Inicie a tag HTML, configurando Lang, e este é o nosso primeiro código de
guidão, vai mais fundo no guidão e como usar todos os auxiliares em um vídeo posterior. Mas, por enquanto, espero que
isso não exija muita explicação. Vou apenas lançar isso, e então vou iniciar minha tag head, vamos precisar de um título para o nosso documento, e vou definir um valor dinâmico para isso também. Seja qual for o meta título da página, vamos colocar lá, colocar os conjuntos de caracteres lá, utf-8, definir o campo Meta viewport aqui. Novamente, este é todo o conteúdo do boilerplate, então essas são as coisas que você faria em qualquer site. Então, não vou muito aprofundado nisso no momento. Então eu vou colocar uma tag especial para inserir parte do código principal que vem diretamente do administrador do Ghost, que é apenas Ghost head. Aqui embaixo, o que vou fazer é criar um cabeçalho e, em seguida, começaremos a ver esse cabeçalho aparecer em todas as páginas. Então, primeiro de tudo, eu tenho que abrir uma tag de corpo e depois criar um cabeçalho com a classe de cabeçalho. Livre-se desses. Então vou trazer alguma estrutura e CSS aqui que eu já criei. Vou trazer algumas classes HTML ou CSS que já determinei. Esta não é uma classe CSS, então vou copiar e colar um pouco de CSS, apenas para que pareça legal. É sempre melhor quando seu site parece bom. Em seguida, vou adicionar o logotipo do cabeçalho aqui, que se houver um conjunto de imagens,
então, se o logotipo do site ,
colocando um outro lá ,
se houver um logotipo do site vamos carregá-lo lá. Para aqueles que estão se perguntando, o símbolo at indica que esse é um objeto global. Mas, novamente, aprenderemos mais sobre guidões em um vídeo posterior. Se não houver logotipo do site incluído no site, o que vamos fazer é gerar o título do site. Então, por baixo disso, vamos criar uma navegação de cabeçalho, é colocar um ajudante realmente útil do Ghost, que é apenas a tag de navegação que vai gerar nossa navegação com alguma estrutura HTML padrão. E depois do cabeçalho, o que vou fazer é trazer o conteúdo principal através desta tag principal aqui e usar essa tag especial aqui com três chaves de ambos os lados e colocar o corpo da palavra-chave lá. Agora, o que isso vai fazer para cada modelo que inclui o padrão.hbs vai carregar o conteúdo desse modelo dentro dessa tag de corpo aqui. Há mais uma etapa que precisamos fazer para que isso seja carregado tanto no post quanto no
índice e que é colocar uma tag especial na parte superior desses modelos que se parece com isso. Parece um pouco com uma tag parcial que o verá em um segundo, mas tem esse ponto de exclamação. Portanto, é uma tag especial que diz ao Ghost para carregar nosso modelo padrão em torno desse modelo. Como mencionei antes, vou copiar e colar o CSS porque não quero
gastar muito tempo nessa classe criando CSS quando não estamos aqui para aprender isso. Então, o que vou fazer é ter uma pasta de CSS aqui, vou entrar nos meus ativos e colar isso. E como você pode ver, estou usando o Bootstrap, que é uma estrutura CSS, você pode encontrá-lo em getbootstrap.com. Estou usando a versão 5.1.1 e, em seguida, tenho um arquivo CSS personalizado antes disso também. Portanto, não vamos falar sobre CSS nesta classe, mas ter esse CSS lá pelo menos fará com que nosso projeto pareça muito melhor. O que vamos precisar fazer agora para visualizar essas alterações é porque adicionamos um novo modelo, precisamos reiniciar nossa instância do Ghost. Então, vou fazer isso agora. Execute o Ghost,
reinicie novamente e, depois disso, podemos voltar ao nosso navegador aqui, carregar a publicação de exemplo e esperamos ver a quebra de código padrão. Acho que fiz um erro de digitação aqui, acho que precisa ser um espaço lá. Desculpas por isso, vamos atualizar o Ghost novamente. E, em seguida, voltando para esse post, você pode ver que agora temos nossa navegação e o título do nosso site aparecendo. E isso será o mesmo se seguirmos ao nosso modelo de índice. Há um outro passo aqui que eu esqueci para trazer esse CSS. E isso é entrar em nosso default.hbs e adicionar uma tag de link para trazer esse CSS em nosso projeto. E nós vamos vincular estilo rel href igual. E aqui o que vamos fazer é usar um ajudante. Vamos usar o auxiliar de ativos, que irá extrair o CSS de ambos Bootstrap. Então, dê a ele um nome de arquivo aqui. Esse auxiliar olhará dentro da pasta de ativos para esse arquivo específico. Portanto, se o CSS estiver aninhado em uma pasta CSS, você só precisa incluí-lo lá,
mas, de outra forma, ele escopos para a pasta de ativos. Vou apenas copiar e colar isso para economizar algum tempo e depois mudar isso para main.css. Atualize aqui e você pode ver que nosso cabeçalho está mais bem formatado agora. Então, se eu for para Home, obtemos nosso modelo de índice. Se eu for para o post de exemplo, ainda
obtemos o cabeçalho, ainda obtemos todo esse código, mas no conteúdo principal, temos um título diferente chegando. Então, se eu inspecionar isso em nossas ferramentas de desenvolvimento do Chrome, você verá que estamos carregando a postagem, que é o conteúdo dentro do modelo de post, dentro da tag principal. Se eu for para casa, você pode ver a mesma coisa novamente, estamos executando o index dentro do main e isso é consistente com o que temos aqui. Então, tudo acima do principal, temos o cabeçalho, temos nossa cabeça HTML aqui e isso será carregado em todas as páginas porque estamos usando default.hbs. Parece que passamos um bom tempo neste arquivo.hbs padrão. Então, o que eu poderia fazer é chamá-lo lá para este vídeo
e, na próxima lição, começaremos a criar mais desses modelos que vemos em nosso diagrama aqui. Criaremos um arquivo.hbs home.hbs e alguns desses outros modelos também.
7. Templates opcionais e roteamento básico: No último vídeo, adicionamos um arquivo.hbs padrão ao nosso tema Ghost e, em seguida, o incluímos em nosso post no modelo de índice. Nesta lição, veremos os modelos opcionais adicionais que podemos usar para substituir o conteúdo em index.hbs e post.hbs para determinadas rotas. A mais óbvia é a página inicial, e essa é a que vamos fazer primeiro. Na verdade, exige que façamos uma alteração no nosso arquivo de rotas, mas uma pequena alteração. Na verdade, há uma parte da documentação do Ghost
que mostra como fazer isso como parte de outros exemplos dentro do roteamento. Você pode entrar em Temas, Roteamento e temos nossa configuração básica aqui. Se rolarmos para baixo, ficamos sob o cabeçalho usando uma página inicial personalizada, podemos alterar nossa configuração para isso. Podemos mover nossa coleção de índices para fora da nossa rota raiz e movê-la para o blog. Podemos aninhar nossas postagens de blog slugs dentro do blog e, portanto,
podemos configurar nosso arquivo.hbs home.hbs para ser executado na rota raiz. Vamos fazer isso agora. Vamos entrar em nossas rotas antes de tudo e vamos mudar isso para blog, lesma e depois blog. Certifique-se de ter a barra em ambos os lados e, em seguida, aqui vamos definir uma rota específica para a rota raiz e vamos carregar o modelo inicial. Agora, vamos precisar realmente criar esse modelo de casa, então lá dentro vou escrever para casa.hbs e, assim como fiz com esses outros modelos, não
vamos gastar muito tempo codificando-os nesta lição, vamos começar a isso em um vídeo posterior. Mas eu só quero mostrar como as rotas funcionam e os diferentes modelos que são servidos em rotas diferentes. Eu só vou fazer a mesma coisa que fiz antes e colocar o h1 lá e também vou obter a tag padrão lá também, então ele carrega o cabeçalho. Agora, que criamos o novo modelo, precisamos reiniciar nossa instância do Ghost, então vou falar aqui e novamente executar o Ghost restart. Isso é algo que precisaremos fazer sempre que criarmos ou excluirmos um arquivo em nosso tema Ghost. Agora, se voltarmos ao nosso site e formos para o diretório raiz, clique em Enter, você verá que estamos agora no modelo inicial. Se eu for para o blog para baixo e você puder ver que estamos executando o modelo de índice e se eu for um post de exemplo do blog, você verá que estamos executando o modelo de postagem. Agora, assim como vemos no diagrama, se não tivermos um modelo inicial, vamos executar index.hbs na rota da página inicial, mas se fizermos isso substituirá o modelo index.hbs. Passando para a próxima rota, vamos carregar o modelo de índice por padrão na rota do blog. Mais uma vez, como vimos, nós o movemos em nossas rotas. Arquivo YAML para ser blog em vez da rota raiz, mas aqui, se filtramos por uma determinada taxonomia ou não, vamos obter a mesma rota. Como podemos ver em nosso arquivo de rotas, se eu voltar a ele aqui, temos essas taxonomias aqui e isso nos permite
filtrar o índice via tags e autores. Mais uma vez, lembre-se de que criamos essa tag de exemplo antes. Se eu entrar aqui e eu marcar, tag exemplo, você verá que obtemos o mesmo modelo, obtemos o modelo de índice. Se eu entrar aqui e usar uma taxonomia diferente e eu for, Autor Christopher que
deixar claro é minha lesma aqui no meu usuário, então aqui você pode ver o Autor Christopher, esse é o URL que você iria para,
para filtrar as postagens por autor. Veremos isso quando passarmos pelo loop de índice quando falamos sobre contextos e nos ajudamos mais tarde na aula. Mas o ponto que estou fazendo aqui é porque não
temos nenhum modelo de autor ou tag configurado, sempre
vamos usar o padrão para o modelo de índice. Ele sempre servirá o modelo de índice se não tivermos nenhuma dessas configurações. Vamos configurar alguns desses modelos agora e ver isso acontecendo em tempo real. O que vou fazer é voltar ao nosso Editor de código e dentro da nossa pasta de temas Casper e vou
criar uma tag.hbs e criar um arquivo autor.hbs. Em nossa tag.hbs, vou copiar o mesmo formato que todos esses outros modelos e vou colocar a tag aqui
para que saibamos que estamos no modelo de tag e no modelo do autor aqui. Reinicie nossa instância Ghost à medida que adicionamos novos arquivos e, em seguida se eu voltar ao nosso site aqui e estivermos na rota Autor Christopher aqui, se eu pressionar Enter, você verá que a palavra aqui muda para autor, que significa que estamos agora executando o modelo author.hbs agora em vez do modelo index.hbs. Isso, é claro, não o substitui para a rota do blog. Ainda temos o modelo de índice padrão para esse, mas se estivermos filtrando por autor,
veremos o modelo do autor e, se estivermos filtrando por uma determinada tag, como tag de exemplo, vamos carregar o modelo de tag. Isso já deve estar bem claro. Também podemos criar um modelo para um autor muito específico ou uma tag muito específica. Vou fazer isso agora. Temos uma tag aqui chamada como começar. Só quero te mostrar isso para que eu possa mostrar que há uma diferença. No momento, ambas as tags vão carregar esse modelo de tag. Mas e se quisermos executar código diferente com base em uma tag específica ou em um autor específico? Bem, o que podemos fazer nesse caso é criar um modelo de autor personalizado para esse específico. Acho que cliquei em novo arquivo no errado lá. Tenho que fazer isso dentro da nossa pasta de temas Casper e o que vou fazer é fazer um modelo com o traço do autor seguido pela lesma do autor, então para mim será Christopher, hbs e aqui vou copiar esse código, vá até aqui e eu vou apenas dizer o modelo de autor Christopher. Então eu vou fazer o mesmo para tag, vou ir Novo Arquivo, traço de
tag seguido pelo slug da tag,
que é tag de exemplo, seguido de dot hbs e fazer a mesma coisa que antes aqui , modelo de tag de exemplo. Agora, novamente, como criamos novos modelos, vou reiniciar e depois ir
até aqui para começar porque não substituímos esse modelo, ele ainda usará o modelo de tag. Mas se formos aqui para exemplo de tag, você verá que agora estamos executando um modelo diferente do modelo de tag padrão. Se eu for aqui para o autor Christopher, você verá que estamos executando o modelo de autor Christopher enquanto que se formos para o autor Ghost, que está executando o modelo de autor padrão. Aqui o que você está vendo é a estrutura do tema em ação. Sei que não há muita coisa acontecendo aqui porque não há conteúdo. Vamos chegar a isso em um vídeo posterior. Mas isso deve começar a reforçar o que está acontecendo neste diagrama aqui. Temos nossos arquivos principais em index.hbs e nosso post.hbs e, em seguida,
temos todos esses modelos adicionais que podemos usar para personalizar determinadas rotas. Vou avançar no diagrama agora e examinar os modelos adicionais que ficam em cima do post.hbs. Como vemos aqui para a página, se não definirmos nenhum modelo específico para a página, ele só será postado como padrão, que será o mesmo modelo de uma postagem. Mas se definirmos um arquivo page.hbs, isso substituirá o que mostra nas postagens. O que vou fazer é passar por isso agora. Vou entrar em nosso tema novamente, vamos fechar alguns desses arquivos, e vou adicionar em uma página.hbs. Novamente, o que vou fazer é substituí-lo por “Esta é uma página” e, em seguida, vamos reiniciar a instância Ghost. Voltando para o nosso site agora, se estivermos em um post específico, que lembre-se de que mudamos a rota para o blog e depois seguimos o slug do post. Vamos estar em um post, mas se formos a uma página, ela vai dizer: 'Esta é uma página. ' O próximo modelo que substituirá este modelo de página e o modelo de publicação é um modelo personalizado. Voltando para o diagrama, criamos um modelo personalizado escrevendo traço
personalizado seguido de um nome arbitrário que decidimos. A maneira como definimos isso em qualquer post ou página em particular está no administrador. Vou te mostrar isso agora. Vamos voltar ao nosso tema aqui. Vamos criar um personalizado. O que vou fazer, você verá mais tarde na classe, é ter um layout alternativo para páginas e postagens que tenham um cabeçalho de imagem. Vou chamar isso de cabeçalho.hbs custom-header.hbs. Por enquanto, como não estamos entrando no código, estamos apenas entrando nos conceitos de rotas e modelos, vou chamar esse Conjunto de modelos personalizados no Ghost Admin. Novamente, criamos um novo arquivo, então precisaremos reiniciar nosso servidor novamente. Novamente, isso não deve demorar muito se o estivermos executando localmente, o que estamos, e então eu vou entrar em nosso administrador aqui e vamos apenas dizer isso antes da publicação de exemplo. Vou clicar nisso. Vou passar para postar as configurações aqui. Role para baixo e acho que preciso atualizar aqui. Vamos novamente, role para baixo. Você pode ver que agora temos um campo extra aqui chamado template, e temos esse menu suspenso. Podemos escolher o modelo padrão ou este, cujo nome será igual ao que colocamos após o traço personalizado no nome do modelo. Nós o chamamos de cabeçalho personalizado. Vou clicar neste modelo aqui para o cabeçalho, “Atualizar”, e quando visualizarmos esta postagem, você verá que ele diz, Modelo personalizado, Definir no administrador do fantasma. Isso será diferente das outras postagens, como example-post, que ainda está usando o modelo de postagem, e o bom desse modelo é que podemos definir isso em uma página também. Tudo o que temos que fazer é entrar em nossa página. Digamos que ele contribua, vá para nossas configurações de página e também podemos definir isso para um modelo alternativo. Estamos quase através do diagrama aqui. Nós apenas temos slug de página, pós-slug, e assim como fizemos aqui para escória de autor e tag-escória, podemos usar um modelo personalizado para uma página muito específica ou um modelo personalizado para um post muito específico. Apenas por uma questão de integridade, vamos passar por isso também, mesmo que seja exatamente o mesmo conceito que os outros. Vou entrar aqui e criar, vamos fazer isso para a página sobre. A página sobre slug é sobre, então nós apenas fazemos page about, e então esse é o modelo especificamente para a página acima. Então, vamos fazer isso para postagem também. Vamos fazer uma publicação de exemplo. Faremos um modelo específico para uma postagem pós-exemplo. Este é o modelo especificamente para example-post. Novamente, reiniciando nosso servidor Ghost porque criamos alguns novos arquivos. propósito, não precisaremos fazer isso tanto nos vídeos posteriores, porque estamos apenas criando todos os nossos arquivos agora. Mas assim que começarmos a trabalhar na criação de algum código aqui, os arquivos já serão criados e, portanto, não
teremos que reiniciar nosso servidor toda vez apenas para que você saiba. Se você está ficando cansado de reiniciar. Volte ao nosso site Ghost agora, se seguirmos para a página sobre, você pode ver que agora estamos executando o modelo especificamente para a página sobre. Se eu for ao post de exemplo do blog, você pode ver que estamos executando o modelo especificamente por exemplo post. Para apenas diferenciar isso de todo o resto, se formos ao blog bem-vindo, você verá que estamos executando o modelo personalizado, e se formos para, digamos, outro blog que não tem um modelo personalizado nele ou tem um modelo específico de post nele. Vamos apenas ir para este, design. Você pode ver que ele usa o modelo de postagem padrão. padrão será post.hbs se não estiver usando um
dos outros modelos opcionais que ficam em cima do post.hbs. Isso cobre todo o diagrama aqui. Existem outras rotas e modelos, mas essas são as principais rotas e modelos. Se você quiser saber mais sobre as outras rotas, você pode ir para a documentação. Não é muito complicado. Se formos para a estrutura, você verá que temos alguns outros aqui também, como private.hbs e error.hbs. Sem mencionar, temos o amp.hbs também. Esses são todos modelos adicionais que não são essenciais para entender em termos da estrutura. Enquanto nosso guia aqui, esses são os que são importantes para entender porque eles ficam no topo de seus modelos principais, que são index.hbs e post.hbs. Acho que esse foi outro longo e ainda não chegamos às rotas, então vamos entrar em rotas no próximo vídeo. Mas isso deve analisar o que esse diagrama significa e como podemos começar a personalizar rotas diferentes em nosso tema Ghost usando modelos diferentes.
8. Roteamento personalizado: Neste vídeo, vamos nos aprofundar um pouco no roteamento. No último vídeo, analisamos nosso arquivo routes.yaml, que está em nossa pasta de configurações aqui, e fizemos uma alteração. Nós movemos nosso modelo de índice ou nosso blog, você poderia dizer, fora de nossa rota de rota e o substituímos pelo nosso modelo inicial. Mas há muito mais que podemos fazer dentro das rotas. Não entraremos em absolutamente todos os cenários de rotas neste vídeo, pois não acho que seja particularmente prático. Mas, para nos começar, vamos dar uma olhada na documentação. Se você já está preso no que fazer com rotas, você pode olhar para a documentação aqui ou se preferir uma explicação minha, você pode conferir meu artigo onde eu vou mais fundo na configuração e atualização de rotas. Entramos em rotas básicas, rotas básicas com dados dinâmicos, rotas
básicas com formatação personalizada, coleções, filtragem de coleções, a lista continua. Organizei meu guia de uma forma que sinto que faz mais sentido a partir de um entendimento de baixo para cima. Então eu acho que esses caras acabaram na documentação, mas traços diferentes para pessoas diferentes
, o que ajudar você a entender melhor. Mas neste vídeo, o que vamos fazer é mostrar
alguns exemplos de algumas das coisas sobre as quais eles falam aqui. Isso ajudará você a configurar praticamente
qualquer tipo de rota que você gostaria em seu site Ghost. Se rolarmos para baixo, podemos ver a configuração base, que é o que tínhamos antes, que é um único índice é servido na rota da rota e nossas rotas individuais são atendidas nessa rota de rota também através de sua lesma específica. Então você tem as taxonomias também. Se você quiser filtrar por uma determinada tag, você pode usar essa estrutura aqui ou essa estrutura. Vimos tudo isso no último vídeo. Mas se rolarmos aqui para baixo, poderemos usar algumas rotas mais dinâmicas e algo chamado rotas personalizadas. Aqui vamos nós. Roteamento básico. O que podemos fazer é literalmente configurar nossa própria rota e , em seguida, definir um modelo que aparecerá quando formos para essa rota. Vamos fazer isso agora. Deixe-me mudar para o meu editor de código. Deixe-me criar algo chamado página especial. Vamos apenas ir aqui, e eu chamarei de página especial. Este nome de arquivo não está seguindo nenhuma de nossas convenções de antes,
portanto, ele não será carregado automaticamente em determinadas situações. Estamos apenas usando isso para preencher uma rota. Novamente, nem vou me preocupar com a tag padrão desta vez, vou chamar essa página especial. Na verdade, podemos querer criar um modelo em que não
tenhamos esse invólucro padrão que circula. Talvez essa seja essa página especial. Então, no meu arquivo de rotas, o que vou fazer é apenas adicionar isso às nossas rotas aqui com uma barra em cada lado. Vou criar uma rota, uma página especial, e depois vou colocar o nome do modelo sem o.hbs. Vou clicar em Salvar. Como fizemos alterações em nosso arquivo de rotas, reinicie nosso servidor Ghost. Agora, se eu voltar para o meu site aqui, vamos movê-lo para lá, e vamos para essas rotas de página especiais. Você pode ver que estamos neste modelo de página especial, que não tem nenhum de nosso código boilerplate. Não é o exemplo mais prático, mas apenas mostra que podemos criar nossos próprios modelos personalizados e carregá-los em rotas personalizadas. Uma extensão disso são canais personalizados, quais vou chegar em apenas um segundo porque eles são um pouco mais complicados. O que eu quero fazer é mostrar a você como você pode dividir sua coleção principal de postagens em diferentes “coleções” aqui porque acho que a redação aqui do Ghost pode ser um pouco confusa. Na verdade, não há várias coleções da perspectiva do seu administrador. O que quero dizer com isso é que se entrarmos no administrador colocando fantasma após o nome do nosso site, você pode ver que há apenas uma coleção de postagens aqui. Não há várias coleções. Mas o que podemos fazer é simular coleções diferentes por meio de nosso roteamento e podemos dividi-las via tags. Vamos dar uma olhada na documentação, o que quero dizer com isso, se rolarmos para baixo para coleções, temos a coleção padrão que
tínhamos antes, temos usando uma página inicial personalizada que configuramos no último vídeo, e então também podemos criar duas “coleções” diferentes para algo como talvez tivéssemos um blog e um podcast hospedados neste mesmo site, então poderíamos dividi-las usando essa sintaxe aqui. Vamos seguir em frente e fazer isso agora apenas para fins de demonstração. Vamos entrar em nossas postagens aqui e digamos que estamos começando um podcast. Vou criar um novo episódio, Podcast Episode 1, e então aqui, vou dar a ele a tag principal dos podcasts. É claro que, para que isso funcione, teremos que passar por todas essas outras postagens publicadas e mudar a tag principal para blog. Vou mover isso para a frente para torná-lo a tag principal. Clique em Atualizar sobre isso. Eu só vou acelerar rapidamente por aqui e fazer isso em cada postagem. Eu não vou aborrecê-lo deixando você me ver fazer isso em tempo real. A menos que eu tenha perdido um, devemos ter todas as nossas postagens no blog com o Blog como a tag principal. Acho que podemos ver aqui no resumo que é verdade. Este Podcast Episode 1 é podcast. Digamos que não queremos mostrar o podcast no mesmo feed dos blogs, e não queremos mostrar os blogs no mesmo campo que os podcasts. Faz sentido, certo? O que podemos fazer é criar ou simular essas coleções diferentes. Se eu entrar no meu arquivo routes.yaml, o que posso fazer aqui é adicionar um filtro para que ele mostre
apenas as postagens que foram marcadas com blog. Se voltarmos à documentação aqui, temos o exemplo aqui. Isso é tudo o que precisamos adicionar. Como mostra o exemplo, se tivéssemos um modelo personalizado apenas para o blog e um modelo personalizado apenas para o podcast, é aí
que o colocaríamos aqui também, mas podemos usar o mesmo modelo de índice para ambos. Isso não é um problema. O que vou fazer é copiar a estrutura do nosso podcast e, em seguida, substituir todas as instâncias do blog por podcasts. Agora estamos simulando duas coleções diferentes em nosso site e estamos fazendo isso através da tag principal. Vamos reiniciar nossa instância Ghost para que possamos ver essas alterações em nosso site. Voltando ao nosso site aqui, página
especial ainda está funcionando. Isso é ótimo. Se formos ao Blog agora, veremos, e isso é algo para o qual temos que realmente ter um loop de postagem. Vou pular um pouco adiante, só para que você possa ver isso realmente funcionando. Eu ia esperar até escrevermos algum código, mas vou ter que escrever um pouco de código para vocês verem o que está acontecendo aqui. Só vou criar para cada loop para poder mostrar quais postagens estão sendo retornadas neste modelo. Vou escrever o título e vamos formatar isso como uma lista. Todo esse código está fazendo é percorrer todos os títulos de postagem que estão sendo veiculados nessa rota específica. Se eu voltar aqui, atualize. Você verá no modelo do blog, podemos ver todos os títulos das postagens que têm a tag principal do blog. Mas se formos a podcasts agora, você verá que temos apenas o título do episódio do podcast. Como você pode ver aqui, ainda
estamos usando o mesmo modelo, o índice de palavras está sendo exibido em ambos, mas o que estamos fazendo é simular duas coleções diferentes através do nosso arquivo routes.yaml. Só para ficar claro, se entrarmos em nosso administrador, todos
eles viverão na mesma área. Há apenas uma coleção aqui, ao contrário de outras plataformas de publicação. Isso é algo importante para se notar. É por isso que eu gosto de usar a palavra simular coleções diferentes porque no back-end, há apenas uma coleção e estamos apenas simulando diferentes com base na tag principal. Taxonomias, acho que são muito fáceis entender e não há muitas opções para alterá-las. Podemos nos livrar das taxonomias completamente ou podemos mudar essas palavras aqui. Mas além disso, não há muito que você possa mudar com taxonomias. O terceiro tipo de rota que vou passar neste vídeo antes de seguirmos em frente são canais. Canais, como diz na documentação, se rolarmos para baixo, taxonomias
passadas, são um fluxo personalizado de conteúdo paginado que corresponde a um filtro específico. A melhor maneira de pensar nisso é como um conjunto de resultados de pesquisa permanentes. Podemos retirar uma parte de filtro de nossa coleção e criar uma rota para visualizar essa fatia filtrada de conteúdo. Aqui na documentação, você pode ver que é exatamente a mesma coisa que uma rota personalizada, exceto que vamos colocar o canal do controlador embaixo, e então vamos definir o filtro. Vamos fazer isso agora. Lembre-se anteriormente que criamos nossa própria tag e nosso próprio autor, vamos criar um canal personalizado. Vou chamá-lo de canal personalizado. Mas você pode fazer essa rota o que quiser, obviamente. Então vou escrever o canal do controlador. Isso dirá ao Ghost que este é um canal e não uma rota personalizada normal. Então, o que vou fazer é adicionar no filtro. Vai ser tag, precisa ser tag de exemplo
e, em seguida, adicionamos o plus aqui para adicionar outra condição com o autor primário, que é exatamente como a tag primária de Christopher. Também podemos personalizar isso se quisermos. Poderíamos adicionar outro modelo. Poderíamos fazer um modelo de índice secundário se não
quiséssemos que ele fosse padronizado para o modelo de índice normal aqui. Mas acho que isso deve ser bom. Então, se eu atualizar aqui porque precisamos atualizar toda vez que alterarmos o arquivo routes.yaml, e vamos para essas rotas em nosso site, canal personalizado. Agora você pode ver que temos apenas um exemplo de post porque essa é a única postagem que foi marcada com tag de exemplo e é pelo autor principal de Christopher. Na verdade, há apenas um post que é do autor de Christopher e foi marcado tag de exemplo. Mas você entende o ponto. Ele está filtrando todas as nossas postagens e criando uma rota específica para esse conjunto de conteúdo filtrado. Isso é realmente importante porque se você tiver uma publicação grande e estiver colocando muito conteúdo aqui, você vai querer exibi-lo de maneiras diferentes. As formas como você organiza seu conteúdo, obviamente via tags predominantemente, você também pode filtrar via autor também,
mas as tags formam a base da sua organização. Através de rotas, o que podemos fazer é usar essas tags, usar esses autores, para criar canais personalizados e coleções personalizadas. Há mais alguns exemplos que eu poderia passar que eu falo aqui, mas acho que seria melhor apenas ler esses. Muitos deles não se aplicarão à sua circunstância específica,
mas aos princípios fundamentais aqui, rotas
personalizadas, canais personalizados, que é essencialmente uma rota personalizada com canal e filtro do controlador
e, em seguida, dividindo sua coleção em coleções diferentes, que eu gosto de chamar de simulação, e usar uma tag específica ou outra qualidade definidora para dividir a coleção nessas coleções diferentes. Sinto que essa é a principal coisa que você precisa saber em termos de roteamento no Ghost. Como mencionei antes, acho que o roteamento e a estrutura de modelos
personalizados no Ghost são algo que é bastante exclusivo para esta plataforma e oferece muita flexibilidade em termos de SEO ou como você deseja organizar seu conteúdo. É um sistema realmente inteligente que, uma vez que você dá a cabeça, é muito poderoso e você pode começar a personalizar de um número infinito de maneiras. Novamente, se a documentação
no site oficial não fizer sentido para você,
você pode se referir ao meu guia, o que explica isso de uma forma que faz mais sentido para mim. Mas em termos de aprendizado, algumas pessoas gostam de aprender através da documentação, algumas pessoas gostam de aprender visualmente, algumas pessoas gostam de aprender por meio de guias como esse, então o que quer que o ajude a entender os conceitos. Como sempre, se você não entender nada, você sempre pode fazer uma pergunta abaixo. Mas entre esses dois recursos, você deve ser capaz de entender o roteamento personalizado. Vamos deixá-lo lá e passar a escrever algum código agora. Vejo você no próximo vídeo.
9. Programando no contexto de um post: Nas três lições anteriores, configuramos nosso tema fantasma com vários modelos personalizados, como pode ser visto aqui. E atualizamos nosso arquivo routes.yaml para criar nossas próprias rotas personalizadas. Neste vídeo, vamos realmente começar a codificar nossos modelos porque obviamente, apenas colocamos no mínimo aqui apenas para ilustrar o ponto de rotas e modelos. Obviamente, não queremos que
esse conteúdo seja o único conteúdo exibido na página sobre. É hora de realmente começar a trazer alguns dos conteúdos dinâmicos
do nosso administrador fantasma e exibi-lo dentro do nosso tema. Caso contrário, qual é o ponto? O que vou fazer é ir até a documentação e eu
tenho a página no contexto já aberta. O contexto também é a próxima seção do meu guia. Lembre-se das quatro seções de modelos, rotas, contextos e ajudantes. O contexto é basicamente como escopo no desenvolvimento de temas fantasmas. O que precisamos saber é quais dados temos disponíveis para nós em quais modelos. Como afirma na documentação oficial do fantasma, existem seis contextos diferentes, e eu entro em cada um deles com mais detalhes no meu guia aqui. Se você quiser ver a lista completa de atributos em cada contexto, você pode ir para a documentação. Mas vamos ficar presos e começar a codificar nossos modelos. Com o tempo, vamos crescer uma compreensão mais profunda do que esses contextos realmente significam. Se eu ir para o meu editor de código aqui, vou fechar todas as minhas janelas abertas aqui, ou abrir abas. Vou entrar no modelo index.hbs. Agora antes, como vimos para eu demonstrar canais, tive que colocar nosso primeiro loop Foreach. Mas não entrei em muitos detalhes sobre como isso funciona. Obviamente, em modelos como índice ou qualquer outro modelo de índice personalizado, vamos passar por um loop de postagens. A primeira tag que vamos ver é a tag para Foreach. Agora, o que isso faz é que ele percorre todas as postagens que serão exibidas na rota específica que está visualizando esse modelo. Em seguida, teremos acesso dentro desse bloco a todos os atributos no contexto específico do que estamos percorrendo. Em temas fantasmas, a única vez que estamos realmente usando um loop Foreach é percorrer as diferentes postagens em nossa coleção geral. Em seguida, dentro de cada iteração do loop, temos acesso a todos os atributos do contexto do post. Tudo bem, então vamos voltar à teoria aqui e olhar para os contextos. Podemos ir até o contexto do post aqui. Se rolarmos para baixo, poderemos ver a lista de atributos do objeto. Como você pode ver, usei o Tidal nesse loop específico, mas temos acesso ao URL, à imagem em destaque. Temos acesso a todos esses dados dentro de cada iteração do loop post. Agora, é claro, temos acesso a essas informações em um modelo de postagem também para uma postagem individual, mostrarei como abrir esse contexto muito em breve. Mas, por enquanto, entenda isso dentro desse loop Foreach para cada iteração desse loop. Portanto, o conteúdo dentro desse bloco, temos acesso aos contextos de postagem. Isso nos dará a capacidade de retirar dados de cada postagem contida em nosso site fantasma. O que vou fazer é construir isso para algo melhor do que apenas uma lista. Aqui em cima, vamos digitar o blog. Aqui você pode ver nossa lista de postagens no blog, mas nenhuma delas está vinculada. Então isso é praticamente inútil. Isso não é muito útil para nós agora. Uma coisa que eu quero fazer antes de continuarmos, eu pensei nisso, é me livrar desse episódio de podcast e remover todas as tags do blog também porque não vamos
executar um blog e um podcast sobre esse particular site. Isso foi apenas para fins de demonstração. Então, tenha paciência comigo enquanto eu faço isso, vou avançar rapidamente e vou encontrá-lo depois remover as tags do blog de todas as nossas postagens. Isso é feito. A principal razão pela qual eu queria limpar isso é porque vamos
divulgar a lista de tags em cada post individual. Eu não queria ter um blog neles. Agora que atualizei a página, você pode ver que perdemos todas as nossas postagens do blog aqui. Eu só preciso voltar ao meu arquivo routes.yaml e configurá-lo de volta para o que era antes. Vou tirar o filtro e tirar esses efeitos de coleção de podcast. Vou tirar algumas dessas outras rotas aqui porque não precisamos usá-las. Isso foi apenas uma prova de conceito. Vou me livrar da página especial aqui. Exclua esse. Isso é tudo o que precisamos para nosso tema fantasma específico. Vou, é claro, reiniciar nossa instância fantasma porque fizemos alterações no arquivo de rotas e removemos um arquivo de guidão. Se eu atualizar aqui, você pode ver a lista completa de todas as postagens que temos em nosso site. Vamos começar a construir esses. Se eu fechar o arquivo routes.yaml. O que vou fazer é começar a usar alguns
dos atributos que temos no objeto de posto avançado e criar um bom cartão postal que podemos usar para clicar para entrar na página de listagem de postagem única. Aqui estão os caras de referência. Se você já está perdido de quais informações você pode obter de um post específico, tudo está listado aqui na documentação fantasma. Mas, por enquanto, vou começar a escrever essas postagens. Em vez de uma lista aqui, o que vou fazer é, primeiro lugar, um pouco de formatação. Vou colocar tudo isso em um contêiner de largura de página para que ele não esteja estendendo toda a largura da página. A menos que estejamos em um tamanho de tela menor, é claro. O que vou colocar aqui, são todos os posts. Então vou adicionar um pouco de uma descrição. Aqui você encontrará todas as postagens. Tudo bem, então vou criar um contêiner para essas postagens. Esses nomes de classe estão relacionados a classes que já configurei em um arquivo CSS. Se você está se perguntando de onde vem minha tomada de decisão sobre isso, é por isso. Mas para você será diferente dependendo quais estilos e estrutura você deseja para o seu próprio tema fantasma. Mas para eu ter um interior na div com a classe de posts, sou capaz de formatá-los na linha. Então, o que vou fazer dentro de cada iteração desse loop é abrir um cartão postal e, em seguida, dar a ele a classe adicional de cartão, que é uma classe de bootstrap. Vamos dar uma boa formatação. Então eu vou abrir uma tag if. Isso nos permite primeiro verificar se o atributo está realmente definido. Se houver uma imagem em destaque, vamos executar o código dentro desse bloco aqui. E se não, vou colocar na instrução
L, vamos executar o código dentro deste bloco. Eu ainda quero espaço reservado para a imagem para mostrar se não há uma imagem em destaque. Vou colocar na imagem SRC. Vamos apenas dizer que esta é a nossa imagem de espaço reservado. Este site via.placeholder.com nos permite colocar uma imagem de espaço reservado das dimensões que quisermos. Então, vou colocar essa dimensão porque ela combina com as fotos que já temos, em nosso site fantasma. Então, para nossa afirmação, se for verdadeira, vou colocar, geralmente gostaria de
otimizar essas imagens com base em determinados tamanhos de tela. Mas, por enquanto, vou dar a ele um único SRC e vou usar a ajuda no URL da imagem. Ainda não nos ajudamos,
mas há poucas palavras-chave que nos ajudam a fazer algo dentro do desenvolvimento de temas fantasmas. Então vou tirar a imagem em destaque. Vou pedir o tamanho médio. Além disso, vou adicionar outra condicional aqui para o alt se houver um alt. Vou abrir outro se aqui. Se uma imagem em destaque alt foi definida para este post específico, então o que eu quero ver é a tag alt. Dentro da tag alt, quero colocar o valor da imagem em destaque alt. Também vou dar a ele uma classe para formatação. Vou dar a imagem de cartão postal, que é uma classe que defini
e, em seguida, a classe bootstrap do topo da imagem do cartão. Se quisermos, podemos salvar isso e dar uma olhada no que temos até agora. Podemos voltar para aqui e você pode ver que nada está chegando no momento. Temos nossos cartões postais e parece que podemos ter cometido um erro aqui em nosso SRC. Meu erro foi dizer imagem em destaque. Esse nome faria mais sentido para mim, mas no Ghost, é apenas uma imagem de recurso. Vou salvar isso, voltar atrás, e agora você pode ver que as imagens estão aparecendo para cada post. Vamos continuar construindo nosso cartão aqui. Após a imagem em destaque, o que vou fazer é abrir uma div com a classe de corpo do cartão. O que vou fazer é seguir a estrutura do componente do cartão, como está presente no Bootstrap Versão 4, acredito, no 5.1.1. Se você tiver a mesma versão do Bootstrap, obterá o mesmo resultado. Vou fazer isso rapidamente aqui porque esta é uma classe HTML e CSS. Eu só quero demonstrar a vocês como
realmente trazemos alguns desses dados dinâmicos do Ghost. Temos um h5 com uma classe de cartão de título de cartão. Vou aninhar um link lá para o nosso URL e, claro, colocar um título lá. Então, embaixo dessa, vou adicionar uma tag p com a classe de texto do cartão e colocar o trecho da postagem lá. Agora, se salvarmos e atualizarmos nossa página em nosso navegador, você pode ver que temos esses cartões aqui com a imagem, o título e um trecho da postagem. Se eu clicar no título aqui, ele me levará ao modelo desse post, para o
qual ainda não criamos o código. Vamos construir sobre isso em vídeos futuros. Mas, por enquanto, vamos codificar nosso modelo de post porque isso é importante que tenhamos certo. Temos esse modelo alternativo em execução no momento. Como você pode ver no título que configuramos antes, ele diz que a configuração do modelo personalizado vai para admin. Se olharmos para o post de exemplo, ele diz que esse modelo é especificamente, por exemplo, post. Vou navegar até o terceiro,
que, como você pode ver, é apenas usando o modelo de post padrão. Vamos começar a codificar esse também. Se eu entrar no arquivo post.hbs, lembrando pessoal, que no nível básico, todas as necessidades do nosso site é um index.hps e um post.hbs. Se você souber codificar ambos, teoricamente você pode fazer todo o site. O que vou fazer é fazer como fizemos de forma semelhante ao índice, abrir um contêiner de página e aqui é onde, em vez de criar um loop, o
que nos dará acesso ao contexto de uma nova postagem dentro de cada iteração do loop, o que estamos fazendo é que estamos acessando um único post aqui. O que precisamos fazer para acessar o contexto da postagem, mesmo estando em uma única postagem, é abrir uma tag que se parece com isso, hash post. É muito simples. Em seguida, fechamos com o post de barra. O que isso faz é nos permitir acessar o contexto do post como tínhamos aqui para cada post individual. Agora podemos acessar todos os mesmos atributos em uma única postagem. Vou voltar aqui e o que vou fazer é adicionar algum código boilerplate. Vou ter um cabeçalho de post. Desculpe, vou voltar e dar a isso uma classe de cabeçalho de post, trazer de volta esse h1. Mas agora vai dizer que,
na verdade, vou dar a ele uma classe de título de post. No interior, vamos colocar o título da postagem real. Em vez de colocar um título estático, um título codificado, obviamente
vamos deixar o título da postagem passar. Então por baixo, por ser uma postagem no blog, vamos colocar a data em que foi publicado. Vou colocar isso em um período e usamos o ajudante aqui da data para formatar nossa publicação na data. Temos o atributo de publicado em e usando o auxiliar de data com este atributo aqui de formato, podemos então definir nosso formato para a data. Vou defini-lo para quadruplicar M, duplo D e quadruplicar Y. Vamos passar por essa seção de cabeçalho e, em seguida, criar uma seção com a classe de conteúdo do post. Então aqui, o que vou fazer é inserir o conteúdo da postagem e isso é feito para o atributo de conteúdo. Vou clicar em Salvar nisso, atualizar a página aqui e voila, temos o título da postagem. Temos a data em que a publicação foi publicada e temos todo o conteúdo que é preenchido automaticamente dentro da nossa tag aqui, postar conteúdo. claro, você pode verificar isso usando suas DevTools. Claro que recomendo o Google Chrome, mas o que você preferir usar. Aqui você pode ver todo o código que configuramos no modelo, mas com os valores dinâmicos chegando dentro dessa marcação. Se eu voltar ao blog e clicar no próximo post, você verá que é o mesmo modelo, mas com conteúdo diferente. Há um pouco de limpeza que precisa acontecer aqui com os diferentes links e outras coisas. Mas você entende o conceito, estamos colocando o conteúdo nesse modelo. Estamos colocando o título e a data de publicação, e agora temos um pouco de um site funcional. Para finalizar este vídeo porque parece que já é bastante longo. O que vou fazer é colocar algum código para a página Sobre. Agora, o engraçado sobre a página Sobre é que o contexto da página é praticamente idêntico ao contexto do post. É por isso que, se voltarmos ao nosso diagrama aqui, podemos carregar uma página no modelo de postagem porque estamos usando o mesmo contexto, independentemente de ser uma página ou uma postagem. Vamos ver isso em ação agora. Vou rolar para baixo até o contexto, volta ao que tínhamos antes, que era o contexto da página. O contexto da página, como está escrito aqui, é praticamente idêntico ao contexto do post e é acessado usando a mesma expressão de bloco. O que vou fazer é simplesmente ir em frente e copiar o código de post.hbs para page.hbs. O que vou fazer porque a grande diferença entre um post e uma página é principalmente a data. Vou apenas remover a data desse modelo específico, clique em Salvar nisso. Agora, se voltarmos à nossa página Sobre, você verá que não estamos obtendo o resultado que procuramos porque estamos realmente usando um modelo específico para a página Sobre. Mas vamos para uma página diferente, acredito que havia uma sobre privacidade. Desculpe, escrevi isso mal lá. Se formos para a página Privacidade, aqui você pode ver que temos o mesmo formato. Estamos dentro do nosso contêiner, temos nosso título e temos nosso conteúdo para a página. Então, na verdade, a única diferença entre páginas e posts é que não podemos percorrer uma lista de páginas, mas podemos percorrer a lista de postagens. Temos acesso aos contextos de postagem aqui. Temos acesso ao contexto da postagem dentro de uma postagem individual, e temos acesso a ele ao trabalhar com páginas também. O contexto do post é, na verdade, idêntico ao contexto da página. Você poderia argumentar que não há contexto de página, é apenas o contexto do post usado para páginas também. Vou embrulhá-lo lá para este vídeo porque
temos nosso bloco de construção central classificado. Temos nossa página de blog onde podemos ver todas as nossas postagens diferentes e agora podemos clicar e ver uma postagem individual. Onde ainda não abordamos todos esses modelos opcionais adicionais. Como trabalhamos dentro do contexto do autor ou trabalhamos dentro do contexto da tag? O que devemos fazer com esses modelos personalizados específicos que resultam em determinados autores, determinadas tags, determinadas páginas e determinadas postagens? Tudo isso abordaremos no próximo vídeo.
10. Programando no contexto de autor e tag: No último vídeo, começamos a codificar nossos modelos index.hbs, post.hbs e page.hbs e trabalhamos com o contexto do post. Os contextos de postagem se aplicam a todos esses três modelos, quer estejamos em um loop ou em uma única publicação ou página. Neste vídeo, vamos falar sobre os outros contextos, autor e tag,
e se tivermos tempo, vamos construir nosso tema usando esses modelos adicionais que
criamos para postagens, páginas e autores específicos. O que vou fazer é voltar ao meu site aqui e
vou navegar para uma de nossas rotas de autor. Se formos para a rota do autor Christopher, você pode ver que temos um modelo específico. Quero ir para o modelo de autor regular, que acredito que, se
digitarmos Ghost, deveríamos conseguir chegar. Lá vai você. Vou começar a trabalhar no modelo author.hbs em seguida, e o contexto em que vou trabalhar é o contexto do autor. Vamos para a documentação. Clique sobre Contextos, role para baixo e você pode ver a lista aqui. Temos índice, que na verdade não parece ter uma página nesta documentação. Temos uma página que é essencialmente a mesma que o post. Poste, obviamente. Em seguida, temos autor e tag. Também temos erro, mas não vamos aprender sobre erros nesta aula. Este é muito simples. Nem precisamos entrar nos contextos usando a tag que vimos no vídeo anterior. Podemos apenas exibir essas tags dentro de qualquer modelo de erro em que estamos trabalhando. Isso é apenas um pequeno detalhe que não vamos nos aprofundar nesta classe. Mas o que vamos abordar é o contexto do autor e da tag. Se eu clicar no contexto do autor, como diz aqui, “Autores no Ghost recebem cada uma sua própria página, o que gera uma lista de postagens que foram publicadas por esse autor”. Essencialmente no modelo do autor, temos acesso a esse contexto de autor, mas também temos acesso aos contextos de postagem por meio de um loop de 4h. Se eu rolar para baixo aqui, aqui estão alguns dos atributos do objeto do autor. O que vou fazer é criar uma página de listagem para o nosso autor. Só para começar, vamos copiar o código aqui em nosso index.hbs. Vou cancelar esses dois e vamos abrir o author.hbs. Vamos colar esse código aqui. Em vez de todas as postagens, vou dizer, “Todas as postagens por”, e aqui você encontrará todas as postagens por. Vamos salvar isso. Vamos atualizar aqui. Você pode ver aqui todas as postagens do autor Ghost. Ainda não trouxemos esses valores dinâmicos, mas você pode ver no loop, excluindo todas as postagens que foram escritas por autores diferentes do Ghost, e isso é essencialmente apenas um post. Todas as postagens antes dessa postagem agora estão aparecendo nesta página. O que temos que fazer é preencher esses valores dinâmicos. Vou mostrar duas maneiras de fazer isso. Sem abrir um bloco, podemos apenas acessar os contextos do autor executando o autor e, em seguida, o atributo, acredito que seja o nome, e então podemos simplesmente copiar isso aqui. Clique em “Salvar” sobre isso, atualize a página e você verá todas as postagens do Ghost. Aqui você encontrará todas as postagens de Ghost. Se houvesse outro autor que usasse o mesmo modelo, você diria o nome do autor em vez de Ghost, mas espero que você entenda o ponto. Este é um valor dinâmico. O que vou fazer é tornar isso um pouco mais realista. Eu também vou, em vez de ter que colocar o autor. na frente do nome cada vez, o que vou fazer é abrir o contexto do autor. Eu faço exatamente da mesma forma que abri os contextos de postagem
no vídeo anterior colocando uma tag aqui, começando com hash e depois colocando o autor. Então vou fechá-lo aqui. O que isso deve fazer é nos dar o mesmo resultado. Vou recuar esse código, atualizar e você verá que temos o mesmo resultado. O que vou fazer é rejeitar esta página e trazer a foto do autor também. O que vou fazer é o contêiner aqui em cima será um cabeçalho, e então eu vou ter duas colunas. Vou ter uma coluna para o usuário e dar um cartão para o autor. Então, vou ter esse conteúdo movido para o lado em uma segunda coluna. O que vou fazer é, em vez de ter todas as postagens por nome, o que vou fazer, arrastar isso para fora da nossa pequena expressão de bloco de autor aqui. Crie uma div com a classe do cabeçalho da página. Coloque isso lá dentro. Ainda vai ter todas as postagens do autor e colocá-lo lá novamente. Então o que vou fazer é criar um contêiner com a classe de página com barra lateral. Então, aqui, depois de abrir uma div, a primeira coluna, vou trazer algum conteúdo do autor. Coloque isso lá dentro. Então, na segunda coluna, vou colocar o resto desse código aqui. Cada div representa uma coluna neste caso. Eu posso apenas recuar isso corretamente lá, excluir parte desse amplo espaço, e aqui dentro da nossa pequena barra lateral, posso colocar em um cartão de autor. Novamente, vou usar a classe de cartão e isso me dará
acesso ao estilo dentro do Bootstrap. Abra um cartão. A primeira coisa que vou querer fazer é criar uma imagem com a classe de cartão img top e o SRC para isso virá do autor. Vou usar o Auxiliar de URL da imagem e depois acessar o atributo no contexto do autor da imagem do perfil. Então, para a ALT, apenas dirá, “foto do nome”, que será o nome do autor. Então, assim como antes, configurarei o corpo do cartão com um h5 com a classe do título do cartão, dentro, colocarei o nome do autor novamente. Se o autor tiver uma biografia, quero mostrá-la. Vou gerar um elemento HTML com a classe de texto do cartão aqui dentro. Só preciso colocar “bio”. Esse HTML só mostrará se houver um valor definido na bio. Finalmente, vou colocar uma meta área de autor aqui e vou colocar um código que pode parecer um pouco descolado aqui. Estou basicamente usando o auxiliar plural aqui para mostrar um número com a pluralização correta. Vai levar o título de paginação do que estamos vendo atualmente. Se estiver vazio, vai dizer, sem postagens. Em seguida, definindo para singular, queremos o número seguido de postagem e para o plural, vai dizer o número de postagens com postagens. Como você pode ver este auxiliar plural aqui, ele leva um certo número e, se for zero, não produzirá postagens. Se for singular, ele vai dizer um post e se for plural vai dizer que o número publica, então esse ajudante nos ajuda a produzir plurais. Vamos clicar em “Salvar” nisso e vamos atualizar. Parece que perdemos algo aqui, deixe-me voltar. Só vou mover isso um pouco para que possamos ver mais da tela aqui. Aqui estamos, posso ver que escrevemos incorretamente o singular. Se eu salvar, atualize aqui você verá que temos nosso cartão aqui. A formatação não está no ponto, apenas dê a isso uma largura máxima de 18, atualização
REM aqui. Obtendo resultados funky, não tenho a div certa configurada. Acho que é este aqui, e agora estamos obtendo o resultado que esperaríamos. Como você pode ver aqui, o que temos está na primeira coluna, temos o usuário. É Ghost com sua pequena imagem aqui, esta é sua biografia, que é definida pelos próprios Ghosts e são quantas postagens esse usuário escreveu. Então, é claro, você tem a lista de postagens geradas pelo
loop for-each e isso será limitado às postagens do usuário do Ghost. Vamos agora e fazer isso para o modelo de tag, coisa muito semelhante. Vou copiar em todo o autor e, em vez do nome do autor, vamos alterá-lo para o nome da tag. Em vez de todas as postagens por, vamos dizer todas as postagens com a tag de. Aqui você encontrará todas as postagens com a tag para garantir que a alteração do autor da tag. Agora, aqui, em vez de entrar no contexto do autor, vamos entrar no contexto da tag. Novamente, basta alterar o autor da palavra-chave para tag e agora substituindo alguns desses valores. Em vez da imagem do perfil, que é o que temos disponível no contexto do autor, temos imagem de recurso em vez disso e, em vez de lançador de nome, diremos pitcher para nome da tag. O que vou fazer também é verificar se temos um conjunto de imagens em destaque. Deixe-me fazer isso, é como fizemos antes. Se a imagem da feição e depois isso e, em seguida, termine para isso se bloquear, como tal. Tudo bem. Legal em vez de biografia, vamos fazer descrição e , claro, vamos nos livrar desse meta de autor. Vou clicar em “Salvar” nisso. Vamos para uma tag que não é tag de
exemplo porque lembre-se de que temos uma configuração de modelo especial para isso, então a única outra opção é começar. Aqui você pode ver todas as postagens com a tag de começar. Aqui você encontrará todas as postagens com a tag de começar. Muito autoexplicativo, certo? Aqui você pode ver que temos nosso nome da nossa tag lá. Se quiséssemos adicionar uma imagem, agora é detectado que não há conjunto de imagens porque colocamos nossa declaração if lá. Mas se quiséssemos, poderíamos entrar em nosso administrador, entrar em nossas tags, começar. Vou fazer upload de um do Unsplash. Vamos apenas procurar por começar, ver o que vem à tona. Isso parece certo. Vamos clicar em “Salvar” nisso. Vamos voltar aqui. Agora você pode ver que temos uma imagem preenchida na área superior da imagem do cartão. É essencialmente assim que você trabalha com a tag e o contexto do autor. Se você estiver no modelo do autor ou no modelo de tag, ou em um modelo de tag específico, como podemos ver aqui. Ou um modelo de autor específico, como podemos ver aqui. Em seguida, você tem acesso ao contexto do autor ou da tag. Agora, antes de seguirmos em frente e falarmos sobre consultas e parciais personalizados, eu só quero construir o resto desse tema. Acho que não passamos muito tempo nesta lição, então temos tempo para preencher rapidamente os outros modelos adicionais que estão dentro do nosso tema no momento. Percebo que não fizemos nada com a página inicial. Vamos apenas dizer bem-vindo e depois colocaremos o título do site. Usando esse objeto de site global, colocando o título, basta clicar aqui. Lá vai você. Diz bem-vindo ao Skillshare. Você pode ver que há um pequeno problema lá. Acho que temos um pequeno erro em nosso hbs padrão. Eu acidentalmente coloquei o logotipo do traço do cabeçalho no AH ref. Desculpas se você notou isso desde o início e estava gritando. Mas se eu atualizar aqui, agora
você verá isso para clicar em qualquer outro lugar e, em seguida, clicar lá, ele nos levará de volta à página inicial. Em seguida, também nessa página inicial, que adicionará uma consulta personalizada no próximo vídeo. Mas, por enquanto, vamos colocar tudo isso em um contêiner de largura de página. Salve e agora está no contêiner de largura da página. Tudo bem, então quais são os outros modelos que ainda não personalizamos. Se eu for para a página sobre, por exemplo, temos esta página/sobre.hbs. Acho que neste caso, quero que a página sobre.hbs pareça exatamente a mesma. Talvez eu exclua esse completamente, atualize minha instância fantasma. Agora, se eu voltar e ir para a página sobre, acabamos de ter um modelo de página normal em execução para a página sobre. Além disso, quero adicionar uma navegação para o blog agora. Vamos fazer o blog e depois adicionar essa rota lá. Clique em “Salvar” na cabeça aqui. Agora, se clicarmos em “Blog”, você pode ver que temos todas as nossas postagens. Não temos uma maneira de navegar para autores
específicos e não temos uma maneira de navegar para tags específicas. O que eu poderia realmente fazer é que eu possa pausá-lo lá e depois faremos isso no próximo vídeo. Vamos adicionar as tags e o autor a essas postagens. Em seguida, vamos personalizar esses modelos especiais que tínhamos. Por exemplo, nosso modelo de cabeçalho personalizado, que temos aqui, que você ainda não personalizou, e também vou exemplo o modelo de postagem. Temos esses outros funcionando bem. Mas aqueles outros dois que precisamos personalizar também. Este vídeo está ficando longo, então eu poderia cortá-lo lá, pessoal, e faremos isso no próximo vídeo.
11. Perguntas personalizadas e parciais: tempo levou a melhor de mim no último vídeo, mas está tudo bem. Vamos apenas fazer um vídeo extra para cobrir consultas personalizadas em
parciais e, em seguida, usaremos o vídeo depois disso para finalizar nosso tema fantasma, preencher esses modelos extras
e, em seguida, teremos um tema fantasma simples e concluído. Onde você quer levá-lo depois disso em termos de estilo
e imagens extras e modelos personalizados depende de você, mas quando terminarmos, você deve ter uma compreensão bastante sólida de como os temas fantasmas funcionam. O que eu quero fazer é avançar para consultas e parciais personalizados agora mesmo, e então vamos conseguir personalizar esses modelos específicos no próximo vídeo. A primeira coisa primeiro é que você teria notado que temos algum código de cópia e colado para o cartão postal coruja. O cartão postal sempre será exatamente o mesmo, não importa se estamos no modelo do autor,
no modelo de tag ou no modelo de índice. Isso significa que é um candidato perfeito para algo chamado parcial. Parciais como você pode ver, temos nossa pasta configurada aqui para nossos diferentes parciais. O que usamos parciais é separar pequenos pedaços de códigos que podemos reutilizar em nosso projeto. Em vez de escrever esse código e copiá-lo e colá-lo em vários modelos, o que vou fazer é colocá-lo em sua própria parcial. Vou chamar isso post-card.hbs. Vou pegar o código HTML do nosso cartão e guidão lá, cortar isso e colocá-lo aqui. Vamos consertar todo o recuo, salvar isso. A maneira como chamamos de parcial, agora que o movemos para lá é usando esse sinal maior que. Colocamos o maior que o login, abrimos uma string
e, aqui, colocamos o nome do cartão postal parcial. Agora, se formos para o índice que é a nossa página do blog, diz que o cartão postal parcial não pode ser encontrado. Acredito que seja porque não atualizamos nosso servidor. Lembre-se de que adicionamos um novo arquivo, então precisamos atualizar nossa instância fantasma. Bom pequeno lembrete lá. Atualizar. Agora você pode ver que temos exatamente a mesma aparência nesse modelo de índice. O que vou fazer agora é substituir o código duplicado por apenas esse pequeno código para o parcial. Isso tornará nossa base de código muito mais limpa. A outra coisa que podemos fazer, que vou mostrar no próximo vídeo, é criar parciais personalizados para navegação e paginação, que se os usarmos em fantasma sem esses parciais, ele produzirá o código padrão que nós fazemos não precisa sequer nos definir. Eles são como parciais especiais do sistema. Estou falando, por exemplo, quando vamos para default.hbs e temos essa tag de navegação aqui. Isso é quase como uma versão especial de uma parcial, mas sem ter que configurá-la em nossa pasta parcial. Se quisermos personalizar nossa navegação, podemos definir uma parcial lá para essa navegação e também para paginação, que abordaremos no próximo vídeo. Fique atento para isso. Essencialmente, porém, essa é a base dos parciais, retirando o código que você está copiando e colando em vários lugares, colocando-o em um local e apenas chamando-o onde você precisar. O segundo conceito sobre o qual quero falar neste vídeo são consultas personalizadas. Consultas personalizadas nos permitem extrair dados do site Argos e colocá-los em qualquer modelo. Acho que uma aplicação prática disso é para uma página inicial. Às vezes, quando você está em uma página inicial do blog, você quer ver a postagem mais recente. Usando uma consulta personalizada, podemos realmente fazer isso. Vou entrar na documentação para consultas personalizadas, que acredito que podemos encontrar em qualquer contexto ou ajudantes pensam que talvez nos ajudem aqui. Aqui vamos nós. Dentro dos auxiliares funcionais, podemos fazer uma consulta personalizada com isso, obter ajuda. Vou clicar nisso. Podemos ler sobre como podemos obter certas informações do nosso back-end e enviá-las onde quisermos. dentro para fora vai tema. Aqui vamos nós. Exemplos simples aqui podemos obter nossas postagens e isso nos permite criar um loop de postagem. Aqui não estão codificados que vou navegar até o nosso modelo home.hps. O que vou fazer é construir isso um pouco. Vou adicionar uma div com uma classe de cabeçalho inicial. Depois do H1, posso fazer uma descrição do site. Retire a descrição, atribua do objeto global do site e coloque isso lá. Depois desse cabeçalho, vou abrir o ajudante get. Vou solicitar as postagens e vou garantir que elas incluam tags e autores. Usaremos esses dados no próximo vídeo. Vou fechar esse bloco para chegar lá. Então vou colocar o H2 e dizer as últimas postagens. Então aqui podemos criar um loop para cada e ter acesso às postagens, mesmo que não estejamos em um modelo de índice. Posso ir para cada postagem, fechar o bloco lá. Também vou colocar isso dentro de uma div com a classe de posts na linha. Novamente, todas essas classes, só para formatação e estrutura. Ele está relacionado ao CSS que tenho no meu arquivo principal. Não fique confuso com isso. Isso é só eu dando alguma formatação para isso. Nesse loop, posso exibir a parcial que criamos pós-cartão. Há duas outras coisas que eu quero fazer aqui. Quero limitar isso a apenas três resultados. As últimas três e certifique-se de que elas sejam classificadas por publicadas mais recentemente. Publicado em decrescente. Salve isso. Volte para nossa página inicial. Você pode ver, bem-vindo ao Skillshare pensamentos, histórias e ideias, que é a descrição padrão de um site fantasma. Obviamente, podemos entrar nas configurações do nosso site e alterar isso. Nós vamos detalhes gerais da publicação, título e descrição. Digamos que, em vez de Skillshare, é um site fantasma e digamos que este é um exemplo de site fantasma, salve essas configurações, volte e você verá que atualiza a página inicial. Ele atualiza o logotipo, atualiza tudo. Este é um exemplo de site fantasma. Mas o mais importante, o que temos aqui é uma lista das últimas três postagens no site, para que os usuários possam ver uma prévia das postagens no site sem ter que navegar até a página do blog. Este é um pouco curto ou mais curto em comparação com os outros. Mas no próximo vídeo, vamos abordar o que não conseguimos terminar no último vídeo, que estava construindo esses modelos personalizados. Aqueles especificamente para o exemplo publicam especificamente para modelos personalizados definidos no admin fantasma. Adicione a capacidade de navegar para diferentes autores e tags dos próprios cartões postais. No próximo vídeo, abordaremos isso. Em seguida, encerraremos nosso projeto e começaremos a levar nosso lado ao vivo.
12. Completando o tema: Nesta lição final, antes de começarmos a analisar a hospedagem e tornar nosso site ao vivo, vou adicionar alguns links para autor e tags aqui para
cada post e, em seguida, também precisamos atualizar esses modelos personalizados. Depois de fazermos isso, devemos ter um tema fantasma bem funcional. Obviamente, há muito mais que poderíamos fazer aqui, mas isso completará um projeto básico para nós. A primeira coisa que quero fazer é que possamos navegar até os autores individuais e a página de tag individual, o que eu quero fazer é adicionar a tag e o autor aos nossos cartões postais. Vou ao blog aqui para que possamos ver todos os cartões postais. Vou entrar no meu editor de código, uma vez ir ao cartão postal e vou começar a adicionar algum código sob o trecho. O primeiro que vou fazer é um link para o autor. Vou formatá-lo como um botão Bootstrap. Vou dar a isso a classe de btn btn-primary. São os campos href, classe. Em seguida, vou definir o href, que será o URL principal do autor. Ele apenas mostrará o autor principal, que é um conceito semelhante à tag primária, caso existam vários autores lá. Pode fechar isso e, em seguida, vou dizer pelo autor.name primário. Agora, antes de deixarmos isso
lá, há uma consideração a ser feita e isso é que não queremos ter um link para o autor principal quando estamos vendo esse cartão postal na página do autor. Se estivermos no contexto do autor, não queremos ver um link para o autor porque isso seria apenas um link circular. O que podemos fazer é verificar se estamos no contexto
do autor usando este ajudante especial é. Mas, neste caso, queremos verificar se não estamos nesse contexto de autor. Podemos colocar esse pequeno personagem aqui para procurar o oposto. Este código aqui será executado se não tivermos acesso ao contexto do autor. Vou fechar o está lá e agora para as tags. Vou usar tags de cartão e aqui tudo o que precisamos
fazer é apenas colocar as tags de palavra-chave e apenas escrever tags assim,
como você verá na documentação, exibirá uma lista de tags separada por vírgulas, e cada tag irá seja um link para essa tag. Se eu atualizar aqui, agora você pode ver que temos um botão para ver o autor e
temos nossas diferentes tags que foram definidas nessa postagem. Se eu clicar no botão comprar fantasma “aqui, você verá que temos nosso modelo que configuramos antes. Se eu clicar em “Começar”, e você pode ver que temos nosso modelo para começar que vimos antes. Mas lembre-se de que criamos um modelo diferente para Christopher Dodd. Minha rota de autor tem um modelo diferente e temos um modelo diferente, por exemplo, tag. Eu queria colocá-los lá primeiro para que possamos navegar facilmente para eles. Voltando ao blog aqui, precisamos personalizar esses modelos. Também precisamos personalizar a publicação de exemplo. Definimos um modelo especificamente, por exemplo, post e
precisamos alterar esse modelo personalizado que definimos no admin fantasma também. Temos quatro modelos que precisamos corrigir aqui. Vamos entrar no código e vamos corrigir o, o que devemos fazer primeiro? Vamos fazer o modelo de autor Christopher. Vamos entrar no autor-Christopher.hbs. Como sei que vamos passar por um índice, vou copiar e colar algum código do nosso índice aqui e colocar isso aqui. Em vez de ter um título aqui, criei uma classe em nosso cabeçalho CSS para autor. Vou acima dessa largura de página para criar um cabeçalho de largura total. Vou entrar no contexto do autor, depois fechá-lo para que não nos esqueçamos. Aqui dentro, vou criar uma div com a classe de cabeçalho do autor e dentro dela vou ter um h1. Vou colocar um pequeno aqui também. Dentro do pequeno, vou dizer posts até e depois da pequena saída,
o nome do autor, o nome do autor, que dado esse modelo só se aplica ao modelo de autor para Christopher, na verdade não
precisamos de valores dinâmicos. Poderíamos codificar isso em. Mas acho que é um pouco mais limpo ter os valores dinâmicos no caso de queremos alterar isso ou copiar e colar esse código. A outra coisa que eu quero fazer é ter a imagem do autor, então temos cor de fundo. Isso é algo que precisaremos ser dinâmicos porque sempre podemos entrar e alterar a imagem da capa do autor. Vou usar o auxiliar de URL da imagem novamente e depois colocar a imagem da capa, que é um atributo no objeto autor. Pressionando “Salvar” nisso, voltando para aqui. Agora você pode ver que temos esse cabeçalho. Ele diz postagens de e que tem o nome do autor, e depois tem a lista de postagens. Você não pode vê-lo agora, mas é suposto ser uma imagem de fundo lá. Vou entrar em minhas configurações aqui, entrar na equipe, entrar em Christopher Dodd, e vamos mudar a capa. Vamos fazer upload de uma imagem. Temos uma pasta aqui com alguns exemplos. Vamos apenas dizer que essa é minha imagem de capa. Agora, se eu for aqui, não está aparecendo e isso é porque eu erroneamente coloco cor de fundo aqui, não imagem de fundo, atualizando aqui e você pode ver agora eu tenho esse banner aqui. Se entrarmos na nossa página do autor Ghost, você pode ver que temos o modelo padrão que está tendo o cartão do autor nesta coluna da esquerda aqui. Mas se eu for especificamente para Christopher Dodd, eu tenho esse layout em vez disso. Isso nos permite personalizar determinados layouts. Talvez esse autor seja particularmente especial e precise de um modelo personalizado. Bem, nesse caso, podemos personalizá-lo usando nosso conhecimento da estrutura
do tema que estabelecemos anteriormente nesta classe. Vamos fazer a mesma coisa pela nossa tag agora. Tag example-tag, vou fechar esses arquivos abertos novamente. Na tag tag-example-tag, vamos apenas copiar o mesmo formato que tínhamos no autor-Christopher. Vou mover isso. Em vez de autor aqui, queremos colocar a tag porque estamos inserindo os contextos de tag agora e em vez da imagem da capa, precisamos usar a imagem apropriada para uma tag que é imagem de recurso que vimos antes. Então não vamos ter postagens por, só teremos o nome da tag. Isso é um pouco errado aqui porque estamos copiando em um cabeçalho que configuramos para autor. Na verdade, podemos entrar no nosso arquivo CSS e apenas corrigi-lo agora, cabeçalho do
autor, se eu quisesse ser um pouco mais limpo aqui. Digamos que o cabeçalho da imagem. Vou consertar isso para vocês agora. Em vez disso, vamos usar o cabeçalho da imagem da classe. Como estamos usando isso em mais do que apenas o modelo do autor. Acertar “Salvar” e passar para aqui. Aqui está um link para os diferentes modelos de tags. Podemos ir para o modelo Tag padrão, que está sendo executado para tudo que não seja tag de exemplo. Mas se quiséssemos ver esse especial, podemos clicar em “Example-tag” e você pode ver que temos nosso cabeçalho agora. A formatação não se deparou, o que provavelmente é devido ao cache intenso de fantasmas. Só vou abrir o DevTools, permitindo que eu esvazie o cache e o recarregamento rígido. Depois de esvaziar seu cache e recarregamentos rígidos, você deve começar a ver essas alterações CSS entrando em vigor. Lá vamos nós. Agora temos nosso bom cabeçalho aqui com o nome da tag e a imagem da tag em segundo plano. Agora acabamos de obter nossos modelos especificamente para o post de exemplo
e, em seguida, temos nosso modelo de cabeçalho personalizado que definimos no admin fantasma. Vou começar com este porque ele vai ter o mesmo formato. Vou para o cabeçalho personalizado. Mais uma vez, vou copiar daqui. Vou me livrar disso aqui porque não estamos percorrendo uma lista de postagens. Vou mudar isso para postar para que possamos ter acesso ao contexto da postagem. Vou mover isso para os fins porque vamos precisar de acesso aos contextos de postagem por toda parte. Vou manter esse cabeçalho da imagem e, em vez da imagem da capa, imagem do
recurso é o atributo no contexto do post. Mais uma vez, não publique por. Vamos ter o título da postagem do blog
e, em seguida, vamos copiar em frente ao modelo de post aqui, esse pedaço de código. Vamos salvar isso, volte. Aqui, você pode ver que temos o título em dois lugares, então vou remover o título aqui. Salve e aqui, você pode ver que temos nosso modelo alternativo, que coloca a imagem em destaque por trás do título e, em seguida, tem o título sobreposto nele. Ele ainda tem a data, ainda tem o conteúdo, mas também temos isso. Agora vamos fazer o modelo final. Vamos entrar no blog,
entrar em um post de exemplo. Para o post de exemplo, o que vamos fazer é voltar para o código novamente. Digamos que o modelo, por exemplo, postagem será o mesmo que o post, mas teremos apenas uma lista de artigos relacionados na parte inferior. Só faremos isso para esse modelo específico. O que vamos fazer, fecharei tudo isso novamente, e vamos postar um exemplo de post e
copiaremos o conteúdo do modelo de postagem padrão. Farei isso. Vá até aqui, cole isso, e agora vamos ter exatamente a mesma aparência de antes. Mas desta vez o que eu quero fazer é adicionar, e essa é outra consulta personalizada sobre a qual aprendemos no vídeo anterior, o que vou fazer é escrever um post get abaixo aqui. O que farei antes disso é criar um artigo com uma classe de, este será um valor dinâmico, o post_class, e então eu vou embrulhar nosso artigo nisso. Dessa forma, vamos diferenciá-lo do que estamos prestes a fazer abaixo, que é abrir uma consulta personalizada. Vamos para as postagens. Vamos incluir as tags e autores porque queremos ter
esses atributos lá para que possamos acessá-los e ter esses links que criamos no início desta lição, depois vou filtrar pela tag primária. Se a tag primária for igual à tag principal desta postagem
, quero mostrar essas postagens semelhantes novamente. Vamos acabar com isso. Obter postagens em recursos é a classe. Então eu vou adicionar o título aqui, artigos semelhantes. Em seguida, crie um contêiner para essas postagens e vamos configurar o loop. Vamos tê-lo exatamente como fizemos na página inicial. Vou pegar esse loop aqui e mostrar os
três últimos que temos que compartilham a tag principal do post que estamos vendo. Vou clicar em Salvar nisso, atualizar aqui e você pode ver que isso traz através do exemplo original. Só precisamos remover o post de exemplo. Vou adicionar outro filtro aqui que diz que ID não é post.id. Nós salvamos isso, não obteremos artigos semelhantes, então o que eu poderia fazer é fazer o oposto e colocar isso no modelo de post padrão e este outro pode ser uma versão limpa . Basta envolver isso com uma tag de artigo, classe, post_class e, em seguida, embaixo aqui, vou postar isso em. Pegue este código, coloque-o dentro do artigo, conserte um pouco de aninhamento aqui. Então, se eu clicar em “Salvar” nisso, você verá, por
exemplo, posts, nós apenas temos o post sem postagens semelhantes, mas se eu for ao meu blog e eu for a qualquer um dos nossos artigos de boas-vindas,
este, é claro, está em um diferente modelo, então eu tenho que adicionar exatamente o mesmo código ao nosso cabeçalho personalizado também. Acho que precisamos nos livrar do espaço em branco aqui, não
parece gostar disso. Lá vamos nós. Recebemos nosso autor de volta agora e nossas tags aqui. Temos artigos semelhantes aqui. Se passarmos ao nosso modelo personalizado aqui, não
obteremos o mesmo resultado. Acho que isso é porque ainda estamos no contexto do post. Eu só vou mover isso para cá, pois não precisamos disso aqui em baixo. Salve, atualize aqui e agora você pode ver que temos nossos artigos semelhantes chegando. Eles estão chegando no modelo de cabeçalho personalizado, estão chegando no modelo de post padrão, mas não estão chegando no post de exemplo. Claro, esse é apenas um exemplo de como podemos
ter postagens diferentes no blog mostrando modelos diferentes. Quero adicionar mais algumas coisas aqui. Sei que esse vídeo vai ser particularmente longo, mas quero mostrar algumas coisas que tornarão este site ainda mais completo. Uma das coisas que eu quero fazer, aqui, acabei de notar que temos o mesmo problema novamente. Deixe-me voltar para a página inicial aqui. Certifique-se de que não haja espaço entre tags e autores. Lá vamos nós, isso consertou. O que vou fazer é algo que notei é que quando clicamos em um post, não
há navegação que volte para o blog. Claro, podemos clicar aqui no cabeçalho, mas acho que algumas migalhas de pão seriam boas aqui. Então, vou adicionar algumas migalhas de pão também. Vou usar o formato padrão dentro do bootstrap. Vou entrar, vamos apenas dizer postar primeiro. Na verdade, vou usar isso em todos os modelos de postagens, então eu poderia simplesmente ir direto para fazer uma parcial. Eu chamo isso de breadcrumbs.hbs. Então vou começar a escrever algum código de bootstrap padrão. Vou avançar rapidamente por isso porque a estrutura é apenas componentes de bootstrap padrão. Então eu vou verificar com você no final para explicar. Muito simples. O único valor dinâmico é o título da postagem atual. Caso contrário, vamos ter uma barra e um link de volta para o blog. Agora podemos incluir isso aqui em nosso post. Vou colocá-lo logo acima do cabeçalho do post aqui. A sintaxe para incluir uma parcial, como vimos antes, abre esse sinal maior do que e, em seguida, coloque o nome de sua parcial entre aspas duplas. Vamos apenas verificar se isso funcionou. Lá você pode ver que temos um pequeno breadcrumbs
formatado e vamos adicionar isso a todos os nossos modelos de postagem personalizados. Aqui vamos nós, exemplo de post. Então, para o nosso cabeçalho personalizado, lembre-se de que também podemos usar esse cabeçalho personalizado nas páginas. Quero colocar um cheque extra aqui para ter certeza de quando não estiver em uma página. Eu vou fazer, se não for a página, então vamos colocar o parcial para as migalhas de pão. Não queremos que as migalhas de pão mostrem se estamos em uma página. Claro, isso é uma preferência pessoal. Você ainda pode ter as migalhas de pão, mas simplesmente não faria sentido com o link de volta para o blog. Se eu entrasse na minha página sobre, por exemplo, e eu mudasse isso para nosso modelo de cabeçalho personalizado, não veria esses breadcrumbs. Enquanto que se eu entrar no post aqui onde sei que estamos executando esse modelo personalizado, posso ver que as migalhas de pão aparecem. Mais uma coisa minúscula e depois terminaremos é que
acredito que vamos precisar de alguma paginação aqui. Como vimos antes com a tag de navegação, se apenas adicionarmos uma tag com a palavra paginação aqui, ela funcionará, mas não ficará tão boa quanto esperamos. O que vou fazer é adicionar alguma paginação e depois vou personalizá-la criando uma parcial separada. Primeiro de tudo, para realmente decretar a paginação, porque agora há apenas uma página, vou limitar as postagens a seis postagens por página. A maneira como fazemos isso é em nosso arquivo package.json, role para baixo até o final, deve
haver esse objeto de configuração, se não, simplesmente criá-lo. Aqui você pode ver as postagens por página. Vou definir isso para seis. Acredito que precisaremos reiniciar nosso servidor Ghost depois de
alterá-lo , para que seja executado, Ghost restart. Agora, se eu ir para a nossa página do blog, você pode ver que estamos vendo apenas as seis postagens mais recentes. Vamos precisar de alguma paginação para navegar para as outras postagens. Entrarei em nosso arquivo index.hbs e depois desse loop, adicionarei a tag simples, paginação. Refrescante aqui, vamos dar uma olhada em como isso parece. Aqui você pode ver que estamos na Página 1 de 2, e podemos procurar postagens mais antigas, e aqui ele gera automaticamente posts mais recentes. Vou fazer com que isso pareça um pouco mais agradável usando as aulas do Bootstrap. Para isso, o que precisamos fazer é configurar uma parcial para personalizar a paginação. Vou fazer pagination.hbs e para este, para economizar tempo, vou copiar e colar algum código, e então vou explicar. Esta é apenas a estrutura padrão do Bootstrap para paginação. O que estamos fazendo aqui em termos
do código do guidão é que, se houver um item anterior, queremos ter um link para ele aqui. O texto desse link será anterior e
usamos o auxiliar de URL da página para colocar o link para a página anterior lá. Então vamos ter a página atual como ponto e, se houver uma próxima página, faremos o oposto do que fizemos aqui e temos um link para a próxima página. Claro, acabamos de criar um novo arquivo, então precisaremos atualizar nosso servidor. Em seguida, indo para nossa página de índice aqui, você pode ver que agora temos uma paginação formatada Bootstrap mais agradável. Lá vai você. Funciona perfeitamente e mostra em que página você está atualmente. Como eu disse no início desta lição, há muito mais personalização e recursos que podemos oferecer ao nosso site Ghost, mas isso abrange essencialmente todos os pontos principais, todos os fundamentos para suas necessidades de desenvolvimento de temas Ghost. Para recapitular, criamos os modelos mais importantes, como o modelo de postagem. Construímos o modelo de índice. Criamos um modelo inicial que lista os três posts mais recentes. Temos um modelo de página padrão que mostra nossa página sobre
e, em seguida, temos modelos para os autores usando o contexto do autor. Temos um modelo alternativo para o autor, especificamente pela lesma de Christopher. Temos um modelo para filtrar por uma determinada tag e, novamente, temos um modelo alternativo para filtrar por uma tag específica. Então, finalmente, temos dois modelos alternativos de postagem. Temos este com o cabeçalho personalizado e, em seguida, temos este, que é essencialmente o mesmo que um modelo de post normal, mas sem os artigos semelhantes. Quero observar aqui que usei um pouco de sintaxe que não foi necessariamente explicada. Eu queria entrar aqui e tornar isso o mais prático possível e mostrar como construímos nosso tema Ghost. Mas se você já está confuso sobre alguns dos ajudantes que usei aqui ou a sintaxe, o melhor lugar para procurar é a documentação. Algo que não nos aprofundamos nesta classe foi a lista de diferentes ajudantes, mas como você pode ver aqui, temos muito aqui em termos de verificar o contexto da rota atual. Vimos isso um pouco nesta classe, obviamente testando condicionais muito simples com instruções
if usando get para criar consultas personalizadas, mas você também tem outras coisas como os objetos do site, que usamos um bit, navegação. Temos todos os tipos de dados diferentes que podemos acessar e esses auxiliares de utilitários aqui, o que vimos. Coisas como adicionar código do Ghost automaticamente na cabeça, colocando classes CSS dinâmicas, podemos até renderizar o tempo de leitura estimado para uma postagem. Essas são todas opções dentro do Ghost, e se você quiser procurá-las, elas estão aqui em ajudantes. Também falo sobre isso no meu artigo, então, se você estiver interessado em ler mais, você pode aprender sobre os diferentes contextos e como os temas
Ghost são codificados usando guidões aqui. guidão vem com sua própria sintaxe, mas também foi estendido em temas Ghost. A teoria por trás de tudo isso, eu encorajo você a ler neste guia, ele será publicado no momento em que você estiver assistindo a este vídeo, mas eu não quero ficar muito atolado em tornar este curso altamente teórico. O feedback sobre alguns desses cursos que eu fiz antes é que as pessoas querem ver essa teoria colocada em prática. Não me concentrei muito na sintaxe de codificação de temas Ghost, mas acho que o que é muito importante notar é entender se eu rolar esse diagrama aqui e rotear, porque isso forma a estrutura do seu tema Ghost. Se você não entende esses fundamentos , então você pode ser realmente pego e se perguntando o que você deve fazer para criar modelos diferentes para rotas diferentes. Isso é muito poderoso e fica no centro do Ghost. As outras coisas, como a sintaxe específica a ser usada para verificar as coisas, você pode facilmente procurar e vimos alguns exemplos com a codificação do nosso pequeno tema Ghost aqui. Eu encorajo você, como entraremos no projeto de aula, a criar sua própria versão disso, mas na próxima lição, vamos aprender como publicar isso ao vivo em um site na Internet para que nós pode realmente mostrar nosso tema Ghost para o mundo e espero usá-lo em um ambiente de produção. Vejo você no próximo vídeo.
13. Como publicar o seu tema: Nesta lição, falaremos sobre colocar o tema
Ghost em um ambiente de produção, ou seja, levar nosso site Ghost ao vivo e publicá-lo na Internet. Tenho algumas abas abertas, que vão nos ajudar com esse objetivo. Tenho o artigo aqui do Ghost sobre como instalar o Ghost. Aqui você pode ver que fizemos uma das opções aqui, que é a instalação local. Mas se você rolar para baixo para hospedagem na nuvem, há três opções sobre as quais falaremos em apenas um segundo. Então também o que vamos fazer é olhar para integração
do GitHub Ghost e isso nos
permite fazer uma simples integração contínua do tema Ghost, implantando diretamente em nosso site Ghost. Basicamente, o que temos que fazer quando fazemos alterações nosso código de tema Ghost localmente é enviar esse código para nosso repositório e o GitHub Actions o criará para nós e atualizará automaticamente nosso site Ghost ao vivo. Esta é uma integração muito poderosa em termos de atualização do seu site ao longo do tempo. Depois de entrar ao vivo, você pode querer fazer modificações aqui e ali. Você fará isso mais uma vez localmente e, em seguida, se você apenas enviar essas alterações para o GitHub com essa integração, ela entrará diretamente no seu site Ghost. Agora, voltando ao primeiro artigo aqui, como instalar o Ghost. A primeira linha, como diz, a maneira mais rápida de começar a configurar um site no Ghost é no Ghost Pro. Rolando aqui até as opções de nuvem novamente, DigitalOcean é o que eu uso e uso o DigitalOcean porque é mais barato que o Ghost Pro. Mas é claro, é um pouco mais difícil de configurar e não é algo que vamos entrar nesta classe. Eles costumavam ser um serviço que o Ghost forneceu cabo Ghost Valet e eles cuidavam de toda a instalação para você por uma taxa única. Isso não parece estar mais disponível. Então, no segundo site que configurei na DigitalOcean, tive que passar pelos passos sozinho e foi um processo um pouco complicado para alguém que não está muito familiarizado com as configurações do servidor. Para essa aula, o que eu vou recomendar e o que vou
falar com vocês é usar o Ghost Pro, que será a maneira mais simples de colocar seu site e essencialmente, usar o próprio Ghost para gerenciar o hospedagem para você. Como diz aqui, hospedagem gerenciada oficial, vou clicar nessa opção e, como você pode ver, há um custo para isso. Infelizmente, qualquer hospedagem de sites, haverá algum custo. Se rolarmos aqui para baixo,
precisaremos, no mínimo, do plano do criador porque estamos usando temas personalizados. Se tirarmos, o desconto anual será de US $31 por mês. Com desconto anual, será mínimo de US $25 por mês. Mas a boa notícia é que, para nossos propósitos, aprendendo a fazer isso, podemos testá-lo iniciando um teste de 14 dias. Vou clicar nisso e vocês podem acompanhar,
desde que não tenham feito o teste antes dele e vamos criar uma conta. Vou chamar isso de chrisskillshare e, em seguida,
vamos usar a senha sugerida e copiá-la em algum lugar para não perder isso. Ele vai pedir os detalhes do seu cartão porque, após a avaliação de 14 dias, ele cobrará automaticamente seu cartão, se você não quiser que isso aconteça, obviamente, certifique-se de cancelar antes dos 14 dias. Acho que muitas pessoas não gostam disso,
mas se você acabou de configurar um lembrete em seu telefone ou computador para garantir que você cancele antes que os 14 dias terminem, você nunca será cobrado e eu nunca fui cobrado por qualquer coisa que eu não quisesse ser cobrado, simplesmente porque sempre me lembro de colocar um lembrete. Para aqueles de vocês que se preocupam particularmente com a cobrança do cartão, certifique-se de colocar esse lembrete. Tenho os detalhes do meu cartão salvos aqui. Só vou colocar isso, detalhes confirmados, e então eu vou bater continuar. Aqui você pode escolher que tipo de personalidade você é. Vou bater em Developer porque é isso que eu sou. Agora clique em continuar e agora podemos dar um nome ao nosso site. Vou chamá-lo de Ghost Site. Em seguida, vou clicar. Vamos fazer isso. Parece que algo está errado com
o Stripe. Vamos tentar novamente. Parece que funcionou na segunda vez. Agora está girando agora, concluindo nossa instalação e finalizando nossa configuração. Então, assim como tínhamos em nosso computador local, temos uma nova instalação. Se eu entrar em posts aqui, você pode ver que temos todas as mesmas postagens padrão que tínhamos antes, as mesmas páginas padrão
e, claro, o membro da equipe do Ghost e nosso usuário aqui, que definimos quando fizemos login pela primeira vez. Essa é a grande coisa sobre o Ghost Pro. Para chegar a este ponto, usando o DigitalOcean ou o Linode, leva alguns passos extras. Enquanto o uso do Ghost Pro nos permite colocar um site Ghost em funcionamento super rápido. Como você pode ver aqui, podemos acessar nosso site, ghost-site.ghost.io. É muito legal que o site fantasma estivesse realmente disponível como nome de site. Mas quando você estiver assistindo a essa aula,
este site provavelmente deve estar inativo de qualquer maneira. Temos o mesmo ponto de partida que tínhamos antes quando instalamos localmente. Agora, o que vamos fazer é empacotar nosso tema e enviá-lo para este site Ghost ao vivo. Lembre-se de que entramos em configurações aqui para ver temas e dentro do tema aqui temos Casper. Agora, uma das coisas que eu não fiz quando entramos no tema Casper originalmente foi que eu não alterei os detalhes no arquivo package.json, então vou mudar para o editor de código agora. Vamos fechar tudo, exceto o arquivo package.json. Se eu rolar para cima, você pode ver que nosso tema ainda é chamado Casper. Vou começar a renomear isso, digamos tema fantasma personalizado, e vamos mudar alguns desses outros detalhes também. Tema fantasmas personalizados por Chris Dodd. Não precisa colocar uma demonstração lá. Vamos apenas dizer que é a versão 1.0. Livre-se dessas capturas de tela. Em vez de autor, vamos colocar nosso nome real, e-mail, livrar-se do URL lá. Provavelmente podemos deixar todo o resto desses aqui. Repositório, vamos nos livrar disso. Esses links são especificamente para o tema Casper, então vou me livrar deles também. Apenas removendo tudo o que é específico Casper e especialmente mudando algo como o nome. Agora, o que vamos fazer é abrir uma janela do Finder. Um segundo, enquanto eu reorganizo minha janela aqui e depois vamos ao nosso site Ghost aqui. Quando estivermos dentro da pasta do site Ghost, podemos clicar nos temas de conteúdo atuais para acessar nossa pasta de temas. Aqui você pode ver nossa pasta de temas Casper aqui, mas é claro, modificamos fortemente o código dentro da nossa pasta Casper aqui, então o que vou fazer é,
em primeiro lugar vou compactá-lo, e então vou renomear o tema , tema personalizado. Agora temos nosso tema empacotado em uma pasta zip. Agora podemos enviá-lo para nosso site Ghost ao vivo. Vou para o nosso site Ghost, a versão de produção. Certifique-se de que você está na versão de produção, não na versão local, pois realmente não precisamos carregar um tema para nossa versão local. Já o temos aqui no nosso computador. O que vou fazer é clicar neste botão verde para fazer upload de um tema. Pegue esta versão zip do tema e, em seguida ele me perguntará se eu quero ativá-lo e vou clicar em Sim para ativar. Agora posso clicar neste botão aqui e agora
podemos ver nosso site Ghost agora carregando em nosso tema. Uma coisa a observar aqui é que a navegação é diferente, como você pode ver aqui em cima, e então o que farei é replicar nossa navegação aqui em nosso site ao vivo para o que construímos em nosso site local. Clique em Configurações aqui, vá para a navegação e vamos remover esses links. Acredito que tínhamos casa, sobre e blog. Blog aqui, clique em salvar. Agora, se voltarmos ao nosso site, você pode ver, vamos atualizar mais uma vez. Agora você pode ver que temos a mesma navegação ou semelhante à que tínhamos em nossa instalação local. Mas há mais uma coisa que precisamos mudar aqui e isso é carregar nosso arquivo de rotas atualizado. Se entrarmos em Configurações aqui e depois rolarmos para os laboratórios, não sei por que está em laboratórios, porque é uma coisa muito importante que precisaríamos fazer. Mas aqui em recursos Beta, vamos para as rotas e vamos carregar nosso próprio arquivo routes.yaml. Aqui você pode ver dentro das configurações de conteúdo é nosso arquivo de rotas, vamos fazer o upload disso. Isso agora está carregado. Então, o que isso significa é que se formos para a página inicial do nosso site, veremos a página inicial. Mas agora nosso índice será movido para a rota do blog, assim como tínhamos localmente e agora nosso site deve ser exatamente o mesmo que tínhamos localmente. Para atualizar o que fizemos neste vídeo, preparamos nosso arquivo.json package.json aqui. Atualizou todos os detalhes para que não seja mais específico para Casper. Criamos um zip da pasta do tema. Renomeamos essa pasta para nosso nome de tema personalizado, neste caso, tema
personalizado e, em seguida, enviamos nosso tema para o administrador do Ghost. Se eu entrar aqui, entrar em temas, podemos ver que temos nosso tema Ghost do cliente lá. Em seguida, atualizamos nossa navegação, é claro. Mas, finalmente, muito importante, entramos em laboratórios e atualizamos nosso arquivo de rotas também. Lembre-se de que as rotas estão altamente relacionadas ao tema, mas na verdade não está na pasta do tema, então isso precisa ser carregado separadamente. Isso é o que é necessário se você estiver executando um Ghost Pro, eu recomendo o Ghost Pro se você puder pagar pelo simples motivo de ser tão fácil de instalar, quer
dizer, ele é criado pelo Ghost. Então, eles tornam muito fácil começar a trabalhar com o site Ghost. O mesmo processo em outro host, como vimos antes, como DigitalOcean ou Linode demora um pouco mais e, portanto, não vou passar por isso nesta classe. O que eu uso pessoalmente é a DigitalOcean e me permite pagar apenas US $5 mês para executar meu site em vez do mínimo que eu acho que vimos foi, se eu for para a página de preços do Ghost Pro aqui, 25, então eu pago cinco vezes menos por configurando-o na DigitalOcean. Mas a diferença é que eu tive que passar como uma tarde ou manhã tentando descobrir como configurá-lo na DigitalOcean. É um pouco mais de trabalho configurá-lo na DigitalOcean ou Linode. Se você puder pagar e quiser fazê-lo,
por todos os meios, use o Ghost Pro. Mas para mim, eu estava disposto a passar pelo trabalho de
descobrir como fazê-lo funcionar na DigitalOcean para pagar menos a longo prazo. Essas são suas opções lá. Vou deixá-lo lá para esta lição e na próxima lição, falaremos sobre a integração do GitHub. Na próxima lição, o que falaremos é criar um fluxo de trabalho do GitHub onde podemos simplesmente criar edições em nosso tema local, enviá-las para o GitHub
e, em seguida, ele atualizará automaticamente nosso site Ghost sem
que tenhamos para entrar aqui e carregar manualmente um arquivo zip a cada vez. Se você quiser aprender a fazer isso, vou pegá-lo no próximo vídeo bônus.
14. Bônus: configuração a integração com o Github: Conforme prometido nesta lição de bônus, veremos como podemos usar a integração do GitHub para
publicar alterações em nossos temas Ghost por meio de um único Git, commit e push. O Git é algo que recomendo que todos usem. Muitos de vocês, tenho certeza que já o estão usando, mas é uma boa maneira de rastrear mudanças em seu projeto. GitHub é o principal site que permite hospedar repositórios remotos. Para fazer isso, você precisará de uma conta do GitHub. Não vou analisar como você configurou uma, mas você precisará de uma conta do GitHub. Se você quiser pausar o vídeo agora e fazer isso, vou esperar por você do outro lado. Caso contrário, se você tiver uma conta do GitHub, vamos começar a configurar essa integração com o GitHub. Só precisamos seguir este guia aqui no site ghost.org. Está em Integrações/GitHub, e vamos seguir este documento. O primeiro passo será criar a integração personalizada em nosso site Ghost ao vivo. Como isso funciona é que vamos editar o código em nosso computador local, vamos fazer um commit do Git e enviá-lo para o GitHub. Então, quando chegar ao GitHub, afetará nosso site ao vivo. Para que isso afete nosso site ao vivo, teremos que configurar uma integração personalizada para que
tenhamos essas permissões para afetar nosso site ao vivo. Como diz aqui no Ghost Admin, vamos navegar para integrações e criar uma nova integração personalizada chamada GitHub Actions. Vou tentar executar esses lado a lado. Pode ser um pouco apertado, mas seria bom tê-los lado a lado. Parece que vai ser muito apertado. Aqui vamos nós. Vamos entrar em mais aqui, clicar em “Integrações” e, em seguida, queremos rolar para baixo até Adicionar integração personalizada. Vamos chamar a integração, como diz no documento, Github Actions. Crie esse. Role para cima e, em seguida, vamos copiar e colar os detalhes da integração em nossas variáveis de ambiente de repositórios do GitHub. Na verdade, precisamos criar um repositório do GitHub para que isso funcione. O que vamos fazer é expandir essa janela novamente, entrar na minha conta do GitHub, login e ter autenticação de dois fatores, então vou precisar autorizar com meu aplicativo Authenticator. Agora vamos criar um novo repositório usando este símbolo de mais aqui, e vamos chamar esse tema personalizado fantasma e, em seguida, Tema personalizado criado na minha classe Skillshare Ghost
Theme Development. Vou deixar isso para público para vocês para que vocês possam realmente olhar para o código. Sei que alguns de vocês solicitam isso de vez em quando,
então publicarei esse código neste repositório. Se você quiser ir para este endereço, este será um endereço público depois disso, para você
possa ir e fazer isso. Nós vamos e não vou seguir essas instruções palavra por palavra, não
gosto de criar um ramo principal, gosto de usar o branch master. Eu passei por esta primeira parte aqui, mas o que vou fazer é entrar, vamos abrir nosso terminal novamente, talvez criar uma nova guia aqui
e, em seguida, navegar até nossa pasta onde temos o código do tema. Código CD/compartilhamento/site fantasma e, a partir daqui, acredito em seu conteúdo, e depois em temas
e, em seguida, dentro de temas, vamos dar uma olhada, casper. Vamos cd em casper aqui. Em seguida, vamos inicializar nosso repositório Git. Mas antes disso, vou fazer isso um pouco maior
e, em seguida, executar git init para criar um novo repositório Git, git adicionar tudo a ele
e, em seguida, fazer nosso commit inicial. Agora podemos adicionar esse endereço aqui, seja lá o que for para você, adicionar isso, e então podemos fazer git push -u origin master. Lá vamos nós. Isso agora deve ser enviado para o nosso repositório do GitHub e, se
atualizarmos, agora devemos ter esse tema aqui. É copiar a mesma leitura de Casper, então eu poderia fazer alguma limpeza depois disso. Mas, além disso, temos nosso tema personalizado Ghost. Faremos o próximo passo que ele disse na documentação, então arrastando isso, ele disse para entrar em nossas Configurações e depois entrar em Segredos. Estamos um pouco cansados aqui, mas está dentro deste menu. Eu entro em Configurações, procuro segredos
e, se eu rolar para baixo, posso criar um novo segredo de repositório e vamos seguir exatamente o que ele diz aqui. Vou criar um segredo chamado GHOST_ADMIN_API_URL, e vou copiar os detalhes da nossa integração. Vou pegar o URL da API, clicar em “Adicionar segredo”
e, em seguida, vamos adicionar mais um para o ADMIN_API_KEY, então copiando isso exatamente
e, em seguida, pegando nossa chave ADMIN_API_KEY aqui e colocando-a nesse campo de valor. Isso deve ser suficiente para dar ao GitHub permissões
suficientes para realmente afetar nosso site Ghost ao vivo. Agora vamos ao próximo passo, que é instalar a ação de implantação do tema Ghost. Vamos entrar em nosso tema aqui. Certifique-se de que estamos na pasta de temas e vamos criar esse novo arquivo, que era.github/workflows/main.yml. Vamos ver se podemos fazer isso de dentro do código VS. Lá vamos nós. Ele fez o caminho para nós e para tudo, então podemos simplesmente copiar tudo isso, colá-lo em nosso arquivo aqui. Isso é tudo o que precisamos fazer lá, exceto que não temos um ramo principal, então vou me livrar disso, e deve ser isso. O que vou fazer é abrir nosso terminal novamente, e vou adicionar a alteração
e, em seguida, confirmar isso, adicionar código para o GitHub Actions
e, em seguida, certifique-se de git push. Isso carregará esse arquivo específico para nosso repositório Git. Vou fazer isso maior novamente. Volte para o nosso código aqui, e agora você pode ver que temos uma pasta.github com nossos fluxos de trabalho nela, e temos esse código para a Ação do GitHub. Isso deve ser suficiente para nós agora empurrarmos mudanças aqui e isso para integrar em nosso site Ghost. Vou aqui para Temas, e como você pode ver aqui, já
enviamos esse tema para o nosso administrador. Como você pode ver aqui entre colchetes, é um pouco confuso porque há alguns do mesmo nome. Mas agora temos esse tema fantasma personalizado. Vamos fazer uma mudança bastante óbvia agora e ver como isso afeta nosso lado ao vivo quando usamos a integração com o GitHub. Digamos que, em vez desse estilo de cabeçalho, vamos mudar isso para, digamos que vamos fazer uma cor de fundo de branco, basta inverter as cores basicamente, para que possamos fazer. Isso não vai funcionar para a navegação, vamos precisar ter certeza de que o nav também é essa cor, e isso deve classificá-la. Vamos replicar isso em nosso arquivo CSS. Era cabeçalho e cabeçalho A. Isto é apenas para fins de demonstração, você pode fazer qualquer mudança que quiser ao fazer o projeto. Isso é apenas para demonstrar que a alteração ocorrerá quando publicarmos
em nosso repositório do GitHub. Vou fazer esses interruptores brancos, fff. Agora que fizemos uma mudança, você pode ver aqui, fizemos uma mudança lá. Vamos entrar em nosso terminal novamente, Git adicionar ao palco todas essas alterações, que é apenas uma, e depois confirmar o cabeçalho de atualizações. Em seguida, vamos fazer git push, e nossa Ação do GitHub deve funcionar. Na verdade, podemos ver o status da nossa Ação do GitHub. Fecho esta cabeça aqui, atualizo, clique em “Ações”, e você pode ver aqui que temos um fluxo de trabalho em execução agora. Diz que começou há 15 segundos e agora está pronto, então deve ter um carrapato verde ao lado dele, e então, se entrarmos em nosso site Ghost e atualizarmos, tenho certeza que é esse segundo aqui. Agora você pode ver que temos nosso estilo de cabeçalho atualizado agora ao vivo em nosso site. É assim que podemos usar o GitHub para publicar alterações em nosso site. Assim que tivermos isso ativo, quaisquer alterações que enviarmos para este tema estarão ao vivo em nosso site. Pode ser uma boa ideia ter alguns ramos,
um para encenar e outro para viver. Caso contrário, se eu mantiver esse tema ativado e eu fizer alterações localmente que eu coloquei para o GitHub, isso também será alterado em nosso site Ghost, e isso nos permite fazer mudanças continuamente ao longo do tempo. É isso para esta lição de bônus finace. No próximo vídeo, vamos encerrar a aula com nossa conclusão, e vou falar sobre seu projeto de turma. Vejo você no próximo vídeo.
15. Conclusão e projeto do curso: Isso conclui esta aula sobre como personalizar sua publicação fantasma. Para o seu projeto de aula, encorajo você a criar seu próprio tema fantasma usando o conhecimento que você adquiriu nesta classe. Se você estiver preso em algum momento, você pode consultar a documentação oficial ou meu guia final de desenvolvimento de fantasmas postado no meu site. Claro, se isso ainda não ajudar, você pode deixar um comentário na caixa de discussão abaixo, e farei o meu melhor para apontar você na direção certa. Como sempre, obrigado por assistir e espero vê-lo novamente em algumas das minhas outras aulas.
Christopher Dodd, Web Developer / Educator
