4.6 KiB

Raw Blame History

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 principal
index.hbs - Usado para a página inicial
post.hbs - Usado para postagens individuais
page.hbs - Usado para páginas individuais
tag.hbs - Usado para arquivos de tags
author.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ório ghost-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 no freecodecamp-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 em dist/<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.

4.6 KiB Raw Blame History