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 入门》博客文章中提到了大多数其他文件，但如果我遗漏了任何需要更多解释的内容，请告诉我。
请随意跳入罗德尼实验室矩阵聊天室。
