sveltekit blog mdx

Pemula Blog SvelteKit MDsvex

sveltekit-blog-mdx

Pemula blog SvelteKit untuk membantu Anda memulai situs blog Svelte berikutnya. Proyek ini menciptakan Aplikasi Web Progresif (PWA) yang siap pakai. Anda hanya perlu menyesuaikan dengan logo Anda, dll.

Lihat postingan blog Sveltekit Blog Starter di situs Rodney Lab untuk penjelasan tentang apa yang ada di dalamnya dan bagaimana cara menyesuaikannya. Silakan masukkan pertanyaan ke dalam komentar di bagian bawah halaman itu.

Inilah cara cepatnya:

Semua yang Anda perlukan untuk membangun situs blog Svelte, didukung oleh sveltekit-blog-mdx .

Membuat Situs Blog MDsveX Anda Sendiri

Jika Anda melihat ini, Anda mungkin sudah melakukan langkah ini. Selamat!

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

Gambar Responsif

Pemula membuat dan menyimpan gambar responsif menggunakan plugin vite-imagetools . Ini mudah digunakan jika Anda sudah mengetahui sebelumnya gambar mana yang ingin Anda sertakan. Anda cukup mengimpornya ke halaman tempat Anda ingin menggunakannya:

 import featuredImageSrc from '$lib/assets/home/home.jpg' ;

Plugin vite-imagetools kemudian akan menghasilkan dan melakukan hash pada gambar. Lihat contoh di src/routes/index.svelte .

Contoh di mana Anda ingin memiliki gambar unggulan yang berbeda untuk setiap postingan blog sedikit lebih rumit, meskipun dapat dikelola. Dalam hal ini, Anda dapat menjalankan skrip (lihat generate-responsive-image-data.js ) untuk mengulangi semua postingan blog, mengambil gambar unggulan dari bagian depan postingan blog. Skrip ini kemudian dapat menampilkan impor yang diperlukan ke dalam file JavaScript yang dihasilkan, satu untuk setiap entri blog (lihat direktori src/lib/generated ). Terakhir, Anda dapat mengimpor file JavaScript tersebut secara dinamis ke fungsi pemuatan template blog.

Untuk menjalankan skrip yang disertakan dengan perintah seperti ketik:

pnpm run gen:images

Ini harus dilakukan setiap kali Anda menambahkan postingan blog baru. Ini juga menghasilkan placeholder resolusi rendah, untuk meminimalkan pergeseran Tata Letak Konten selama pemuatan halaman.

Agar skrip dapat menemukan gambar postingan blog Anda, tambahkan gambar tersebut di bawah folder src/lib/assets/blog . Di folder tersebut, buat folder baru yang namanya sesuai dengan post slug dan tambahkan gambar ke folder baru. Nama file harus sesuai dengan nama yang Anda gunakan adalah post frontmatter (untuk FeaturedImage, misalnya).

Skrip mungkin memerlukan beberapa penyesuaian untuk kasus penggunaan Anda. Beri tahu saya cara memperbaikinya.

Peta Situs XML

• Peta situs XML dibuat di rute server src/routes/sitemap.xml/+server.js . Sesuaikan file ini untuk menyesuaikan keluaran.

Pastikan URL situs Anda didefinisikan dalam .env sebagai variabel PUBLIC_SITE_URL sehingga URL yang benar ditampilkan ke peta situs.

Aplikasi Web Progresif (PWA)

Pemula sebagian besar menghasilkan konfigurasi PWA secara otomatis, termasuk pekerja layanan untuk ketersediaan offline dan menambahkan meta ke bagian kepala HTML. PWA memerlukan file manifes yang merinci logo (untuk favicon) dalam berbagai ukuran, kompatibel dengan berbagai perangkat. Anda perlu membuat satu set ikon di assets/ :

• ikon-sentuh-apel.png
• favicon.ico
• ikon.svg
• ikon-192.png
• ikon-512.png

