krashna site

Krashna Musika-Website

Statischer Site-Generator für die Site der studentischen Musikvereinigung Krashna Musika in Delft, erstellt mit React und Gatsby.js.

Installation

Um zu beginnen, benötigen Sie die Node.js-Umgebung und den Yarn-Paketmanager. Sobald Sie diese installiert haben, führen Sie die folgenden Befehle im Stammverzeichnis dieses Repos aus:

yarn
yarn global add gatsby-cli

Läuft

Entwicklung

Um einen Entwicklungsserver zu starten (mit Live-Neuladen), führen Sie Folgendes aus:

yarn develop

Es wird jetzt einen Server geben, der auf localhost:8000 lauscht!

Produktion

Führen Sie Folgendes aus, um ein Produktionspaket zu erstellen:

yarn build

Änderungen am master -Zweig werden über den Netlify-Build-Service automatisch auf der Live-Site (unter krashna.nl) bereitgestellt.

Dokumentation

Gesamtstruktur

Im Allgemeinen folgt dieses Projekt der üblichen Gatsby.js-Ordnerstruktur:

• Seiten werden in /src/pages definiert. Der Dateiname jeder JS-Datei (mit Ausnahme der Erweiterung .js ) wird als URL der entsprechenden Seite verwendet.
• Seitenvorlagen (Musterstrukturen für das Aussehen verschiedener Seitentypen) befinden sich in /src/templates .
• Komponenten, die diese Seiten und Vorlagen verwenden, sind im Ordner /src/components enthalten.

Es gibt jedoch einige Unterschiede, was die Internationalisierung und andere Funktionen betrifft:

• Alle Übersetzungen sind in den YAML-Dateien des Ordners /src/locales enthalten. Jeder Unterordner enthält eine Kopie jeder Übersetzungsdefinitionsdatei in einer bestimmten Sprache. Diese Übersetzungsdateien werden bis auf JSON kompiliert, das zusammen mit dem Rest des Inhalts bereitgestellt und zur Laufzeit dynamisch in die Seite eingefügt wird. Für die Übersetzung verwenden wir die von gatsby-plugin-intl integrierte Bibliothek react-intl .
• Alle Daten, die der Seitengenerierung zugrunde liegen, wie zum Beispiel die Liste der Konzerte, sind in /src/data enthalten.

Inhalte hinzufügen

Das Hinzufügen von Inhalten kann einfach durch Hinzufügen von Text oder anderen Daten zu vordefinierten Dateien erfolgen. Nachfolgend finden Sie einige Beispiele. Alle Inhalte sind in Markdown geschrieben. Wenn Sie mit Markdown nicht vertraut sind oder Hilfe benötigen, schauen Sie sich diesen praktischen Link an

Eine Seite hinzufügen

Um eine Seite hinzuzufügen...

1. Fügen Sie in /src/pages eine JS-Datei mit der URL hinzu, unter der Sie diese Seite platzieren möchten. Wenn Sie Zweifel an der Struktur dieser Datei haben, werfen Sie einen Blick auf die anderen vorhandenen Seiten in diesem Ordner.
2. Fügen Sie die erforderlichen Übersetzungen für alle von Ihnen verwendeten Übersetzungsschlüssel in /src/locales hinzu. Beispiele dafür, wie man auf einen solchen Übersetzungsschlüssel in der Seitendatei zugreifen kann und wie dieser in der Übersetzungsdatei definiert werden kann, finden Sie in vorhandenen Seiten und Übersetzungen.

Ein Konzert hinzufügen

Um ein Konzert hinzuzufügen...

1. Fügen Sie einen Eintrag zur Liste /src/data/concerts.yaml hinzu und folgen Sie dabei demselben Format wie die anderen Einträge.
2. Fügen Sie sprachabhängige Texte in beiden Sprachen zu den Dateien concerts.yaml im Ordner /src/locales hinzu.

Hinzufügen eines Newsbeitrags

Um einen Newsbeitrag hinzuzufügen...

1. Fügen Sie einen Eintrag zur Liste /src/data/news.yaml hinzu und folgen Sie dabei demselben Format wie die anderen Einträge.
2. Fügen Sie sprachabhängige Texte in beiden Sprachen zu den news.yaml -Dateien im Ordner /src/locales hinzu.