从 SvelteKit 迁移
SvelteKit 是一个基于 Svelte 构建 Web 应用程序的框架。
SvelteKit 和 Astro 的主要相似之处
段落标题 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 的主要不同之处当你将 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 的存储库中开始一个新项目。
将现有的 Markdown(或 MDX,使用我们的可选集成)文件作为内容去 创建 Markdown 或 MDX 页面。
Astro 中的文件路由和布局组件是相似的,你可能会希望阅读有关 Astro 项目结构 的内容,以了解文件应该放在哪里。
当去转换其他类型的网站,例如作品集或文档网站,可以在 astro.new 上找到更多官方的起始模板。你将会找到每个项目的 GitHub 存储库的链接,以及在 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中打开一个工作项目的一键链接。
社区资源
段落标题 社区资源-
添加你自己的!