sveltekit blog mdx
1.0.0
Lanceur de blog SvelteKit pour vous aider à démarrer votre prochain site de blog Svelte. Le projet crée une Progressive Web App (PWA) prête à l'emploi. Il vous suffit de le personnaliser avec vos logos, etc.
Consultez le billet de blog Sveltekit Blog Starter sur le site de Rodney Lab pour obtenir des explications sur le contenu et sur la manière de le personnaliser. Veuillez déposer vos questions dans un commentaire au bas de cette page.
Voici le démarrage rapide :
Tout ce dont vous avez besoin pour créer un site de blog Svelte, propulsé par sveltekit-blog-mdx .
Si vous voyez ceci, vous avez probablement déjà effectué cette étape. Bravo!
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 Le démarreur crée et met en cache des images réactives à l'aide du plugin vite-imagetools . C’est simple à utiliser lorsque vous savez à l’avance quelle image vous souhaitez inclure. Il vous suffit de l'importer sur la page sur laquelle vous souhaitez l'utiliser :
import featuredImageSrc from '$lib/assets/home/home.jpg' ; Le plugin vite-imagetools générera et hachera ensuite l'image. Voir des exemples dans src/routes/index.svelte .
L'exemple dans lequel vous souhaitez avoir une image sélectionnée différente pour chaque article de blog est un peu plus compliqué, bien que gérable. Dans ce cas, vous pouvez exécuter un script (voir generate-responsive-image-data.js ) pour parcourir tous les articles de blog, en prenant l'image présentée dans le contenu de l'article de blog. Ce script peut ensuite générer les importations nécessaires dans un fichier JavaScript généré, un pour chaque article de blog (voir le répertoire src/lib/generated ). Enfin, vous pouvez importer dynamiquement ce fichier JavaScript dans la fonction de chargement du modèle de blog.
Pour exécuter le script inclus à la commande, tapez :
pnpm run gen:imagesCela devrait être fait chaque fois que vous ajoutez de nouveaux articles de blog. Il génère également un espace réservé basse résolution, pour minimiser le changement de mise en page du contenu pendant le chargement de la page.
Pour que le script trouve les images de vos articles de blog, ajoutez-les dans le dossier src/lib/assets/blog . Dans ce dossier, créez un nouveau dossier dont le nom correspond au post slug et ajoutez les images au nouveau dossier. Le nom du fichier doit correspondre au nom que vous utilisez est le sujet de publication (pour FeaturedImage, par exemple).
Le script peut nécessiter quelques ajustements pour votre cas d'utilisation. Faites-moi savoir comment cela peut être amélioré.
src/routes/sitemap.xml/+server.js . Ajustez ce fichier pour ajuster la sortie. Assurez-vous que l'URL de votre site est définie dans .env en tant que variable PUBLIC_SITE_URL afin que les URL correctes soient affichées sur le plan du site.
Le démarreur génère principalement automatiquement la configuration PWA, y compris le service worker pour la disponibilité hors ligne et l'ajout de méta à la section d'en-tête HTML. Une PWA a besoin d’un fichier manifeste détaillant des logos (pour les favicons) de différentes tailles, compatibles avec différents appareils. Vous devrez générer un ensemble d'icônes dans assets/ :
Vous pouvez utiliser des outils open source gratuits pour les générer et les optimiser à partir d'un SVG d'entrée. Cette ressource comprend un script shell que vous pouvez exécuter pour automatiser la génération.
La méta HTML pour les PWA est ajoutée dans le composant à src/lib/components/PWA.svelte .
Vous pouvez personnaliser le manifeste (y compris le chemin du fichier d'icône) en modifiant src/lib/config/website.js . Les variables suivantes alimentent le fichier manifest.json généré :
siteTitle ,siteShortTitle ,siteUrl ,backgroundColor ,themeColor .Voir l'article sur les applications Web progressives dans SvelteKit pour en savoir plus.
npm run buildVous pouvez prévisualiser l'application créée avec
npm run preview, que vous ayez ou non installé un adaptateur. Cela ne doit pas être utilisé pour diffuser votre application en production.
.
├── 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 est l'endroit où nous devons mettre nos articles de blog. Nettoyez simplement l'exemple de contenu et remplacez-le par votre vision du monde ! Il existe un dossier séparé pour chaque publication, ce qui vous permet de mieux organiser les images, vidéos et autres médias associés spécifiques à une publication. Nous définissons le chemin du navigateur à partir de ce nom de dossier, alors gardez cela à l'esprit lorsque vous nommez les dossiers. Écrivez la publication réelle dans un fichier appelé index.md dans le dossier de la publication. Bien que le fichier ait une extension .md , vous pouvez y écrire Svelte.srchooks.server.js nous définissons ici la politique de sécurité du contenu (CSP) et d'autres en-têtes de sécurité HTTP, efficaces pour les applications rendues côté serveur. Voir l'article sur les en-têtes HTTP du site statique SvelteKit pour voir comment configurer CSP, etc. pour les sites statiques.src/componentssrc/lib/components ce sont les composants que nous utilisons dans les pages.src/lib src/lib/config/website.js pour plus de commodité, nous définissons ici les propriétés du site telles que le titre du site, les adresses e-mail des contacts et les comptes de réseaux sociaux. Certaines propriétés se nourrissent de variables d'environnement. Consultez un article sur la prise en main de SvelteKit pour en savoir plus sur les variables d'environnement dans SvelteKit.
src/lib/styles fait ce que vous attendez ! Nous utilisons SCSS pour le style et la source des polices auto-hébergées dans les mises en page.
src/utilitiessrc/utilities/blog.js ce fichier contient du code pour nous aider à transformer la démarque des articles de blog en Svelte. De plus, ils aident à extraire les champs du frontmatter (il s'agit des métadonnées que nous incluons en haut des fichiers index.md du billet de blog).src/routes src/routes/[slug]/+page.js il s'agit essentiellement d'un modèle pour les données d'articles de blog. L'un de ces fichiers est généré lors de la construction de chaque article de blog. Il est utilisé pour extraire les données nécessaires dans le fichier Svelte utilisé pour générer le HTML de la publication.
src/routes/[slug]/+page.svelte de la même manière que le fichier précédent, l'un d'entre eux est généré pour chaque article de blog. Cette fois, c'est le code Svelte que SvelteKit utilise pour générer le HTML et le JavaScript de nos articles de blog.
Je mentionne la plupart des autres fichiers dans le billet de blog Getting Started with SvelteKit, mais faites-moi savoir si j'ai manqué quelque chose qui nécessite plus d'explications.
N'hésitez pas à vous rendre dans la salle de discussion matricielle de Rodney Lab.
