跳转到内容

从 SvelteKit 迁移

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

SvelteKit 和 Astro 的主要相似之处

段落标题 SvelteKit 和 Astro 的主要相似之处

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

SvelteKit 和 Astro 的主要不同之处

段落标题 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

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

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

终端窗口
npm create astro@latest -- --template blog

将现有的 Markdown(或 MDX,使用我们的可选集成)文件作为内容去 创建 Markdown 或 MDX 页面

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

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

More migration guides

Contribute

What’s on your mind?

Create GitHub Issue

Quickest way to alert our team of a problem.

Community