4.5 KiB
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 principaleindex.hbs
- Utilizzato per la home pagepost.hbs
- Utilizzato per singoli postpage.hbs
- Utilizzato per singole paginetag.hbs
- Utilizzato per archivi di tagauthor.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 directoryghost-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 sufreecodecamp-news-theme
. -
Zippa il codice finale e fai una pull request
Il task
zip
di Gulp impacchetta i file del tema indist/<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.