4.8 KiB
Wie man am FreeCodeCamp.orgs Entwickler-News-Theme arbeitet
Die Entwicklernews, auch bekannt als /news
Seite, wird mit Ghost betrieben. Wir verwenden ein individuelles Theme für das Erscheinungsbild der Website. Der Quellcode des Themes ist hier verfügbar: https://github.com/freeCodeCamp/news-theme.
Das Theme
Ghost verwendet eine einfache Templating-Sprache namens Handlebars für seine Themes. Das Theme, das auf /news
verwendet wird, basiert auf dem Standard-Theme casper.
Das Standard-Theme ist ziemlich ausführlich kommentiert, so dass es relativ einfach sein sollte, durch Lesen des Codes und der Kommentare herauszufinden, was vor sich geht. Wenn du dich mit der Funktionsweise vertraut gemacht hast, findest du in Ghost auch eine vollständige Theme-API-Dokumentation, in der alle möglichen Handlebars-Helfer und Vorlagen erklärt werden.
Die Hauptdateien sind:
default.hbs
- Die Hauptvorlagen-Dateiindex.hbs
- Wird für die Startseite verwendetpost.hbs
- Wird für einzelne Beiträge (posts) verwendetpage.hbs
- Wird für einzelne Seiten verwendettag.hbs
- Wird für Tag-Archive verwendetauthor.hbs
- Wird für Autorenarchive verwendet
Ein wirklich toller Trick ist, dass du auch benutzerdefinierte, einmalige Vorlagen erstellen kannst, indem du einfach den Slug einer Seite in eine Vorlagendatei einfügst. Zum Beispiel:
page-about.hbs
- Benutzerdefinierte Vorlage für die/about/
Seitetag-news.hbs
- Benutzerdefinierte Vorlage für/tag/news/
Archivauthor-ali.hbs
- Benutzerdefinierte Vorlage für/author/ali/
Archiv
Entwicklung
-
Installiere Ghost lokal.
npm install -g ghost-cli@latest mkdir ghost-local-site cd ghost-local-site
ghost install local ghost start
Hinweis: Derzeit verwendet freeCodeCamp die Ghost-Version
2.9.0
, also stelle sicher, dass du eine höhere Version verwendest.Achte darauf, dass du die
ghost
-Befehle aus demghost-local-site
-Verzeichnis ausführst. Folge den zusätzlichen Anweisungen in der offiziellen Dokumentation von Ghost, wenn du mit der Benutzeroberfläche nicht vertraut bist. -
Forke und klone das Repository in deinem Theme-Verzeichnis (ersetze
YOUR_USERNAME
durch deinen GitHub Benutzernamen):cd content/themes/ git clone https://github.com/YOUR_USERNAME/news-theme.git
-
Stelle sicher, dass du alle Voraussetzungen erfüllst.
Die Stile des Themes werden mit Gulp/PostCSS kompiliert, um zukünftige CSS-Spezifikationen zu erfüllen. Du benötigst Node.js. Stelle sicher, dass deine Node.js-Version mit
ghost
kompatibel ist. -
Abhängigkeiten (Dependencies) installieren und das Theme entwickeln
npm ci npm run develop
-
Jetzt kannst du
/assets/css/
-Dateien bearbeiten, die automatisch zu/assets/built/
kompiliert werden. -
Zugriff auf die Entwicklungsseite.
a. Gib
http://localhost:2368/ghost/
in deine Adressleiste ein. Fahre mit dem Setup fort, zu dem du auf der Seite aufgefordert wirst (wenn du Ghost zum ersten Mal ausführst).b. (Einmalig, während des Setups) Starte Ghost einmal an einem separaten Terminal neu, um sicherzustellen, dass das Theme verfügbar ist.
cd ghost-local-site ghost restart
c. (Einmalig, während des Setups) Wenn du das getan hast, gehst du auf
http://localhost:2368/ghost/#/settings/design
und scrollst bis zum Ende. Stelle sicher, dass du auffreecodecamp-news-theme
aktivieren klickst. -
Zippe den endgültigen Code und erstelle einen Pull-Request
Die
zip
Gulp-Aufgabe verpackt die Themedateien indist/<theme-name>.zip
, die wir dann auf die Produktionsseite hochladen können.Wenn du einen PR erstellst, stelle bitte sicher, dass du das folgende Skript ausgeführt hast, bevor du den Code committest und einen PR sendest.
npm run zip
Andere Referenzen und Ressourcen
Verwendete PostCSS-Funktionen
- Autoprefixer - Mach dir keine Gedanken über das Schreiben von Browser-Präfixen, das wird alles automatisch erledigt, mit Unterstützung für die letzten 2 Hauptversionen eines jeden Browsers.
- Variablen - Einfache reine CSS-Variablen
- Farbfunktion
SVG-Symbole
Das Theme verwendet Inline-SVG-Symbole, die über Partials von Handlebars eingebunden werden. Du kannst alle Symbole (Icons) innerhalb von /partials/icons
finden. Um ein Icon zu verwenden, gib einfach den Namen der entsprechenden Datei an, z. B. Um das SVG-Symbol in /partials/icons/rss.hbs
einzubinden - verwende {{> "icons/rss"}}
.
Du kannst deine eigenen SVG-Icons auf dieselbe Art und Weise hinzufügen.