moonwalk

Moonwalk - Ein schnelles und minimalistisches Blog -Thema mit sauberem dunklem Modus

Probieren Sie die Demo

Merkmale

• Hell & dunkler Modus mit Themenschalter
• Vertikale Liste, horizontale Liste, Kartenliste
• Zielseite mit Navi, Fußzeile, Portfolio
• Schnell (sehr minimales CSS) - 100/100 über Leistung, Zugänglichkeit, Best Practices und SEO. Weitere Informationen finden Sie in Lighthouse -Bericht.
• Reaktionsschnell und mobilfreundlich
• SEO optimiert (verwendet Jekyll Soops SEO -Tag)
• RSS -Feed (verwendet Jekyll Feed)
• Leicht zu verlängern
• Voll kompatibel mit Github -Seiten (siehe GitHub -Seiten Installation)
• Automatisch generierte teilen Bilder für soziale Medien (unter Verwendung von Sooph)
• Teilen und mögen Schaltflächen (mit Sooph)

Leuchtturm

Schnelle Installation

1. Fork dieses Repository.
2. cd moonwalk
3. bin/bootstrap
4. [Optional] Melden Sie sich bei Sooph an und fügen Sie Ihre publish_token in _config.yml -Datei hinzu.

Wenn Sie Moonwalk unter Windows installieren, beachten Sie bitte, dass Sie möglicherweise Ruby 3.0.x anstelle von Ruby 3.1.x verwenden müssen - Sie können hier Windows -spezifische Installationsanweisungen sehen

Server starten

bin/start - Development Server startet unter http://127.0.0.1:4000

Einsatz

Moonwalk kann einfach auf allen Cloud -Anbietern (AWS usw.) und auf statischen Website -Hosting -Diensten wie Netlify & Vercel bereitgestellt werden. Sie können diese Schaltfläche auch verwenden, um einen Klick -Bereitstellen durchzuführen

Wenn Sie Moonwalk als Edelstein verwenden oder GitHub -Seiten verwenden möchten, finden Sie diese Seite bitte

Anpassung

Sie können die Datei _config.yml bearbeiten, um Ihr Blog anzupassen. Sie können Dinge wie den Namen des Blogs, den Autor, das Erscheinen des Themas (hell, dunkel oder automatisch) ändern, wie Daten formatiert usw. anpassbaren Feldern unkompliziert sein sollten. Trotzdem enthält _config.yml einige Kommentare, die Ihnen helfen, zu verstehen, was jedes Feld tut.

Für weitere Anpassungen (z. B. Layout, CSS) siehe die Dokumentation des offiziellen Jekyll zum Anpassen von Gem-basierten Themen.

Passen Sie das Menü an

Um Einträge auf der Startseite hinzuzufügen/zu bearbeiten/zu löschen, können Sie die Datei home.yml im Ordner _data kopieren. Über diese Datei können Sie die Struktur des Menüs definieren und Daten für Navi, Fußzeile, Portfolio hinzufügen oder einfach alles entfernen und einfaches Blog -Layout verwenden. Schauen Sie sich die Standardkonfiguration an, um eine Vorstellung davon zu erhalten, wie sie funktioniert, und lesen Sie weiter, um eine umfassendere Erklärung zu erhalten.

Die home.yml -Datei akzeptiert die folgenden Felder:

1. Vertikale Liste

• entries definieren eine neue ungeordnete Liste, die Menüeinträge enthalten
• Jeder Eintrag ist durch a - zu Beginn der Linie gekennzeichnet
• Jeder Eintrag hat die folgenden Attribute:
  • title , der den Text für diesen Menüeintrag definiert, um zu rendern
  • url , die entweder eine URL oder false sein kann. If it is false , the entry will be rendered as plain text; Andernfalls wird der Eintrag als Link wiedergegeben, der auf die angegebene URL zeigt. Beachten Sie, dass die URL entweder relativ oder absolut sein kann.
  • post_list , die true oder false sein kann. Wenn es zutrifft, hat der Eintrag alle Beiträge auf der Website als Untereinträge. Dies wird verwendet, um Ihre Postliste zu rendern.
  • entries , ja, Sie können Einträge innerhalb der Einträge haben. Auf diese Weise können Sie verschachtelte Sublisten erstellen!

2. Kartenliste - Karten werden verwendet, um Portfolioprojekte zu präsentieren. Bitte beachten Sie project_entries in der Datei _data/home.yml

• Jeder Eintrag ist durch a - zu Beginn der Linie gekennzeichnet
• Jeder Eintrag hat die folgenden Attribute:
  • title definiert den Header der Karte
  • desc ist der Körper der Karte
  • url ist ein relativer oder absoluter Link, auf den diese Karte verweisen kann.
  • highlight , falls Sie etwas hervorheben möchten, den Text jedoch kurz halten

