sveltekit blog mdx
1.0.0
SvelteKit 部落格啟動器可協助您開始建立下一個 Svelte 部落格網站。此專案建立了一個開箱即用的漸進式 Web 應用程式 (PWA)。您只需要使用您的徽標等進行自訂。
請參閱 Rodney Lab 網站上的 Sveltekit Blog Starter 部落格文章，以了解有關內部內容以及如何自訂的一些說明。請將問題放入該頁面底部的評論中。
這是一個快速入門：
建立 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 frontmatter（例如，featuredImage）。
該腳本可能需要根據您的用例進行一些調整。讓我知道如何改進它。
src/routes/sitemap.xml/+server.js中產生。調整此文件以調整輸出。確保您網站的 URL 在.env中定義為PUBLIC_SITE_URL變量，以便將正確的 URL 輸出到網站地圖。
啟動器主要自動產生 PWA 配置，包括用於離線可用性的 Service Worker 以及將元新增至 HTML head 部分。 PWA 需要一個清單文件，詳細說明不同尺寸的標誌（用於網站圖示），並與各種裝置相容。您需要在assets/中產生一組圖示：
您可以使用免費的開源工具從輸入 SVG 生成和優化這些內容。此資源包括一個 shell 腳本，您可以執行該腳本來自動產生。
PWA 的 HTML 元資料加入src/lib/components/PWA.svelte的元件中。
您可以透過編輯src/lib/config/website.js來自訂清單（包括圖示檔案路徑）。以下變數輸入到產生的manifest.json檔案：
siteTitle ,siteShortTitle ,siteUrl ,backgroundColor ,themeColor 。有關更多信息，請參閱有關 SvelteKit 中的漸進式 Web 應用程式的文章。
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 安全標頭，對伺服器端渲染的應用程式有效。請參閱 SvelteKit 靜態網站 HTTP 標頭上的帖子，以了解如何為靜態網站設定 CSP 等。src/componentssrc/lib/components這些是我們在頁面中使用的元件。src/lib src/lib/config/website.js為了方便起見，我們在這裡定義網站的屬性，例如網站標題、聯絡電子郵件地址和社群媒體帳號。一些屬性來自環境變數。有關 SvelteKit 中環境變數的更多信息，請參閱有關 SvelteKit 入門的文章。
src/lib/styles符合您的期望！我們在佈局中使用 SCSS 進行樣式設定和源自託管字體。
src/utilitiessrc/utilities/blog.js該檔案包含一些程式碼，用於幫助我們將部落格文章中的 markdown 轉換為 Svelte。此外，它們還有助於提取 frontmatter 中的欄位（這是我們在部落格文章index.md檔案頂部包含的元資料）。src/routes src/routes/[slug]/+page.js這本質上是部落格文章資料的範本。這些文件之一是在建構時為每篇部落格文章產生的。它用於提取 Svelte 文件中所需的數據，用於生成帖子的 HTML。
src/routes/[slug]/+page.svelte與上一個檔案類似，為每個部落格文章產生其中一個。這次是 SvelteKit 用來為我們的部落格文章產生 HTML 和 JavaScript 的 Svelte 程式碼。
我在《SvelteKit 入門》部落格文章中提到了大多數其他文件，但如果我遺漏了任何需要更多解釋的內容，請告訴我。
請隨意跳入羅德尼實驗室矩陣聊天室。
