4.5 KiB

Raw Blame History

Come lavorare sul tema delle news degli sviluppatori di freeCodeCamp.org

Le notizie degli sviluppatori conosciute anche come il sito /news è alimentato da Ghost. Usiamo un tema personalizzato per l'aspetto del sito. Il codice sorgente del tema è disponibile qui: https://github.com/freeCodeCamp/news-theme.

Il Tema

Ghost utilizza un semplice linguaggio di modellazione chiamato Handlebars per i suoi temi. Il tema utilizzato su /news è basato sul tema casper predefinito.

Il tema di default ha molti commenti così è abbastanza facile capire cosa sta succedendo semplicemente leggendo il codice e i commenti. Una volta che ti senti a tuo agio con il funzionamento del tutto, Ghost ha anche una completa documentazione API per i temi che spiega ogni possibile helper Handlebars e modello.

I file principali sono:

default.hbs - Il file del modello principale
index.hbs - Utilizzato per la home page
post.hbs - Utilizzato per singoli post
page.hbs - Utilizzato per singole pagine
tag.hbs - Utilizzato per archivi di tag
author.hbs - Utilizzato per archivi d'autore

Uno trucco davvero pulito è che è anche possibile creare modelli una tantum personalizzati solo aggiungendo lo slug di una pagina a un file di modello. Per esempio:

page-about.hbs - Modello personalizzato per la pagina /about/
tag-news.hbs - Modello personalizzato per l'archivio /tag/news/
author-ali.hbs - Modello personalizzato per l'archivio /author/ali/

Sviluppo

Installare Ghost localmente.
```
npm install -g ghost-cli@latest
mkdir ghost-local-site
cd ghost-local-site
```
```
ghost install local
ghost start
```
Nota: Attualmente freeCodeCamp utilizza la versione Ghost 2.9.0, quindi assicurati di usare una versione superiore.

Assicurati di eseguire i comandi ghost dalla directory ghost-local-site. Segui le istruzioni aggiuntive sulla documentazione ufficiale di Ghost se non ha familiarità con la sua interfaccia.
Forka e clona il repository nella directory del tuo tema (sostituendo YOUR_USERNAME con il tuo username di GitHub):
```
cd content/themes/
git clone https://github.com/YOUR_USERNAME/news-theme.git
```
Assicurati di avere tutti i prerequisiti.

Gli stili del tema sono compilati usando Gulp/PostCSS per rispettare le future specifiche CSS. Avrai bisogno di Node.js. Assicurati che la tua versione Node.js sia compatibile con ghost.
Installa le dipendenze e sviluppa il tema
```
npm ci
npm run develop
```
Ora puoi modificare automaticamente i file /assets/css/, che saranno compilati in /assets/built/.
Accedi al sito di sviluppo.

a. Inserisci http://localhost:2368/ghost/ nella barra degli indirizzi. Continua con la configurazione richiesta sulla pagina (se stai eseguendo ghost per la prima volta).

b. (Una sola volta durante la configurazione) Riavvia Ghost in un terminale separato per garantire che il tema sia disponibile.
```
cd ghost-local-site
ghost restart
```
c. (Una sola volta durante l'installazione) Una volta fatto, vai su http://localhost:2368/ghost/#/settings/design e scorri verso il basso. Assicurati di cliccare attiva su freecodecamp-news-theme.
Zippa il codice finale e fai una pull request

Il task zip di Gulp impacchetta i file del tema in dist/<theme-name>. ip, che potremo poi caricare sul sito di produzione.

Quando fai una PR, assicurati di aver eseguito lo script sottostante prima di effettuare il commit del codice e di inviare una PR.
```
npm run zip
```

Altri riferimenti e risorse

Funzionalità PostCSS Utilizzate

Autoprefixer - Non preoccuparti di scrivere prefissi del browser di alcun tipo, è tutto fatto automaticamente con il supporto per le ultime 2 versioni principali di ogni browser.
Variabili - Semplici variabili CSS pure
Funzione Color

Icone SVG

Il tema utilizza icone SVG in linea, incluse tramite dei partial di Handlebars. Puoi trovare tutte le icone all'interno di /partials/icons. Per usare un'icona basta includere il nome del file pertinente, ad es. Per includere l'icona SVG in /partials/icons/rss.hbs - usa {{> "icons/rss"}}.

È possibile aggiungere le proprie icone SVG nello stesso modo.

4.5 KiB Raw Blame History