3. Horizontale Liste - Moonwalk verwendet horizontale Listen, um Navigationsleiste und Fußzeile zu erstellen. Bitte beachten Sie die Datei navbar_entries und footer_entries in der Datei data/home.yml

• Jeder Eintrag ist durch a - zu Beginn der Linie gekennzeichnet
• Jeder Eintrag hat die folgenden Attribute:
  • title definiert den Header der Karte
  • url ist ein relativer oder absoluter Link, auf den diese Karte verweisen kann.

Pro -Tipps

1. Moonwalk hat 3 eingebaute Layouts:

• Beitrag - für Inhalte
• Blog - Zum Auflisten von Blog -Posts
• Home - Für die Zielseite können Sie Ihre index.md -Datei ändern, um entweder das Heim- oder das Blog -Layout zu verwenden.

2. Es ist extrem einfach, das Farbschema zu optimieren.

• Passen Sie diese CSS -Variablen für den Lichtmodus an

 html {
    --bg : # fff ;
    --bg-secondary : # f3f4f6 ;
    --headings : # 1e293b ;
    --text : # 374151 ;
    --text-secondary : # 6b7280 ;
    --links : # 6366f1 ;
    --highlight : # ffecb2 ; // light yellow
    --code-text : # 9d174d ;
}

• Für den Dunklen Modus passen Sie diese CSS -Variablen an

 @mixin dark-appearance {
  html , body  {
      --headings : # 74c0fc ;
      --links : # 91a7ff ;
      --highlight : # 41c7c7 ;
      --bg : # 1f242a ;
      --bg-secondary : # 323945 ;
      --text : # adb5bd ;
      --text-secondary : # 9ca3af ;
      --code-text : # 91a7ff ;
  };
}

3. Melden Sie sich kostenlos bei Sooph an und fügen Sie Ihre publish_token in _config.yml -Datei hinzu. Dabei erhält jede Seite eine kurze URL, wie die Schaltfläche und automatisch generiertes Teilenbild für soziale Medien.

Beitragen

Fehlerberichte und Pull -Anfragen sind auf Github unter https://github.com/abhinavs/moonwalk willkommen.

Entwicklung

Um Ihre Umgebung für die Entwicklung dieses Themas einzurichten, führen Sie bundle install .

Ihr Thema ist wie eine normale Jekyll -Website eingerichtet! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000 . Dies startet einen Jekyll -Server mit Ihrem Thema. Fügen Sie Seiten, Dokumente, Daten usw. wie normal hinzu, um den Inhalt Ihres Themas zu testen. Wenn Sie Änderungen an Ihrem Thema und Ihrem Inhalt vornehmen, wird sich Ihre Website regenerieren und Sie sollten die Änderungen im Browser nach einer Aktualisierung genauso wie gewohnt sehen.

Wenn Ihr Thema veröffentlicht wird, werden nur die Dateien in _layouts , _includes , _sass und mit Git verfolgten assets gebündelt. Um Ihrem Themen-GEM ein benutzerdefiniertes Verzeichnis hinzuzufügen, bearbeiten Sie bitte den Regexp in moonwalk.gemspec entsprechend.

Anerkennung

Die ursprüngliche Basis dieses Themas ist bitte kein Stil! Thema von Riccardo Graziosi erstellt - dank ihm, dass er ein wundervolles Thema mit fast keinem CSS geschaffen hat.

Lizenz

Das Thema ist unter den Bedingungen der MIT -Lizenz als Open Source erhältlich.

Andere Projekte

Wenn Sie Moonwalk mögen, schauen Sie sich meine anderen Projekte an

• Cookie - Ein KOSTENLOSE Landing -Website -Boilerplate mit Jekyll und Rückenwind -CSS
• Scoop - Ein Sinatra -Boilerplate -Projekt mit Hornhaut, Activerecord, Capistrano, Puma & Nginx
• Sooph - ein Tool, das Sie im Content -Marketing unterstützt
• APICAGENT - Eine kostenlose API, die Gerätedetails aus der Benutzer -Agent -Zeichenfolge extrahiert
• Pincodr - eine freie API für indische Pincodes
• Humangous - Erstellen Sie öffentliche und private "Arbeiten mit Ihnen" Guides
• Blockr - ein CLI -Tool, mit dem Sie Websites einfach blockieren und blockieren können
• Microrequests - Eine Python -Bibliothek, mit der Sie Microservice effizient konsumieren können

Sie können mehr über mich in meinem Blog lesen oder mir auf Twitter folgen - @abhinav

⚡ Wenn Sie meine Arbeit mögen, können Sie mir einen Kaffee kaufen