hugo 8bits theme

Hugo 8-Bit-Thema

Das Hugo 8-Bit-Theme basiert auf dem von @bc_rikko entwickelten CSS-Framework im NES-Stil.

Live-Demo

NES.css Framework-Informationen

Name	NES.css
Beschreibung	CSS-Framework im NES-Stil
Designer	BcRikko
Version	2.3.0
Freigegeben	17. Dezember 2019
Lizenz	Lizenzinformationen

Installation

 $ cd /<your-hugo-site-directory>
$ git submodule add https://github.com/miguelsimoni/hugo-8bits-theme.git themes/hugo-8bits-theme

Weitere Informationen: Hugo-Setup-Anleitung

Konfiguration

config.yaml

Mehrsprachig

Sie können das Dropdown-Menü „Sprachen“ in config.yaml ein- oder ausblenden:

 languagesMenuEnabled : true

Semmelbrösel

Sie können die aktuelle Seite im Breadcrumb von config.yaml ein- oder ausblenden:

 breadcrumb :
  showCurrent : true

Paginierungslader

Sie können den Paginierungslader (Schaltfläche „Mehr laden“) in den Listenseiten von config.yaml aus aktivieren oder deaktivieren:

 pagination :
  loader : true

Wenn Sie es deaktivieren, wird das Standard-Paginierungs-Widget angezeigt.

Hintergrund

Sie können einen Designhintergrund festlegen, indem Sie einfach ein Bild im Ordner static/images/ ablegen und seinen Namen in den Parameter params.background.image eingeben. Sie können auch einen Parallaxeneffekt und seine Geschwindigkeit für den Beitragsbereich festlegen.

 background :
  image : " ../images/background.png "
  parallax : true
  speed : 10

Kontakt

Sie können das Kontaktformular aktivieren, damit Besucher Ihnen Nachrichten über einen Nachrichtendienst wie Formspree senden können, indem Sie einfach Ihre Kontaktformular-Aktions-URL in config.yaml hinzufügen:

 contact :
  formAction : https://formspree.io/f/yourformcode

Soziale Netzwerke

Sie können die Benutzernamen für die aktuell unterstützten sozialen Netzwerke in config.yaml hinzufügen:

 social :
  - network : twitter
    link : " https://www.twitter.com/8bits "
  - network : facebook
    link : " https://www.facebook.com/8bits "
  - network : instagram
    link : " https://www.instagram.com/8bits "

Weitere Beispiele zur Parametrisierung sozialer Netzwerke finden Sie in config.yaml.

Kommentare

Unterstützt von Disqus

 disqusShortname : " yourdiscussshortname "

Deaktivieren Sie das Kommentarsystem, indem Sie params.disqusShortname leer lassen.

Google Analytics

 googleAnalytics : " UA-123-45 "

Deaktivieren Sie Google Analytics, indem Sie params.googleAnalytics leer lassen.

Weitere Einstellungen!

Sehen Sie sich die gesamte Konfiguration in der Datei config.yaml an.

Beispielseite

Der Ordner exampleSite basiert auf dem Hugo Basic-Beispiel und bietet eine Beispielseite für dieses Thema.

Der Ordner exampleSite/content/ enthält Folgendes:

• Ein Abschnitt namens /post/ mit Beispiel-Markdown-Inhalten.
• Eine about.md , die die Seite /about/ für eine Theme-Demo bereitstellen soll.
• Eine contact.md , die die Seite /contact/ für ein Kontaktformular bereitstellen soll.

Fast geschafft...

Um Ihre Site in Aktion zu sehen, können Sie den integrierten lokalen Server von Hugo ausführen.

$ cd exampleSite
$ hugo server -t ../..

Geben Sie nun http://localhost:1313/ in die Adresszeile Ihres Browsers ein.

Einsatz

• Hosting auf GitHub
• Mehr Hosting- und Bereitstellungsoptionen

Mitwirken

• Einen Fehler gefunden?
• Haben Sie eine Idee für eine neue Funktion?

Lassen Sie es mich über den Issue-Tracker wissen oder machen Sie es direkt mit einem Pull-Request.

Lizenz

Dieses Thema und das Framework, das es ermöglicht hat, werden unter der MIT-Lizenz veröffentlicht. Weitere Lizenzinformationen finden Sie in der Original-Framework-Lizenz.

Danke

Vielen Dank an Steve Francia für die Schaffung von Hugo und die großartige Community rund um das Projekt. Und vielen Dank auch an BcRikko für die Erstellung dieses großartigen nostalgischen Rahmens.