从 Eleventy 迁移
Eleventy 是一个开源的静态站点生成器,可与多种模板语言配合使用。
Eleventy (11ty) 和 Astro 之间的主要相似之处
标题为“Eleventy (11ty) 和 Astro 之间的主要相似之处”的部分Eleventy (11ty) 和 Astro 有一些相似之处,这将有助于你迁移项目
-
Astro 和 Eleventy 都是现代的、基于 JavaScript 的(Jamstack)网站构建工具。
-
Astro 和 Eleventy 都允许你使用无头 CMS、API 或 Markdown 文件作为数据。你可以继续使用你喜欢的内容创作系统,并且能够保留你现有的内容。
Eleventy (11ty) 和 Astro 之间的主要区别
标题为“Eleventy (11ty) 和 Astro 之间的主要区别”的部分当你在 Astro 中重建你的 Eleventy (11ty) 网站时,你会注意到一些重要的区别
-
Eleventy 支持多种模板语言。Astro 支持引入来自多个流行 JS 框架(例如 React、Svelte、Vue、Solid)的组件,但大部分页面模板使用 Astro 布局、页面和组件。
-
Astro 使用
src/
目录存放所有文件,包括站点元数据,这些文件在站点构建期间可用于查询和处理。其中还有一个特殊的src/pages/
文件夹用于基于文件的路由。 -
Astro 使用
public/
文件夹来存放静态资源,这些资源在构建过程中不需要被处理或转换。 -
在 Eleventy 中,CSS、JavaScript 和其他资源的打包需要手动配置。Astro 为你提供了开箱即用的处理方式。
从 Eleventy 切换到 Astro
标题为“从 Eleventy 切换到 Astro”的部分要将 Eleventy 博客转换为 Astro,可以从我们的博客主题入门模板开始,或在我们的主题展示中探索更多社区博客主题。
你可以向 create astro
命令传递一个 --template
参数,以使用我们的官方入门模板之一来启动一个新的 Astro 项目。或者,你可以从 GitHub 上任何现有的 Astro 仓库开始一个新项目。
npm create astro@latest -- --template blog
pnpm create astro@latest --template blog
yarn create astro --template blog
将你现有的 Markdown(或 MDX,通过我们的可选集成)文件作为内容,以创建 Markdown 或 MDX 页面。
你的 Eleventy 项目允许你使用多种模板语言来构建你的网站。在 Astro 项目中,你的页面模板将主要通过 Astro 组件来实现,这些组件可以用作 UI 元素、布局甚至是完整的页面。你可能想要探索 Astro 的组件语法,以了解如何使用组件在 Astro 中进行模板化。
要转换其他类型的网站,如作品集或文档网站,请在 astro.new 上查看更多官方入门模板。你会找到每个项目的 GitHub 仓库链接,以及在 IDX、StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中一键打开工作项目的链接。
社区资源
标题为“社区资源”的部分如果你发现(或制作了!)一个关于将 Eleventy 网站转换为 Astro 的有用视频或博客文章,请将其添加到此列表中!