4.6 KiB
Como trabalhar no tema de notícias de desenvolvedor do freeCodeCamp.org
As notícias de desenvolvimento, também conhecidas como o site de /news
, são fornecidas por Ghost. Usamos um tema personalizado para a aparência do site. O código fonte do tema está disponível aqui: https://github.com/freeCodeCamp/news-theme.
O tema
Ghost usa uma linguagem simples de template chamada Handlebars para seus temas. O tema usado em /news
é baseado no tema casper padrão.
O tema padrão é bastante comentado então deve ser razoavelmente fácil resolver o que for preciso apenas lendo o código e os comentários. Quando você se sentir confortável com a forma como tudo lá funciona, Ghost também tem uma documentação da API de tema completa que explica cada helper e template do Handlebars possível.
Os arquivos principais são:
default.hbs
- O arquivo de template principalindex.hbs
- Usado para a página inicialpost.hbs
- Usado para postagens individuaispage.hbs
- Usado para páginas individuaistag.hbs
- Usado para arquivos de tagsauthor.hbs
- Usado para arquivamentos de autor
Um truque muito legal é que você também pode criar modelos personalizados únicos, apenas adicionando o slug de uma página a um arquivo de modelo. Por exemplo:
page-about.hbs
- Modelo personalizado para a página/about/
tag-news.hbs
- Modelo personalizado para o arquivo/tag/news/
author-ali.hbs
- Modelo personalizado para o arquivo/author/ali/
Desenvolvimento
-
Instale o Ghost localmente.
npm install -g ghost-cli@latest mkdir ghost-local-site cd ghost-local-site
ghost install local ghost start
Observação: atualmente, o freeCodeCamp usa a versão
2.9.0
do Ghost. Então, certifique-se de estar usando uma versão maior que essa.Certifique-se de executar comandos
ghost
do diretórioghost-local-site
. Siga instruções adicionais na documentação oficial do Ghost se não estiver familiarizado com a interface. -
Faça fork e clone o repositório no seu diretório tema (substituindo
YOUR_USERNAME
com seu nome de usuário do GitHub):cd content/themes/ git clone https://github.com/YOUR_USERNAME/news-theme.git
-
Certifique-se de que você tem todos os pré-requisitos.
Os estilos do tema são compilados utilizando Gulp/PostCSS para poliencher as especificações CSS futuras. Você precisará do Node.js. Certifique-se de que sua versão do Node.js é compatível com o
ghost
. -
Instale as dependências e desenvolva o tema
npm ci npm run develop
-
Agora você pode editar os arquivos
/assets/css/
, que serão compilados automaticamente para/assets/built/
. -
Acessar o site de desenvolvimento.
a. Digite
http://localhost:2368/ghost/
na sua barra de pesquisa. Continue com a configuração solicitada na página (se estiver executando ghost pela primeira vez).b. (Apenas uma vez, durante a configuração) Reinicie o Ghost, em um terminal separado para garantir que o tema esteja disponível.
cd ghost-local-site ghost restart
c. (Apenas uma vez, durante a configuração) Uma vez que você tenha feito isso, vá até
http://localhost:2368/ghost/#/settings/design
e role para baixo. Certifique-se de clicar em ativar nofreecodecamp-news-theme
. -
Faça um zip do código final e faça um pull-request
O
zip
do Gulp task empacota os arquivos de tema emdist/<theme-name>.zip
, que podemos carregar no site de produção.Quando você criar uma PR, por favor certifique-se de ter executado o script abaixo antes de confirmar o código e enviar uma PR.
npm run zip
Outras Referências e recursos
Características do PostCSS utilizadas
- Autoprefixer - Não se preocupe em escrever os prefixos do navegador de qualquer tipo, tudo é feito automaticamente com suporte para as 2 versões principais mais recentes de cada navegador.
- Variáveis - Variáveis CSS simples
- Função de Cor
Ícones SVG
O tema usa ícones SVG embutidos, incluídos via partial Handlebars. Você pode encontrar todos os ícones dentro de /partials/icons
. Para usar um ícone, inclua o nome do arquivo relevante, por exemplo. Para incluir o ícone SVG em /partials/icons/rss.hbs
- use {{> "icons/rss"}}
.
Você pode adicionar seus próprios ícones SVG da mesma maneira.