Anda dapat menggunakan alat sumber terbuka gratis untuk menghasilkan dan mengoptimalkannya dari masukan SVG. Sumber daya tersebut mencakup skrip shell yang dapat Anda jalankan untuk mengotomatisasi pembuatan.

Meta HTML untuk PWA ditambahkan dalam komponen di src/lib/components/PWA.svelte .

Anda dapat menyesuaikan manifes (termasuk jalur file ikon) dengan mengedit src/lib/config/website.js . Variabel berikut dimasukkan ke dalam file manifest.json yang dihasilkan:

• siteTitle ,
• siteShortTitle ,
• siteUrl ,
• backgroundColor ,
• themeColor .

Lihat artikel tentang Aplikasi Web Progresif di SvelteKit untuk informasi lebih lanjut.

Bangunan

npm run build

Anda dapat melihat pratinjau aplikasi yang dibuat dengan npm run preview , terlepas dari apakah Anda memasang adaptor. Ini tidak boleh digunakan untuk menayangkan aplikasi Anda dalam produksi.

Apa yang ada di dalamnya?

 .
├── 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/content

• src/content/blog adalah tempat kita meletakkan postingan blog kita. Hapus saja contoh konten dan ganti dengan pandangan Anda tentang dunia! Terdapat folder terpisah untuk setiap postingan, yang memungkinkan Anda menyimpan gambar, video, dan media terkait lainnya khusus untuk postingan dengan lebih terorganisir. Kami menetapkan jalur browser dari nama folder ini, jadi ingatlah hal itu saat memberi nama folder. Tulis postingan sebenarnya dalam file bernama index.md di dalam folder postingan. Meskipun file tersebut memiliki ekstensi .md , Anda dapat menulis Svelte di dalamnya.

src

• hooks.server.js kami mendefinisikan Kebijakan Keamanan Konten (CSP) dan header keamanan HTTP lainnya di sini, efektif untuk aplikasi yang dirender di sisi server. Lihat posting di header HTTP situs statis SvelteKit untuk melihat cara mengatur CSP dll. untuk situs statis.

src/components

• src/lib/components ini adalah komponen yang kami gunakan di halaman.

src/lib

• src/lib/config/website.js untuk kenyamanan kami mendefinisikan properti situs di sini seperti judul situs, alamat email kontak, dan akun media sosial. Beberapa properti diambil dari variabel lingkungan. Lihat postingan tentang memulai SvelteKit untuk mengetahui lebih lanjut tentang variabel lingkungan di SvelteKit.

• src/lib/styles melakukan apa yang Anda harapkan! Kami menggunakan SCSS untuk penataan gaya dan sumber font yang dihosting sendiri di tata letak.

src/utilities

• src/utilities/blog.js file ini berisi beberapa kode untuk membantu kami mengubah penurunan harga pada postingan blog menjadi Svelte. Selain itu mereka membantu mengekstrak bidang di frontmatter (ini adalah metadata yang kami sertakan di bagian atas file index.md posting blog).

src/routes

• src/routes/[slug]/+page.js ini pada dasarnya adalah templat untuk data posting blog. Salah satu file ini dibuat saat build untuk setiap postingan blog. Ini digunakan untuk mengekstrak data yang diperlukan dalam file Svelte yang digunakan untuk menghasilkan HTML postingan.

• src/routes/[slug]/+page.svelte mirip dengan file sebelumnya, salah satunya dibuat untuk setiap posting blog. Kali ini adalah kode Svelte yang digunakan SvelteKit untuk menghasilkan HTML dan JavaScript untuk postingan blog kita.

Saya menyebutkan sebagian besar file lainnya di postingan blog Memulai SvelteKit, namun beri tahu saya jika saya melewatkan sesuatu yang memerlukan penjelasan lebih lanjut.

Jangan ragu untuk masuk ke ruang obrolan matriks Rodney Lab.