sveltekit blog mdx
1.0.0
เครื่องมือเริ่มต้นบล็อก SvelteKit เพื่อช่วยให้คุณเริ่มต้นไซต์บล็อก Svelte ถัดไปได้ โปรเจ็กต์สร้าง Progressive Web App (PWA) ทันที คุณเพียงแค่ต้องปรับแต่งด้วยโลโก้ของคุณ ฯลฯ
ดูบล็อกโพสต์ของ Sveltekit Blog Starter บนไซต์ Rodney Lab เพื่อดูคำอธิบายว่ามีอะไรอยู่ข้างในและวิธีปรับแต่ง โปรดวางคำถามลงในความคิดเห็นที่ด้านล่างของหน้านั้น
ต่อไปนี้เป็นการเริ่มต้นอย่างรวดเร็ว:
ทุกสิ่งที่คุณต้องการเพื่อสร้างเว็บไซต์บล็อกของ Svelte ขับเคลื่อนโดย sveltekit-blog-mdx
หากคุณเห็นสิ่งนี้ แสดงว่าคุณคงได้ทำตามขั้นตอนนี้แล้ว ยินดีด้วย!
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 ตัวเริ่มต้นสร้างและแคชรูปภาพที่ตอบสนองโดยใช้ปลั๊กอิน vite-imagetools วิธีนี้จะใช้งานได้ตรงไปตรงมาเมื่อคุณทราบล่วงหน้าว่าคุณต้องการรวมรูปภาพใด คุณเพียงแค่นำเข้ามันบนหน้าที่คุณต้องการใช้:
import featuredImageSrc from '$lib/assets/home/home.jpg' ; ปลั๊กอิน vite-imagetools จะสร้างและแฮชรูปภาพ ดูตัวอย่างใน src/routes/index.svelte
ตัวอย่างที่คุณต้องการให้มีรูปภาพเด่นที่แตกต่างกันสำหรับโพสต์บล็อกแต่ละรายการจะซับซ้อนกว่าเล็กน้อย แต่สามารถจัดการได้ ในกรณีนี้ คุณสามารถเรียกใช้สคริปต์ (ดู generate-responsive-image-data.js ) เพื่อวนซ้ำโพสต์ในบล็อกทั้งหมด โดยนำรูปภาพเด่นจากส่วนหน้าของโพสต์ในบล็อก จากนั้นสคริปต์นี้สามารถส่งออกการนำเข้าที่จำเป็นไปยังไฟล์ JavaScript ที่สร้างขึ้น หนึ่งรายการสำหรับแต่ละโพสต์ในบล็อก (ดูไดเร็กทอรี src/lib/generated ) ในที่สุด คุณก็สามารถนำเข้าไฟล์ JavaScript นั้นแบบไดนามิกในฟังก์ชันโหลดเทมเพลตบล็อกได้
หากต้องการรันสคริปต์ที่รวมไว้ด้วยคำสั่งเช่นประเภท:
pnpm run gen:imagesควรทำทุกครั้งที่คุณเพิ่มโพสต์ในบล็อกใหม่ นอกจากนี้ยังสร้างตัวยึดที่มีความละเอียดต่ำ เพื่อลดการเปลี่ยนแปลงเค้าโครงเนื้อหาระหว่างการโหลดเพจ
เพื่อให้สคริปต์ค้นหารูปภาพโพสต์บนบล็อกของคุณ ให้เพิ่มรูปภาพเหล่านั้นลงในโฟลเดอร์ src/lib/assets/blog ในโฟลเดอร์นั้น ให้สร้างโฟลเดอร์ใหม่ที่มีชื่อตรงกับ post slug และเพิ่มรูปภาพลงในโฟลเดอร์ใหม่ ชื่อของไฟล์จะต้องตรงกับชื่อที่คุณใช้คือส่วนหน้าของโพสต์ (สำหรับ FeaturedImage เป็นต้น)
สคริปต์อาจต้องมีการปรับแต่งให้เหมาะกับกรณีการใช้งานของคุณ แจ้งให้เราทราบว่าจะปรับปรุงได้อย่างไร
src/routes/sitemap.xml/+server.js ปรับแต่งไฟล์นี้เพื่อปรับเอาต์พุต ตรวจสอบให้แน่ใจว่า URL ของเว็บไซต์ของคุณถูกกำหนดไว้ใน .env เป็นตัวแปร PUBLIC_SITE_URL เพื่อให้ URL ที่ถูกต้องถูกส่งออกไปยังแผนผังเว็บไซต์
สตาร์ทเตอร์ส่วนใหญ่จะสร้างการกำหนดค่า PWA โดยอัตโนมัติ รวมถึงพนักงานบริการสำหรับความพร้อมใช้งานแบบออฟไลน์และการเพิ่มเมตาลงในส่วนหัวของ HTML PWA ต้องการไฟล์ Manifest ที่แสดงรายละเอียดโลโก้ (สำหรับไอคอน Fav) ในขนาดต่างๆ และเข้ากันได้กับอุปกรณ์ต่างๆ คุณจะต้องสร้างชุดไอคอนใน assets/ :
คุณสามารถใช้เครื่องมือโอเพ่นซอร์สฟรีเพื่อสร้างและเพิ่มประสิทธิภาพสิ่งเหล่านี้จากอินพุต SVG ทรัพยากรนั้นมีเชลล์สคริปต์ที่คุณสามารถเรียกใช้เพื่อสร้างอัตโนมัติได้
เมตา HTML สำหรับ PWAs ถูกเพิ่มในส่วนประกอบที่ src/lib/components/PWA.svelte
คุณสามารถปรับแต่งรายการ (รวมถึงเส้นทางไฟล์ไอคอน) ได้โดยแก้ไข src/lib/config/website.js ตัวแปรต่อไปนี้ฟีดลงในไฟล์ manifest.json ที่สร้างขึ้น:
siteTitle ,siteShortTitle ,siteUrl ,backgroundColor ,themeColorดูบทความเกี่ยวกับ Progressive Web Apps ใน SvelteKit สำหรับข้อมูลเพิ่มเติม
npm run buildคุณสามารถดูตัวอย่างแอปที่สร้างขึ้นด้วย
npm run previewไม่ว่าคุณจะติดตั้งอะแดปเตอร์หรือไม่ก็ตาม ไม่ ควรใช้สิ่งนี้เพื่อให้บริการแอปของคุณในเวอร์ชันที่ใช้งานจริง
.
├── 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 เป็นที่ที่เราต้องใส่โพสต์ในบล็อกของเรา เพียงล้างเนื้อหาตัวอย่างและแทนที่ด้วยมุมมองของคุณต่อโลก! มีโฟลเดอร์แยกต่างหากสำหรับแต่ละโพสต์ ซึ่งช่วยให้คุณสามารถเก็บรูปภาพ วิดีโอ และสื่ออื่นๆ ที่เกี่ยวข้องสำหรับโพสต์โดยเฉพาะได้เป็นระเบียบมากขึ้น เราตั้งค่าเส้นทางเบราว์เซอร์จากชื่อโฟลเดอร์นี้ ดังนั้นโปรดคำนึงถึงเรื่องนี้เมื่อตั้งชื่อโฟลเดอร์ เขียนโพสต์จริงในไฟล์ชื่อ index.md ภายในโฟลเดอร์ของโพสต์ แม้ว่าไฟล์จะมีนามสกุล .md แต่คุณสามารถเขียน Svelte ลงไปได้srchooks.server.js เรากำหนดนโยบายความปลอดภัยเนื้อหา (CSP) และส่วนหัวความปลอดภัย HTTP อื่นๆ ในที่นี้ ซึ่งมีผลกับแอปที่แสดงผลฝั่งเซิร์ฟเวอร์ ดูโพสต์บนส่วนหัว HTTP ของไซต์แบบคงที่ของ SvelteKit เพื่อดูวิธีตั้งค่า CSP ฯลฯ สำหรับไซต์แบบคงที่src/componentssrc/lib/components เหล่านี้คือส่วนประกอบที่เราใช้ในหน้าต่างๆsrc/lib src/lib/config/website.js เพื่อความสะดวก เรากำหนดคุณสมบัติของไซต์ที่นี่ เช่น ชื่อไซต์ ที่อยู่อีเมลสำหรับติดต่อ และบัญชีโซเชียลมีเดีย คุณสมบัติบางอย่างฟีดจากตัวแปรสภาพแวดล้อม ดูโพสต์เกี่ยวกับการเริ่มต้นใช้งาน SvelteKit สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวแปรสภาพแวดล้อมใน SvelteKit
src/lib/styles ทำในสิ่งที่คุณคาดหวัง! เราใช้ SCSS เพื่อจัดรูปแบบและแหล่งที่มาของแบบอักษรที่โฮสต์เองในเค้าโครง
src/utilitiessrc/utilities/blog.js ไฟล์นี้มีโค้ดบางส่วนที่ช่วยเราแปลงมาร์กดาวน์ในบล็อกโพสต์เป็น Svelte รวมทั้งช่วยแยกฟิลด์ใน frontmatter (นี่คือข้อมูลเมตาที่เรารวมไว้ที่ด้านบนของไฟล์โพสต์ในบล็อก index.md )src/routes src/routes/[slug]/+page.js นี่เป็นเทมเพลตสำหรับข้อมูลโพสต์ในบล็อกเป็นหลัก ไฟล์ใดไฟล์หนึ่งเหล่านี้ถูกสร้างขึ้นที่ build สำหรับแต่ละโพสต์ในบล็อก ใช้เพื่อแยกข้อมูลที่จำเป็นในไฟล์ Svelte ที่ใช้สร้าง HTML ของโพสต์
src/routes/[slug]/+page.svelte คล้ายกับไฟล์ก่อนหน้า โดยไฟล์ใดไฟล์หนึ่งจะถูกสร้างขึ้นสำหรับแต่ละโพสต์ในบล็อก คราวนี้เป็นโค้ด Svelte ที่ SvelteKit ใช้เพื่อสร้าง HTML และ JavaScript สำหรับโพสต์ในบล็อกของเรา
ฉันพูดถึงไฟล์อื่นๆ ส่วนใหญ่ในโพสต์บล็อกการเริ่มต้นใช้งาน SvelteKit แต่แจ้งให้เราทราบหากฉันพลาดสิ่งใดที่ต้องการคำอธิบายเพิ่มเติม
กระโดดเข้าสู่ห้องสนทนาเมทริกซ์ของ Rodney Lab ได้เลย
