diff options
Diffstat (limited to 'docs/src/pages/zh-CN')
| -rw-r--r-- | docs/src/pages/zh-CN/comparing-astro-vs-other-tools.md | 205 | ||||
| -rw-r--r-- | docs/src/pages/zh-CN/examples.md | 9 | ||||
| -rw-r--r-- | docs/src/pages/zh-CN/getting-started.md | 61 | ||||
| -rw-r--r-- | docs/src/pages/zh-CN/installation.md | 171 | ||||
| -rw-r--r-- | docs/src/pages/zh-CN/quick-start.md | 74 |
5 files changed, 0 insertions, 520 deletions
diff --git a/docs/src/pages/zh-CN/comparing-astro-vs-other-tools.md b/docs/src/pages/zh-CN/comparing-astro-vs-other-tools.md deleted file mode 100644 index 65441ea3e..000000000 --- a/docs/src/pages/zh-CN/comparing-astro-vs-other-tools.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: Astro 对比其他框架 -lang: zh-CN ---- - -我们经常被问到这个问题, "Astro 和我最喜欢的网站构建工具**\_\_\_\_**相比如何？"本指南是为了帮助回答这个问题而编写的，适用于几个流行的网站构建工具以及 Astro 替代品。 - -如果你没有看到你最喜欢的网站构建工具被列在这里。 [请在 Discord 告诉我们](https://astro.build/chat) - -## 项目现状 - -关于项目成熟度的简短说明。**Astro 仍处于测试阶段** 这里列出的许多工具都要比 Astro 成熟得多。有些工具比 Astro 早了 12 年以上。 - -Astro 仍然缺少一些功能，一些 API 还没有最终确定。虽然项目暂时并不稳定，但是已经有几个生产型网站使用 Astro 建立。这是选择 Astro 时需要考虑的一个重要问题。 - -## Docusaurus vs. Astro - -[Docusaurus](https://docusaurus.io/) 是一个流行的文档网站创建工具。Docusaurus 使用 React 来生成你的网站界面，而 Astro 支持 React、 Vue.js 、Svelte 以及原始 HTML 模板。 - -Docusaurus 是为建立文档网站而设计的，它有一些内置的、针对文档的网站功能，而 Astro 却没有。相反，Astro 通过一个官方的 [`docs`](https://github.com/withastro/astro/tree/main/examples/docs) 主题提供了特定的文档功能，你可以在你的网站尝试使用。本网站就是用这个模板建立的! - -#### 对比 Docusaurus 及 Astro 性能 - -在大多数情况下，Astro 网站的加载速度将明显快于 Docusaurus 网站。这是因为 Astro 会自动从页面中剥离不必要的 JavaScript，只对需要它的个别组件进行渲染。这个功能被称为[局部渲染](/core-concepts/component-hydration)。 - -Docusaurus 不支持局部渲染，而是让用户在浏览器中加载并重新渲染整个页面，即使大部分的页面内容是静态的。这为你的网站创造了一个较慢的页面加载和较差的性能。在 Docusaurus 中没有办法停用这种行为。 - -#### 案例研究 : 构建文档网站 - -[Docusaurus. io/docs](https://docusaurus.io/docs) 是官方的 Docusaurus 文档网站，由 Docusaurus 构建。该网站提供了大量设计模板和功能插件，可以与官方 Astro 文档网站进行比较。让我们对这两个网站构建工具进行一个粗略的真实的比较。 - -- **Docusaurus 性能评分**:26 / 100[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocusaurus.io%2Fdocs) -- **Astro 性能分数**:95(满分 100)[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -性能差异背后的一个主要原因是 Astro 的 JavaScript 依赖更小:[docusaurus.io/docs](https://docusaurus.io/docs)在第一次加载时加载**238kb**的 JavaScript，而[docs.astro.build](https://docs.astro.build)第一次只加载**9.3kb**(总体上减少 96%的 JavaScript)。 - -## Eleventy vs. Astro - -[Eleventy](https://www.11ty.dev/)是一个流行的静态网站构建器，由 Node.js 提供支持。 - -Eleventy 使用了几种[较老的 HTML 模板语言](https://www.11ty.dev/docs/languages/)来渲染你的网站:Nunjucks, Liquid, Pug, EJS 等等。Astro 允许您使用您喜欢的 UI 组件库(React、Preact、Vue、Svelte 等)或类似于 HTML/JSX 的内置组件语法创建页面。eleven 不支持在 HTML 模板中使用现代 UI 组件。 - -#### 对比 Eleventy 及 Astro 性能 - -从概念上讲，Eleventy 与 Astro 的 "最小客户端 JavaScript "的网络开发方法是一致的。Eleventy 和 Astro 都提供类似的零 JavaScript 默认性能基线。 - -Eleventy 通过推动你完全避免使用 JavaScript 来实现这一目标。Eleventy 的网站通常很少或根本没有使用 JavaScript。当你确实需要客户端的 JavaScript 时，这就成了一个问题。你可以为 Eleventy 创建自己的资产构建管道。这可能会很耗时，并迫使你自己设置捆绑、最小化和其他复杂的优化。 - -相比之下，Astro 自动为你构建客户端的 JavaScript 和 CSS。Astro 自动从页面中剥离不必要的 JavaScript，只对需要它的个别组件进行渲染。这个功能被称为[局部渲染](/core-concepts/component-hydration)。虽然在 Eleventy 中可以自己实现这个功能，但 Astro 默认提供了内置的功能。 - -## Gatsby vs. Astro - -[Gatsby](https://www.gatsbyjs.com/)是一个流行的 React 的网站和应用程序框架。 - -Gatsby 使用 React 来渲染你的网站。Astro 更灵活：你可以自由地使用任何流行的组件库（React、Preact、Vue、Svelte、Solid 和其他）或 Astro 的类似 HTML 的组件语法来构建 UI，这类似于 HTML+JSX 。 - -今天，Gatsby 和 Astro 都只支持静态网站生成（SSG）。Gatsby 支持增量重建，而 Astro 只支持完整的网站重建。Astro 已经表示计划在未来的版本中支持服务器端渲染（SSR），而 Gatsby 没有计划支持 SSR。 - -Gatsby 需要一个定制的 GraphQL API 来处理所有的网站内容。虽然有些开发者喜欢这种模式，但对 Gatsby 的一个普遍意见是，这种模式随着时间的推移变得过于复杂和难以维护，特别是随着网站的增长。Astro 没有 GraphQL 要求，而是提供熟悉的 API（如`fetch()`和顶层的`await`），以便在需要数据的地方加载数据。 - -#### 对比 Gastby 及 Astro 性能 - -在大多数情况下，Astro 网站的加载速度将明显快于 Gatsby 网站。这是因为 Astro 会自动从页面中剥离不必要的 JavaScript，只对需要它的个别组件进行渲染。这个功能被称为[局部渲染](/core-concepts/component-hydration)。 - -Gatsby 不支持局部渲染，而是让用户在浏览器中加载并重新渲染整个页面，即使大部分页面内容是静态的。这为你的网站创造了更慢的页面加载和更差的性能。Gatsby 有[一个社区插件](https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript/)用于移除页面中的所有 JavaScript 但这将破坏许多网站。这让你在每个页面的互动性上做出一个全有或全无的决定。 - -Gatsby 有一个很好的插件生态系统，根据你的需要，它可以使 Gatsby 成为你的项目的更好选择。[gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/)是一个流行的图像优化插件，这可能使 Gatsby 成为一些图像密集型网站的更好选择。 - -#### 案例研究 : 构建文档网站 - -[gatsbyjs.com/docs](https://www.gatsbyjs.com/docs/quick-start/)是 Gatsby 的官方文档网站，用 Gatsby 构建。该网站提供了足够相似的设计和功能集，可以与 Astro 官方文档网站进行比较。让我们对这两个网站构建工具进行一个粗略的真实的比较。以满足这个常见的使用情况。 - -- **Gatsby 性能评分**: 64 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.gatsbyjs.com%2Fdocs%2Fquick-start%2F) -- **Astro 性能评分**: 99 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -这种性能差异背后的一个重要原因是 Astro 的 JavaScript 有效载荷较小。[gatsbyjs.com/docs](https://www.gatsbyjs.com/docs/quick-start/)在首次加载页面时加载了**417kb**的 JavaScript，而[docs.astro.build](https://docs.astro.build)在首次加载后加载了**78.7kb**（总体上减少了 81%的 JavaScript）。 - -## Hugo vs. Astro - -[Hugo](https://gohugo.io/)是一个流行的静态网站生成器，由 Go 驱动。 - -Hugo 使用一个自定义的[模板语言](https://gohugo.io/templates/introduction/)来渲染你的网站。Astro 让你使用你喜欢的 UI 组件库（React、Preact、Vue、Svelte 等）或类似于 HTML/JSX 的内置组件语法来创建页面。Hugo 不支持使用现代 UI 组件进行 HTML 模板制作。 - -#### 对比 Hugo 及 Astro 性能 - -从概念上讲，Hugo 与 Astro 的 "最小客户端 JavaScript "的网络开发方法是一致的。Hugo 和 Astro 都提供了类似的、默认为零的 JavaScript 性能基线。 - -Hugo 和 Astro 都提供了对构建、捆绑和最小化 JavaScript 的内置支持。Astro 会自动从页面中剥离不必要的 JavaScript，只对需要它的个别组件进行渲染。这个功能被称为[局部渲染](/core-concepts/component-hydration)。虽然在 Hugo 中可以自己实现这个功能，但 Astro 默认提供了内置的功能。 - -## Jekyll vs. Astro - -[Jekyll](https://jekyllrb.com/)是一个流行的静态网站生成器，由 Ruby 驱动。 - -Jekyll 使用一种较早的[模板语言](https://jekyllrb.com/docs/liquid/)来渲染你的网站，称为 Liquid。Astro 让你使用你喜欢的 UI 组件库（React、Preact、Vue、Svelte 和其他）或类似于 HTML/JSX 的内置组件语法来创建页面。Jekyll 不支持使用现代 UI 组件进行 HTML 模板制作。 - -#### 对比 Jekyll 及 Astro 性能 - -在概念上，Jekyll 与 Astro 的 "最小客户端 JavaScript "的网站开发方法是一致的。Jekyll 和 Astro 都提供了类似的、默认为零 JavaScript 的性能基线。 - -Jekyll 通过推动你完全避免使用 JavaScript 来实现这一目标。Jekyll 的网站通常很少甚至没有使用 JavaScript，而是采用服务器端的 HTML 渲染。当你确实需要客户端的 JavaScript 时，这就成了一个问题。这取决于你是否为 Jekyll 创建自己的构建管道。这可能很耗时，并迫使你自己设置捆绑、最小化和其他优化。 - -相比之下，Astro 自动为你构建客户端的 JavaScript。Astro 只向浏览器发送最低限度的 JavaScript，并对其进行粉碎、捆绑和优化。虽然在 Jekyll 中可以自己实现这一点，但在 Astro 中，这一点是默认内置的。 - -## SvelteKit vs. Astro - -[SvelteKit](https://kit.svelte.dev/)是 Svelte 的一个流行的网站和应用程序框架。 - -SvelteKit 使用 Svelte 来渲染你的网站。Astro 更加灵活：你可以使用任何 UI 组件库（React、Preact、Vue、Svelte 和其他）或 Astro 的内置组件语法，这与 HTML/JSX 类似。 - -SvelteKit 和 Astro 都是构建网站的框架。SvelteKit 对高度动态的网站（如仪表盘和收件箱）效果最好，而 Astro 对高度静态的网站（如内容和电子商务网站）效果最好。 - -SvelteKit 同时支持静态网站生成（SSG）和服务器端渲染（SSR）。如今，Astro 只支持静态网站生成（SSG）。 - -#### 对比 SvelteKit 及 Astro 性能 - -在大多数情况下，Astro 网站的加载速度会比 SvelteKit 网站快。这是因为 Astro 会自动从页面中剥离不必要的 JavaScript，只对需要它的个别组件进行渲染。这个功能被称为[局部渲染](/core-concepts/component-hydration)。 - -SvelteKit 不支持局部渲染，而是让用户在浏览器中加载并重新渲染整个页面，即使大部分页面内容是静态的。这给你的网站带来了更慢的页面加载和更差的性能。SvelteKit 确实提供了对[页面级静态、零 JavaScript 页面](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate)的支持。然而，没有计划对页面上的单个组件进行渲染支持。这使得你在每个页面的交互性方面只能做一个全有或全无的决定。 - -#### 案例研究 : 构建文档网站 - -[kit.svelte.dev](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate)是 SvelteKit 的官方文档网站，用 SvelteKit 构建。该网站提供了大量设计模板和功能插件，可以与官方 Astro 文档网站进行比较。让我们对这两个网站构建工具进行一个粗略的真实的比较。以满足这个常见的使用情况。 - -测试的两个网站之间有一个明显的区别。SvelteKit 的文档是作为一个单一的页面提供的，而 Astro 的文档被分成多个页面。这种较大的内容有效载荷应该会对性能产生轻微的负面影响，这与工具本身无关。 - -- **SvelteKit 性能得分**。92 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fkit.svelte.dev%2Fdocs) -- **Astro 性能得分**。95 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -在这项测试中，SvelteKit 的表现与 Astro 相当。 - -## Next.js vs. Astro - -[Next.js](https://nextjs.org/)是 React 的一个流行的网站和应用程序框架。 - -Next.js 使用 React 来渲染你的网站。Astro 更灵活：你可以使用任何 UI 组件库（React、Preact、Vue、Svelte 等）或 Astro 的内置组件语法，这与 HTML/JSX 类似。 - -Next.js 和 Astro 都是构建网站的框架。Next.js 对高度动态的网站（如仪表盘和收件箱）效果最好，而 Astro 对高度静态的网站（如内容和电商网站）效果最好。 - -Next.js 同时支持静态网站生成（SSG）和服务器端渲染（SSR）。如今，Astro 只支持静态网站生成（SSG）。 - -#### 对比 Next.js 及 Astro 性能 - -在大多数情况下，Astro 网站的加载速度将明显高于 Next.js 网站。这是因为 Astro 会自动从页面中剥离不必要的 JavaScript，只对需要它的个别组件进行渲染。这个功能被称为[局部渲染](/core-concepts/component-hydration)。 - -Next.js 不支持局部渲染，而是让用户在浏览器中加载并重新渲染整个页面，即使页面的大部分内容是静态的。这给你的网站带来了较慢的页面加载和较差的性能。Next.js 对完全静态的零 JavaScript 页面有[实验性支持](https://piccalil.li/blog/new-year-new-website/#heading-no-client-side-react-code)。然而，目前还没有计划支持对页面上的单个组件进行渲染。这让你在每个页面的交互性上都要做出全有或全无的决定。 - -Next.js 有很好的内置图像优化功能，这可以使 Next.js 成为一些图像密集型网站的更好选择。 - -#### 案例研究 : 构建文档网站 - -[nextjs.org/docs](https://nextjs.org/docs/getting-started)是 Next.js 官方文档网站，用 Next.js 构建。该网站提供了足够相似的设计和功能集，可以与官方的 Astro 文档网站进行比较。这为我们提供了一个**_的、真实的、_**的两个静态网站构建工具在这个常见的使用情况下的比较。 - -- **Next.js 的性能得分**。59 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnextjs.org%2Fdocs%2Fgetting-started) -- **Astro 性能得分**。95 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -这种性能差异背后的一个重要原因是 Astro 的 JavaScript 有效载荷较小。[nextjs.org/docs](https://nextjs.org/docs/getting-started)在首次加载时加载了**463kb**的 JavaScript，而[docs.astro.build](https://docs.astro.build)只加载了**9.3kb**（总体而言，JavaScript 减少了 98%）。 - -## Nuxt vs. Astro - -[Nuxt](https://nextjs.org/)是 Vue 的一个流行的网站和应用程序框架。它类似于 Next.js。 - -Nuxt 使用 Vue 来渲染你的网站。Astro 更灵活：你可以使用任何 UI 组件库（React、Preact、Vue、Svelte 和其他）或 Astro 的内置组件语法，这与 HTML/JSX 类似。 - -Nuxt 和 Astro 都是构建网站的框架。Nuxt 最适合高度动态的网站（如仪表盘和收件箱），而 Astro 最适合高度静态的网站（如内容和电商网站）。 - -Nuxt 同时支持静态网站生成（SSG）和服务器端渲染（SSR）。今天，Astro 只支持静态网站生成（SSG）。 - -#### 对比 Nuxt 及 Astro 性能 - -在大多数情况下，Astro 网站的加载速度将明显快于 Nuxt 网站。这是因为 Astro 会自动从页面中剥离不必要的 JavaScript，只对需要它的个别组件进行渲染。这个功能被称为[局部渲染](/core-concepts/component-hydration)。 - -Nuxt 不支持局部渲染，而是让用户在浏览器中加载并重新渲染整个页面，即使大部分的页面内容是静态的。这给你的网站带来了较慢的页面加载和较差的性能。在 Nuxt 中没有办法禁用这种行为。 - -Nuxt 有很好的内置图片优化功能，这可以使 Nuxt 成为一些图片密集型网站的更好选择。 - -#### 案例研究 : 构建文档网站 - -[nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation)是 Nuxt 官方文档网站，用 Nuxt 构建。该网站提供了大量设计模板和功能插件，可以与官方 Astro 文档网站进行比较。让我们对这两个网站构建工具进行一个粗略的真实的比较。 - -- **新的性能得分**。48 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnuxtjs.org%2Fdocs%2F2.x%2Fget-started%2Finstallation) -- **Astro 性能得分**。95 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -这种性能差异背后的一个重要原因是 Astro 的 JavaScript 有效载荷较小。[nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation)在首次加载时加载了**469kb**的 JavaScript，而[docs.astro.build](https://docs.astro.build)只加载了**9.3kb**（总体而言，JavaScript 减少了 98%）。 - -## VuePress vs. Astro - -[VuePress](https://vuepress.vuejs.org/guide/)是一个流行的文档网站建设者。VuePress 使用 Vue.js 来生成你的网站用户界面，而 Astro 支持 React、Vue.js、Svelte 和原始 HTML 模板化。 - -VuePress 是为建立文档网站而设计的，它有一些内置的、针对文档的网站功能，而 Astro 没有。相反，Astro 通过官方的[`docs`](https://github.com/withastro/astro/tree/main/examples/docs)主题提供了特定的文档功能，你可以在你的网站使用。这个网站就是用这个模板建立的! - -#### 对比 VuePress 及 Astro 性能 - -在大多数情况下，Astro 网站的加载速度将明显快于 VuePress 网站。这是因为 Astro 会自动从页面中剥离不必要的 JavaScript，只对需要它的个别组件进行渲染。这个功能被称为[局部渲染](/core-concepts/component-hydration)。 - -VuePress 不支持局部渲染，而是让用户在浏览器中加载并重新渲染整个页面，即使页面的大部分内容是静态的。这将使你的网站的页面加载速度变慢，性能变差。在 VuePress 中没有办法禁用这种行为。 - -#### 案例研究 : 构建文档网站 - -[vuepress.vuejs.org](https://vuepress.vuejs.org/guide/)是 VuePress 的官方文档网站，用 VuePress 构建。该网站提供了大量设计模板和功能插件，可以与官方 Astro 文档网站进行比较。让我们对这两个网站构建工具进行一个粗略的真实的比较。 - -- **Vuepress 的性能得分**。63 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fvuepress.vuejs.org%2Fguide%2F) -- **Astro 性能得分**。95 分（满分 100 分）[(更多详情)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -这种性能差异背后的一个重要原因是 Astro 的 JavaScript 有效载荷较小。[vuepress.vuejs.org](https://vuepress.vuejs.org/guide/)在首次加载时加载了**166kb**的 JavaScript，而[docs.astro.build](https://docs.astro.build)只加载了**9.3kb**（总体来说，JavaScript 少了 95%）。 diff --git a/docs/src/pages/zh-CN/examples.md b/docs/src/pages/zh-CN/examples.md deleted file mode 100644 index b9a39b4ba..000000000 --- a/docs/src/pages/zh-CN/examples.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: 模板样例 -lang: zh-CN ---- - -如果你喜欢通过实例来学习，请查看我们在 GitHub 上的[模板样例](https://github.com/withastro/astro/tree/main/examples) - -<!-- Once we merge astro-docs back into the main repo, we can actually fetch the list of examples at build-time by scanning the examples/ directory! --> diff --git a/docs/src/pages/zh-CN/getting-started.md b/docs/src/pages/zh-CN/getting-started.md deleted file mode 100644 index 07f00ea1a..000000000 --- a/docs/src/pages/zh-CN/getting-started.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: 入门指南 -lang: zh-CN ---- - -Astro 是一个现代的静态网站生成工具. 你可以从 [我们的主页](https://astro.build/) 或者 [我们的 release 公告](https://astro.build/blog/introducing-astro) 中了解到 Astro 的全部内容,本页是 Astro 文档和所有相关资源的概述。 - -## 尝试一下 Astro - -尝试 Astro 的最简单的方法是在新目录下运行 `npm init astro`。我们的 CLI 工具会帮助你创建启动一个新的 Astro 项目。 - -想要快速了解学习使用 Astro， [快速入门](quick-start). - -另外，请阅读我们的 [安装指南](/installation)，了解如何使用 Astro 进行安装的全部步骤。 - -### 在线游乐场 - -如果你有兴趣在浏览器中尝试 Astro，你可以使用一个在线代码游乐场。试试我们在 [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3) 上的 "Hello World！"模板。 - -注意：一些功能（例如：快速刷新）目前在 CodeSandbox 上是受限的。 - -## 学习 Astro - -各种各样的人来自不同的背景，带来了不同的学习方式，来到 Astro。无论你喜欢的是理论性强的方法还是实践性强的方法，我们希望你会发现本节内容对你有帮助。 - -- 如果你喜欢在**实践中**学习，请从我们的 [实例库](https://github.com/withastro/astro/tree/main/examples) 开始学习。 - -- 如果你喜欢**逐步学习概念**，请从我们的[基本概念和指南](/core-concepts/project-structure)开始。 - -像任何不熟悉的技术一样，Astro 也有一个轻量化的学习曲线。然而我们相信只要有耐心勤于练习你很快就会掌握诀窍的。 - -### 学习 `.astro` 语法 - -当你开始学习 Astro 时，你会看到许多文件使用`.astro`文件扩展名。这是**Astro 的组件语法**：一种特殊的类似 HTML 的文件格式，Astro 用于模板制作。这样设计是为了让任何有 HTML 或 JSX 经验的人更容易上手。 - -我们在 [Astro 组件](/corecepts/astro-components) 上的有用指南向你介绍了 Astro 语法，这也是学习的最好方法。 - -### API 参考文档 - -当你想了解某个特定的 Astro API 的更多细节时，这部分文档是有用的。例如 [配置参考](/reference/configuration-reference) 列出所有可能的配置选项供你使用。 [内置组件参考](/reference/builtin-components) 列出了所有可用的核心组件，如`<Markdown />`和`<Code />`。 - -### 其他版本文档 - -本文档总是展示 Astro 的最新稳定版本。一旦我们达到 V1.0 的里程碑，我们将增加查看版本文件的能力。 - -## 了解最新消息 - -[@astrodotbuild](https://twitter.com/astrodotbuild) Twitter 账户是 Astro 团队的官方更新来源。 - -我们也在我们的 [Discord 社区](https://astro.build/chat) 的 #announcements 频道中发布 release 公告。 - -当然并非每个 Astro 的发布都会有自己的 release 公告，你可以在 Astro 仓库的 [`CHANGELOG.md`文件](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) 中找到每个版本的详细更新日志。 - -## 勘误与建议 - -如果你在阅读的过程中发现文档中缺少什么，或者你发现某些部分令人困惑，请 [为文档提交问题](https://github.com/withastro/astro/issues/new/choose) ，提出你的改进建议，或者在 [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter 账户上发推文。我们希望听到你的建议! - -## 参考 - -本入门指南最初是基于 [React](https://reactjs.org/) 的入门指南。 diff --git a/docs/src/pages/zh-CN/installation.md b/docs/src/pages/zh-CN/installation.md deleted file mode 100644 index f8a912fe3..000000000 --- a/docs/src/pages/zh-CN/installation.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: 安装指南 -lang: zh-CN ---- - -可以使用多种方式创建 Astro 新项目 - -## 环境要求 - -- **Node.js** - `v14.15.0` 和 `v16.0.0`，或更高版本。 -- **文本编辑器** - 我们推荐使用 [VS Code](https://code.visualstudio.com/) 搭配 [Astro 官方插件](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)。 -- **命令行终端** - Astro 主要是通过终端的命令行执行。 - -下方案例中使用 [`npm`](https://www.npmjs.com/) 为例。也可以使用 [`yarn`](https://yarnpkg.com/) 或 [`pnpm`](https://pnpm.io/) 等 npm 替代方案。 - -## 创建 Astro 工程 - -`npm init astro` 是在一个新项目中安装 Astro 的最简单的方法。 - -在终端运行这个命令，启动我们的 `create-astro` 安装工具，协助你建立一个新项目。 - -```shell -# 用 NPM -npm init astro - -# Yarn -yarn create astro -``` - -[`create-astro`](https://github.com/withastro/astro/tree/main/packages/create-astro) 工具让你从预设的 [启动模板](/examples) 中选择，或者你也可以直接从 Github 导入自己的 Astro 项目。 - -```bash -# 提醒：把「my-astro-project」改为项目的名称。 - -# npm 6.x -npm init astro my-astro-project --template starter -# npm 7+（一定要多加上一组双横杠） -npm init astro my-astro-project -- --template starter -# yarn -yarn create astro my-astro-project --template starter -# 使用第三方模板 -npm init astro my-astro-project -- --template [GITHUB_USER]/[REPO_NAME] -# 在 Repo 里，使用第三方模板 -npm init astro my-astro-project -- --template [GITHUB_USER]/[REPO_NAME]/path/to/template -``` - -在 `create-astro` 搭建好你的项目后，记得用 npm 或你选择的软件包管理器安装你的项目依赖。在这个例子中，我们将使用 npm 。 - -```bash -npm install -``` - -你现在可以[开发](#start-astro)你的 Astro 项目。一旦你完成了 Astro 项目的开发，你就可以[构建](#build-astro)你的项目。然后 Astro 会把你的应用程序打包，并准备好静态文件，让你[部署](/guides/deploy)到你最喜欢的托管服务商。 - -## 手动安装 - -当然没有 `create-astro` 工具的协助，也可以创建 Astro 工程。 接下来就是要让 Astro 运行起来的一些额外步骤。 - -### 创建项目 - -```bash -# 创建并进入新项目目录 -mkdir my-astro-project -cd my-astro-project -``` - -### 创建 `package.json` - -```bash -# 初始化项目并生成的默认的 package.json -npm init --yes -``` - -Astro 被设计为与整个 npm 软件包生态系统一起工作。这是由项目根目录下的 `package.json` 管理的。 - -如果你不熟悉 `package.json` 文件，我们强烈建议你在[npm 文档](https://docs.npmjs.com/creating-a-package-json-file)上快速阅读它。 - -### 安裝 Astro - -按照上面的说明，你的工程目录下会新建一个 `package.json` 文件。 - -现在你可以在你的项目中安装 Astro - -```bash -npm install astro -``` - -现在你可以把 `package.json` 文件中默认为你创建的 `scripts` 部分替换为以下内容。 - -```diff - "scripts": { -- "test": "echo \"Error: no test specified\" && exit 1" -+ "dev": "astro dev", -+ "build": "astro build", -+ "preview": "astro preview" - }, -} -``` - -[`dev`](#start-dev) 命令在 `http://localhost:3000` 上启动 Astro 开发服务器。一旦你的项目准备好了。 - -[`build`](#build-astro)命令将你的项目输出到 `dist/` 目录。[在部署指南中阅读更多关于部署 Astro 的内容。](/guides/deploy) - -### 创建第一个页面 - -打开文本编辑器，在项目添加文件 ： - -1. 新建 `src/pages/index.astro` 文件 -2. 在文件中复制粘贴以下代码片段（包含横杠 "---" ） - -```astro ---- -// 在 (`---`) 范围之内的 JS 或 TS 代码只在服务器上运行! -console.log('See me in the Terminal') ---- - -<html> - <body> - <h1>Hello, World!</h1> - </body> -</html> - -<style lang='css||scss'> - body{ - h1{ - color:orange; - } - } -</style> - -<script> - // 在在此输入的JS代码完全在浏览器上运行。 - console.log('See me in the devTools') -</script> -``` - -以上是 Astro 组件语法的一个例子，同時包含 HTML 和 JSX。 - -你可以在 `src/pages` 目录下创建更多的页面，Astro 将使用该文件名在你的网站上创建新的页面。例如，通过在 `src/pages/about.astro` 创建一个新的文件（重复使用以前的片段），Astro 将生成一个新的页面，URL 为：`http://localhost/about` 。 - -## [启动 Astro](#start-astro) - -```bash -npm run dev -``` - -Astro 会开启预览服务器，地址为 [http://localhost:3000](http://localhost:3000)， -在浏览器打开这个网址，就会看到 Astro 的 HelloWorld 页面 - -服务器会实时监听 'src/' 目录下的文件改动，所以在开发过程的支持热更新，修改程序后，无需重启。 - -## [Build Astro](#build-astro) - -```bash -npm run build -``` - -这将让 Astro 打包你的网站并直接保存到磁盘。你的应用程序现在已经在 `dist/` 目录中打包好了。 - -## 下一步 - -成功了！现在即可开始开发！ - -我们建议花点时间用于熟悉 Astro 的运作方式。只要在文档中进一步探索，建议看看这些： - -📚 深入了解 Astro 的项目结构：[项目结构](/core-concepts/project-structure) - -📚 深入了解 Astro 的组件语法：[Astro 组件指南](/core-concepts/astro-components) - -📚 深入了解 Astro 根据文件路径生成路由：[路由指南](core-concepts/astro-pages) diff --git a/docs/src/pages/zh-CN/quick-start.md b/docs/src/pages/zh-CN/quick-start.md deleted file mode 100644 index bedd596cf..000000000 --- a/docs/src/pages/zh-CN/quick-start.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: 快速入门 -lang: zh-CN ---- - -```shell -# 环境要求：确保 Node.js 版本是 14.15.0+ 或 16 及以上。 -node --version - -# 创建并进入新项目目录 -mkdir my-astro-project && cd $_ - -# 初始化项目 -npm init astro - -# 安装项目依赖 -npm install - -# 启动项目 -npm run dev -``` - -```shell -# 将项目打包到 dist 文件夹下 -npm run build -``` - -如果想要知道还有哪些方法能够使用 Astro 来做开发，请阅读 [安装指南](installation)。 - -## 启动项目 - -工程目录下终端输入以下命令： - -```bash -npm run dev -``` - -Astro 会开启预览服务器，地址为 [http://localhost:3000](http://localhost:3000)， -在浏览器打开这个网址，就会看到 Astro 的 HelloWorld 页面 - -服务器会实时监听 'src/' 目录下的文件改动，所以在开发过程的支持热更新，修改程序后，无需重启。 - -## 打包项目 - -工程目录下终端输入以下命令： - -```bash -npm run build -``` - -这将让 Astro 打包你的网站并直接保存到磁盘。你的应用程序现在已经在`dist/`目录中打包好了。 - -## 部署项目 - -Astro 生成的网站是静态的可以发布常见的托管服务商： - -- [Vercel](https://vercel.com/) -- [Netlify](https://www.netlify.com/) -- [S3 bucket](https://aws.amazon.com/s3/) -- [Google Firebase](https://firebase.google.com/) -- 查看 [部署指南](/guides/deploy) 了解更多细节 - -## 下一步 - -成功了！现在即可开始开发！ - -我们建议花点时间用于熟悉 Astro 的运作方式。只要在文档中进一步探索，建议看看这些： - -📚 深入了解 Astro 的项目结构：[项目结构](/core-concepts/project-structure) - -📚 深入了解 Astro 的组件语法：[Astro 组件指南](/core-concepts/astro-components) - -📚 深入了解 Astro 根据文件路径生成路由：[路由指南](core-concepts/astro-pages) |