Hugo Thema Quint
v1.1.0
Quint ist ein minimalistisches Hugo-Thema, das ein klares, luftiges Gefühl vermitteln soll und Klarheit und einfache Lesbarkeit betont. Es verfügt über elegante integrierte Bildbanner und ein leichtes Design, wodurch es sich ideal für die Präsentation Ihrer Inhalte im Mittelpunkt eignet.
Schauen Sie sich das Demo-Site-Repository an, das Sie auch als Startervorlage für eine neue Site verwenden können. (Psst... dort gibt es eine Ein-Klick-Schaltfläche zum Bereitstellen in Netlify.)
Live-Demo hier.
Minimalistisches Design : Konzentriert sich auf die Lesbarkeit des Inhalts mit minimalen Ablenkungen.
Dunkler und heller Modus : Automatischer Themenwechsel, der die Browser-/Geräteeinstellungen des Betrachters berücksichtigt.
Responsives Layout : Sieht sowohl auf Mobil- als auch auf Desktop-Geräten großartig aus.
Enthaltene Bildbanner : Wird mit wunderschönen, minimalistischen Bildbannern geliefert, die Ihrer Website den Ton angeben. Ersetzen Sie sie oder fügen Sie jederzeit Ihre eigenen hinzu.
Site-Suche : Integrierte Suche auf Ihrer statischen Site mit Lunr.js.
Soziale Symbole : Konfigurierbare Links zu Ihren sozialen Medien in der Fußzeile.
Um mit Quint beginnen zu können, muss Hugo auf Ihrem Computer installiert sein. Weitere Informationen zur Installation von Hugo finden Sie in der offiziellen Hugo-Dokumentation.
Eine Schritt-für-Schritt-Anleitung zum Erstellen einer neuen Website mit Hugo finden Sie im Schnellstart.
Wenn Hugo installiert ist, fügen Sie Quint zum Themenverzeichnis Ihrer Website hinzu. Führen Sie im Stammverzeichnis Ihrer Website Folgendes aus:
Git-Submodul hinzufügen https://github.com/victoriadrake/hugo-theme-quint.git themes/quint
Öffnen Sie die Konfigurationsdatei Ihrer Hugo-Site (entweder hugo.toml , hugo.yaml oder hugo.json ) und aktualisieren Sie den theme Parameter, um quint zu verwenden:
hugo.toml :Thema = „Quint“
hugo.yaml :Thema: „Quint“
Quint sieht sofort großartig aus. Kopieren Sie optional Konfigurationswerte aus yoursite/themes/quint/hugo.toml in die Konfiguration Ihrer Site ( yoursite/hugo.toml ), um Quint weiter zu personalisieren.
Führen Sie Hugo aus, um Ihre Site zu generieren und den Server zu starten. Führen Sie im Stammverzeichnis Ihrer Website Folgendes aus:
Hugo Server
Navigieren Sie in Ihrem Webbrowser zu http://localhost:1313 um Ihre Website mit dem Quint-Design in Aktion zu sehen.
Um die neueste Version von Quint herunterzuladen, führen Sie Folgendes aus:
Git-Submodul-Update --remote theme/quint
Quint ist so konzipiert, dass es einfach anzupassen ist.
Fügen Sie ganz einfach Ihre eigenen benutzerdefinierten CSS-Dateien hinzu, indem Sie sie in Ihrer Hugo-Konfiguration benennen:
[params]css = ["css/custom.css"] # Ihre benutzerdefinierten CSS-Überschreibungen, gespeichert in yoursite/static/
Sie können jedes Layout überschreiben, indem Sie eine Datei mit demselben Namen in Ihrem Projektverzeichnis verwenden. Beispielsweise überschreibt die Datei yoursite/layouts/partials/contact.html yoursite/themes/quint/layouts/partials/contact.html .
Fügen Sie der Startseite Abschnitte hinzu oder entfernen Sie sie, indem Sie die Datei yoursite/themes/quint/layouts/index.html überschreiben. Erstellen Sie einfach eine Kopie dieser Datei in Ihrem Projektverzeichnis ( yoursite/layouts/index.html ) und entfernen oder fügen Sie alle gewünschten partial hinzu.
Wenn eine Seite oder ein Beitrag kein image in der Titelseite angibt, zeigt Quint ein schönes Bildbanner an, indem es ein zufälliges Bild aus dem Verzeichnis themes/quint/static/images auswählt.
Dies wird erreicht, indem eine Zufallszahl zwischen 1 und 10 ausgewählt wird, die einem Bilddateinamen entspricht. Sie können diese Sammlung ergänzen oder jedes gewünschte Bild ersetzen. Aktualisieren Sie einfach die maximale Zufallszahl, damit sie mit der Anzahl Ihrer Bilder übereinstimmt.
[params]numImages = 12 # Anzahl zufälliger Bilder zur Auswahl für Banner (in „themes/quint/static/images“)
Beiträge zu Quint sind willkommen! Fühlen Sie sich frei, Probleme oder Pull-Requests auf GitHub einzureichen, um die Funktionalität oder Dokumentation des Themes zu verbessern.
Möchten Sie ein paar Ideen für den Anfang? Hier ist eine kurze Liste der Funktionen, die ich gerne hinzugefügt sehen würde:
Schaltflächen zum Kopieren von Codeblöcken
Hugos Chroma-Syntaxhervorhebung
Hugos Asset-Generator mit Pipelining, Fingerprinting, Bündelung und Minimierung
Mehrsprachige Unterstützung
Breadcrumb-Navigation
Dieses Thema wird unter der MIT-Lizenz veröffentlicht. Weitere Einzelheiten finden Sie in der LICENSE-Datei.
Quint verwendet die hervorragende Schriftart Open Sauce.
Gerätemodell erstellt von deviceframes.com.
