jigsaw blog template

Jigsaw-Blog-Starter-Vorlage

Dies ist eine Einstiegsvorlage zum Erstellen eines schönen, anpassbaren Blogs in Jigsaw mit minimalem Aufwand. Sie müssen nur ein paar Einstellungen ändern und schon kann es losgehen.

Sehen Sie sich eine Vorschau der Blog-Vorlage an.

Installation

Führen Sie nach der Installation von Jigsaw den folgenden Befehl in Ihrem Projektverzeichnis aus:

./vendor/bin/jigsaw init blog

Diese Startervorlage enthält Beispiele gängiger Seitentypen und ist vorkonfiguriert mit:

• Eine vollständig responsive Navigationsleiste
• Tailwind CSS, ein nützliches CSS-Framework, mit dem Sie Ihr Design anpassen können, ohne eine Zeile CSS zu berühren
• Purgecss, um nicht verwendete Selektoren aus Ihrem CSS zu entfernen, was zu kleineren CSS-Dateien führt
• Syntaxhervorhebung mit highlights.js
• Ein Skript, das automatisch eine sitemap.xml Datei generiert
• Eine benutzerdefinierte 404-Seite
• Eine Komponente zum Akzeptieren von Anmeldungen für einen Mailchimp-Newsletter
• Ein Beispiel-Kontaktformular
• Eine von Fuse.js und Alpine.js unterstützte Suchleiste, die Ihre Inhalte automatisch indiziert und keine Konfiguration erfordert

---

---

Konfigurieren Sie Ihre neue Site

Wie bei allen Jigsaw-Sites finden Sie die Konfigurationseinstellungen in config.php ; Sie können die Variablen in dieser Datei mit den für Ihre Site spezifischen Einstellungen aktualisieren. Sie können dort auch neue Konfigurationsvariablen hinzufügen, die Sie auf Ihrer gesamten Site verwenden können. Schauen Sie sich die Jigsaw-Dokumentation an, um mehr zu erfahren.

 // config.php
return [
    ' baseUrl ' => ' https://my-awesome-jigsaw-site.com/ ' ,
    ' production ' => false ,
    ' siteName ' => ' My Site ' ,
    ' siteDescription ' => ' Give your blog a boost with Jigsaw. ' ,
    ...
];

Tipp: In dieser Konfigurationsdatei definieren Sie auch alle „Sammlungen“ (z. B. eine Sammlung der Mitwirkenden Ihrer Website oder eine Sammlung von Blogbeiträgen, die nach Themen geordnet sind). Weitere Informationen finden Sie in der offiziellen Jigsaw-Dokumentation.

---

Inhalte hinzufügen

Sie können Ihre Inhalte mit verschiedenen Dateitypen schreiben. Standardmäßig geht diese Startervorlage davon aus, dass sich Ihre Inhalte im Ordner source/_posts/ befinden.

Oben auf jeder Inhaltsseite befindet sich ein YAML-Header, der angibt, wie sie gerendert werden soll. Das title wird verwendet, um HTML- title und OpenGraph-Tags für jede Seite dynamisch zu generieren. Das Attribut „ extends definiert, mit welchem ​​übergeordneten Blade-Layout diese Inhaltsdatei gerendert wird (z. B. _layouts.post wird mit source/_layouts/post.blade.php gerendert), und das Attribut „ section “ definiert den Blade-„Abschnitt“, der die Platzierung dieses Inhalts erwartet hinein.

---
extends : _layouts.post
section : content
title : Getting Started
date : 2022-08-02
description : Getting started with the Jigsaw blog starter template
cover_image : /assets/img/post-cover-image-2.png
featured : true
---

---

Assets hinzufügen

Alle Assets, die kompiliert werden müssen (z. B. JavaScript-, Less- oder Sass-Dateien), können zum Verzeichnis source/_assets/ hinzugefügt werden, und Laravel Mix verarbeitet sie, wenn npm run dev oder npm run prod ausgeführt wird. Die verarbeiteten Assets werden in /source/assets/build/ gespeichert (beachten Sie, dass in diesem zweiten assets -Verzeichnis kein Unterstrich vorhanden ist).

Wenn Jigsaw dann Ihre Site erstellt, wird das gesamte Verzeichnis /source/assets/ mit Ihren erstellten Dateien (und alle anderen Verzeichnisse mit statischen Assets wie Bildern oder Schriftarten, die Sie dort speichern möchten) in die Ziel-Build-Ordner kopiert ( build_local , auf Ihrem lokalen Computer).

Dateien, die keiner Bearbeitung bedürfen (z. B. Bilder und Schriftarten), können direkt zu /source/assets/ hinzugefügt werden.

Lesen Sie mehr über das Kompilieren von Assets in Jigsaw mit Laravel Mix.

---

Erstellen Sie Ihre Website

Nachdem Sie nun Ihre Konfigurationsvariablen bearbeitet haben und wissen, wie Sie Ihre Stile und Inhalte anpassen, beginnen wir mit der Erstellung der Site.

 # build static files with Jigsaw
./vendor/bin/jigsaw build

# compile assets with Laravel Mix
# options: dev, prod
npm run dev