Question

SvelteKit 是一个基于 Svelte 构建 Web 应用程序的框架。

SvelteKit 和 Astro 的主要相似之处

SvelteKit 和 Astro 有一些相似之处，可以帮助你迁移你的项目：

• SvelteKit 和 Astro 都是现代 JavaScript 静态站点生成器和服务器端渲染框架。

• SvelteKit 和 Astro 都存在一个 src/ 文件目录在你的项目文件 以及一个 基于文件路由的特定文件目录。为你的网站创建和管理页面应该会感觉很熟悉。

• Astro 有一个使用 Svelte 组件的官方集成，并支持安装NPM包，包括一些用于 Svelte 的包。你将能够编写 Svelte UI 组件，并且可能做到保留部分或全部现有的组件和依赖项。

• Astro 和 SvelteKit 都允许你使用 无头（headless） CMS、API 或 Markdown 文件进行数据获取。你可以继续使用你喜欢的 创作内容 系统，并且能够保留你现有的内容。

SvelteKit 和 Astro 的主要不同之处

当你将 SvelteKit 网站重构为 Astro 时，你会注意到一些重要的不同之处：

• Astro 网站是多页面应用程序，而 SvelteKit 默认为支持服务器端渲染的 SPA（单页面应用程序），但也可以创建 MPA、传统 SPA，或者你可以在应用程序中混合使用这些技术。

• 组件：SvelteKit 使用 Svelte。Astro 页面使用 .astro 组件 构建，但也可以支持 React、Preact、Vue.js、Svelte、SolidJS、AlpineJS、Lit 和原始 HTML 模板。

• 内容驱动：Astro 旨在展示你的内容，并允许你仅在需要时选择加入交互性。现有的 SvelteKit 应用程序可能是为客户端的高交互性而构建的。Astro 内置有能够处理内容的功能，例如页面生成，但是一些使用 .astro 组件难以复制、更具挑战性的功能，可能需要高级 Astro 技术来处理，例如仪表盘。

• Markdown 支持就绪：Astro 包含内置的 Markdown 支持，并且包含用于每个文件的页面模板的一个 特殊的前置 YAML layout 属性。如果你正在将 SvelteKit 的基于 Markdown 的博客转换为 Astro，你将不需要安装单独的 Markdown 集成，并且你不需要通过配置文件设置布局。你可以将现有的 Markdown 文件带入，但是你可能需要重新整理下这些文件，因为 Astro 的基于文件的路由不需要为每个页面路由创建一个文件夹。

从 SvelteKit 切换到 Astro

要将 SvelteKit 博客转换为 Astro，请从我们的博客主题起始模板开始，或者在我们的主题展示中探索更多社区博客主题。

你可以将 --template 参数传递给 create astro 命令，以便使用其中一个模板开始一个新的 Astro 项目。或者，你可以从 GitHub 上的任何现有的 Astro 的存储库中开始一个新项目。

• npm
• pnpm
• Yarn

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

将现有的 Markdown（或 MDX，使用我们的可选集成）文件作为内容去 创建 Markdown 或 MDX 页面。

Astro 中的文件路由和布局组件是相似的，你可能会希望阅读有关 Astro 项目结构 的内容，以了解文件应该放在哪里。

当去转换其他类型的网站，例如作品集或文档网站，可以在 astro.new 上找到更多官方的起始模板。你将会找到每个项目的 GitHub 存储库的链接，以及在 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中打开一个工作项目的一键链接。

社区资源

• 博客文章：从 SvelteKit 到 Astro 重写我的博客

• 添加你自己的！

更多迁移指南

• 

  Gatsby

• 

  Next.js

• 

  NuxtJS

• 

  Create React App

• 

  Docusaurus

• 

  Eleventy

• 

  GitBook

• 

  Gridsome

• 

  Hugo

• 

  Jekyll

• 

  Pelican

• 

  SvelteKit

• 

  VuePress

• 

  WordPress

Recipes