static timeline generator
1.0.0
Erstellen Sie ganz einfach eine statische Timeline-Webseite wie meine Wikimedia-Timeline. Sehen Sie sich eine Vorschau dieser Beispielseite an, die mit GitHub Pages bereitgestellt wurde: https://molly.github.io/static-timeline-generator/.
Inhalt
Klonen Sie dieses Repository und führen Sie dann npm install aus dem Verzeichnis aus.
npm run-script serve erstellt das Projekt und stellt die statischen Dateien lokal unter http://localhost:8080 bereit. npm run-script build führt lediglich den Build-Schritt aus, ohne den Entwicklungsserver zu starten.
Fast der gesamte Inhalt, den Sie ändern müssen, befindet sich in src/_data/content.js .
header (HTML, optional): Der Inhalt, der im Header oben auf der Seite angezeigt werden soll.footer (HTML, optional): Der Inhalt, der in der Fußzeile unten auf der Seite angezeigt werden soll.entries (Array von Objekten, erforderlich ): Die Liste der Einträge, die auf der Zeitleiste angezeigt werden sollen, in der Reihenfolge, in der sie angezeigt werden sollen.id (Zeichenfolge, erforderlich ): Eine eindeutige ID für diesen Timeline-Eintrag.categories (Array von Zeichenfolgen, optional): Eine Liste von Kategorien, die für diesen Eintrag gelten. Diese werden als Kontrollkästchen oben auf der Seite angezeigt und ermöglichen es den Lesern, die Zeitleiste zu filtern. Sie dürfen keine Kommas enthalten. Sie können durch Bindestrich oder Leerzeichen getrennt werden ( sample category oder sample-category werden beide auf der Seite als Sample category angezeigt). Einträge ohne Kategorien werden immer angezeigt.color (Zeichenfolge, optional): Die Farbe des Kreises, der auf der Timeline-Zeile angezeigt wird. Die bereits definierten Optionen sind green , red und grey . Sie können zusätzliche Farben in css/custom.css definieren (siehe unten).faicon (Zeichenfolge, optional): Der Name eines Font Awesome-Symbols, das im Kreis auf der Timeline-Zeile verwendet werden soll. Entdecken Sie die Optionen. Dies ist nur der Symbolname (ohne das Präfix fa- ). Zum Beispiel: anchor .datetime (Zeichenfolge, entweder datetime oder date muss vorhanden sein): Ein Datums- und Zeitspezifizierer für das Element. Dies kann in jedem Format erfolgen, das moment.js erkennt. Normalerweise mache ich „JJJJ-MM-TT HH-SS“. Wenn keine Uhrzeit, sondern nur ein Datum vorhanden ist, verwenden Sie den date anstelle von datetime .date (Zeichenfolge, entweder datetime oder date muss vorhanden sein): Ein Datumsbezeichner für das Element. „JJJJ-MM-TT“.title (HTML, erforderlich ): Der Titel des Timeline-Eintrags.image (optional): Ein Bild, das im Eintrag angezeigt werden sollsrc (Zeichenfolge, erforderlich): Eine direkte URL zur Bilddatei, die auf der Seite eingebettet werden soll, oder ein relativer Link zu einem Bild in diesem Verzeichnis (z. B. img/filename.png ).link (Zeichenfolge, optional): Ein Hyperlink zu der Seite, die das Bild enthält, wenn Sie möchten, dass die Leute darauf klicken können, um eine größere Version usw. anzuzeigen.alt (Zeichenfolge, optional): Alt-Text, der das Bild beschreibt.caption (HTML, optional): Eine Beschriftung, die das Bild beschreibt.body (HTML, erforderlich ): Der Text des Timeline-Eintrags. Wenn Sie mehrere Absätze wünschen, müssen Sie selbst <p> -Tags einfügen; andernfalls wird es hinzugefügt.links (Array von Objekten, optional): Ein Array von Links, die am Ende des Eintrags angezeigt werden.href (Zeichenfolge, erforderlich ): Das Ziel des Links.linkText (HTML, erforderlich ): Linktext.extra (HTML, optional): Zusätzlicher HTML-Code, der am Ende des Links angezeigt wird.pageTitle (Zeichenfolge, erforderlich ): Der Text, der in das <title> -Tag eingefügt werden soll, um den Titel der Seite im Browser festzulegen.pageDescription (Zeichenfolge, optional): Seitenbeschreibung zur Aufnahme in Meta-Tags.pageAuthor (Zeichenfolge, optional): Seitenautor zur Eingabe von Meta-Tags. Wenn Sie weitere Farboptionen für die Kreise auf der Timeline hinzufügen möchten, können Sie die Datei src/css/custom.css bearbeiten, um Ihre eigenen hinzuzufügen. Mit diesem Tool können Sie Farben auswählen und deren Hex-Farbcodes abrufen. Sie sind wie folgt definiert:
. timeline-icon . yourcolorhere {
background-color : # hexcol or code;
} Sie würden dann color: yourcolorhere in der Datei content.js verwenden.
Ersetzen Sie die Bilder im Ordner src/img , um das Seiten-Favicon und das OpenGraph-Bild anzupassen.
Sobald Sie npm run-script buld ausführen, wird ein _site -Verzeichnis angezeigt, das statische HTML-/CSS-/JS-Dateien mit Ihrem Site-Inhalt enthält. Sie können jetzt jedes statische Site-Hosting verwenden, um diese Dateien bereitzustellen!
Um Ihre statische Site auf GitHub-Seiten (kostenlos) bereitzustellen, erstellen Sie einen Zweig mit den statischen Dateien im Stammverzeichnis, indem Sie git subtree push --prefix _site origin gh-pages ausführen. Dann können Sie zu den Optionen „Einstellungen“ > „Seiten“ Ihres Repositorys gehen und „Von einem Zweig bereitstellen“ auswählen und dann gh-pages als Zweig auswählen.
Es gibt einige gute Tutorials zum Bereitstellen einer statischen Site für verschiedene andere kostenlose Dienste. Einige sind unten aufgeführt.
Sie können auch nach Tutorials zum Bereitstellen einer mit Eleventy erstellten Site suchen, da dies die Grundlage dieses Projekts ist. Einige Webhosting-Dienste wie Vercel unterstützen Eleventy auf wirklich praktische Weise.
npm run-script build_site Zeitleisten werden auf Tablets gut dargestellt:
oder mobile Geräte:
Dies sollte auf allen modernen Browsern gut funktionieren. IE <9 wird nicht unterstützt.
Ohne aktiviertes JavaScript wird die Seite ordnungsgemäß beeinträchtigt. Beiträge werden jedoch in einer einspaltigen Zeitleiste angezeigt und Filter werden nicht angezeigt.
Dieses Projekt verwendet
Es wird unter der MIT-Lizenz veröffentlicht.
