sveltekit blog mdx
1.0.0
SvelteKit-Blog-Starter, der Ihnen den Einstieg in Ihre nächste Svelte-Blog-Site erleichtert. Das Projekt erstellt sofort eine Progressive Web App (PWA). Sie müssen lediglich Ihre Logos usw. anpassen.
Im Sveltekit-Blog-Starter-Blogbeitrag auf der Website von Rodney Lab finden Sie eine Erklärung zum Inhalt und zur Anpassung. Bitte hinterlassen Sie Ihre Fragen in einem Kommentar unten auf dieser Seite.
Hier ist der Schnellstart:
Alles, was Sie zum Erstellen einer Svelte-Blog-Site benötigen, unterstützt von sveltekit-blog-mdx .
Wenn Sie dies sehen, haben Sie diesen Schritt wahrscheinlich bereits ausgeführt. Glückwunsch!
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git my-new-mdsvex-blog
cd my-new-mdsvex-blog
pnpm install # or npm install
npm run dev Der Starter erstellt und speichert reaktionsfähige Bilder mit dem Plugin vite-imagetools . Dies ist einfach anzuwenden, wenn Sie im Voraus wissen, welches Bild Sie einfügen möchten. Sie importieren es einfach auf der Seite, auf der Sie es verwenden möchten:
import featuredImageSrc from '$lib/assets/home/home.jpg' ; Das vite-imagetools -Plugin generiert und hasht dann das Bild. Siehe Beispiele in src/routes/index.svelte .
Das Beispiel, bei dem Sie für jeden Blog-Beitrag ein anderes vorgestelltes Bild haben möchten, ist etwas komplizierter, aber überschaubar. In diesem Fall können Sie ein Skript ausführen (siehe generate-responsive-image-data.js ), um alle Blog-Beiträge zu durchlaufen und dabei das vorgestellte Bild aus der Titelseite des Blog-Beitrags zu übernehmen. Dieses Skript kann dann die erforderlichen Importe in eine generierte JavaScript-Datei ausgeben, eine für jeden Blog-Beitrag (siehe Verzeichnis src/lib/generated ). Schließlich können Sie diese JavaScript-Datei dynamisch in die Funktion zum Laden von Blog-Vorlagen importieren.
Um das enthaltene Skript mit dem folgenden Befehl auszuführen, geben Sie Folgendes ein:
pnpm run gen:imagesDies sollte jedes Mal erfolgen, wenn Sie neue Blogbeiträge hinzufügen. Außerdem wird ein Platzhalter mit niedriger Auflösung generiert, um eine Verschiebung des Inhaltslayouts beim Laden der Seite zu minimieren.
Damit das Skript Ihre Blog-Beitragsbilder findet, fügen Sie sie im Ordner src/lib/assets/blog hinzu. Erstellen Sie in diesem Ordner einen neuen Ordner, dessen Name mit dem Post-Slug übereinstimmt, und fügen Sie die Bilder dem neuen Ordner hinzu. Der Name der Datei muss mit dem Namen übereinstimmen, den Sie im Post-Frontmatter verwenden (z. B. für „featedImage“).
Das Skript muss möglicherweise für Ihren Anwendungsfall angepasst werden. Lassen Sie mich wissen, wie es verbessert werden kann.
src/routes/sitemap.xml/+server.js generiert. Optimieren Sie diese Datei, um die Ausgabe anzupassen. Stellen Sie sicher, dass die URL Ihrer Site in .env als Variable PUBLIC_SITE_URL definiert ist, damit die richtigen URLs in der Sitemap ausgegeben werden.
Der Starter generiert die PWA-Konfiguration größtenteils automatisch, einschließlich des Service-Workers für die Offline-Verfügbarkeit und des Hinzufügens von Metadaten zum HTML-Kopfabschnitt. Eine PWA benötigt eine Manifestdatei mit detaillierten Logos (für Favicons) in verschiedenen Größen, die mit verschiedenen Geräten kompatibel sind. Sie müssen eine Reihe von Symbolen in assets/ generieren:
Sie können kostenlose Open-Source-Tools verwenden, um diese aus einer Eingabe-SVG zu generieren und zu optimieren. Diese Ressource enthält ein Shell-Skript, das Sie ausführen können, um die Generierung zu automatisieren.
Das HTML-Meta für PWAs wird in der Komponente unter src/lib/components/PWA.svelte hinzugefügt.
Sie können das Manifest (einschließlich Pfad der Symboldatei) anpassen, indem Sie src/lib/config/website.js bearbeiten. Die folgenden Variablen werden in die generierte Datei manifest.json eingespeist:
siteTitle ,siteShortTitle ,siteUrl ,backgroundColor ,themeColor .Weitere Informationen finden Sie im Artikel über Progressive Web Apps in SvelteKit.
npm run buildSie können mit
npm run previeweine Vorschau der erstellten App anzeigen, unabhängig davon, ob Sie einen Adapter installiert haben. Dies sollte nicht zur Bereitstellung Ihrer App in der Produktion verwendet werden.
.
├── README.md
├── generate-responsive-image-data.js
├── jsconfig.json
├── netlify.toml
├── package.json
├── src
│ ├── app.html
│ ├── content
│ │ └── blog
│ │ ├── best-medium-format-camera-for-starting-out
│ │ ├── folding-camera
│ │ └── twin-lens-reflex-camera
│ ├── global.d.ts
│ ├── hooks.server.js
│ ├── lib
│ │ ├── assets
│ │ │ ├── blog
│ │ │ └── home
│ │ ├── components
│ │ │ ├── BannerImage.svelte
│ │ │ └── ...
│ │ ├── config
│ │ │ └── website.js
│ │ ├── constants
│ │ │ └── entities.js
│ │ ├── generated
│ │ │ └── posts
│ │ ├── styles
│ │ └── utilities
│ │ ├── blog.js
│ │ ├── file.js
│ │ └── image.js
│ ├── routes
│ │ ├── +error.svelte
│ │ ├── +layout.js
│ │ ├── +layout.svelte
│ │ ├── +page.js
│ │ ├── +page.svelte
│ │ ├── [slug]
│ │ │ ├── +layout.svelte
│ │ │ ├── +page.js
│ │ │ └── +page.svelte
│ │ ├── contact
│ │ │ └── +page.svelte
│ │ ├── manifest.webmanifest
│ │ │ └── +server.js
│ │ └── sitemap.xml
│ │ └── +server.js
│ └── service-worker.js
├── static
│ ├── assets
│ ├── favicon.png
│ ├── icon.svg
│ ├── robots.txt
│ └── sitemap.xml
└── svelte.config.js
src/contentsrc/content/blog müssen wir unsere Blogbeiträge platzieren. Bereinigen Sie einfach den Beispielinhalt und ersetzen Sie ihn durch Ihre Ansichten über die Welt! Für jeden Beitrag gibt es einen separaten Ordner, sodass Sie Bilder, Videos und andere verwandte Medien, die sich auf einen Beitrag beziehen, besser organisiert aufbewahren können. Wir legen den Browserpfad anhand dieses Ordnernamens fest. Berücksichtigen Sie dies also bei der Benennung der Ordner. Schreiben Sie den eigentlichen Beitrag in eine Datei namens index.md im Ordner des Beitrags. Obwohl die Datei die Erweiterung .md hat, können Sie Svelte darin schreiben.srchooks.server.js definieren wir hier Content Security Policy (CSP) und andere HTTP-Sicherheitsheader, die für serverseitig gerenderte Apps wirksam sind. Im Beitrag über HTTP-Header für statische SvelteKit-Sites erfahren Sie, wie Sie CSP usw. für statische Sites einrichten.src/componentssrc/lib/components Dies sind die Komponenten, die wir in Seiten verwenden.src/lib src/lib/config/website.js Der Einfachheit halber definieren wir hier Eigenschaften für die Site, wie z. B. den Site-Titel, Kontakt-E-Mail-Adressen und Social-Media-Konten. Einige Eigenschaften werden von Umgebungsvariablen gespeist. Weitere Informationen zu Umgebungsvariablen in SvelteKit finden Sie in einem Beitrag zu den ersten Schritten mit SvelteKit.
src/lib/styles macht, was Sie erwarten! Wir verwenden SCSS für die Gestaltung und Quelle selbst gehosteter Schriftarten in den Layouts.
src/utilitiessrc/utilities/blog.js Diese Datei enthält Code, der uns dabei hilft, den Markdown in Blogbeiträgen in Svelte umzuwandeln. Darüber hinaus helfen sie beim Extrahieren von Feldern im Frontmatter (dies sind die Metadaten, die wir oben in die index.md Dateien des Blog-Beitrags einfügen).src/routes src/routes/[slug]/+page.js Dies ist im Wesentlichen eine Vorlage für Blog-Post-Daten. Eine dieser Dateien wird beim Build für jeden Blog-Beitrag generiert. Es wird verwendet, um Daten zu extrahieren, die in der Svelte-Datei benötigt werden, die zum Generieren des HTML-Codes des Beitrags verwendet wird.
src/routes/[slug]/+page.svelte Ähnlich wie bei der vorherigen Datei wird eine davon für jeden Blog-Beitrag generiert. Diesmal ist es der Svelte-Code, den SvelteKit verwendet, um HTML und JavaScript für unsere Blogbeiträge zu generieren.
Ich erwähne die meisten anderen Dateien im Blogbeitrag „Erste Schritte mit SvelteKit“, lass es mich aber wissen, wenn ich etwas übersehen habe, das einer weiteren Erklärung bedarf.
Besuchen Sie gerne den Matrix-Chatroom von Rodney Lab.
