跳转到内容

项目结构

你用 create astro CLI 向导所生成的新 Astro 项目中已经包括一些文件和文件夹。其他的将由你创建并添加到 Astro 的现有文件结构中

以下是 Astro 的项目结构,以及一些你将在新项目中发现的文件。

目录和文件

Astro 为你的项目提供了一个有想法的文件夹布局。每个 Astro 项目的根目录下都应该包括以下目录和文件:

  • src/* - 你的项目源代码(组件、页面、样式等)。
  • public/* - 你的非代码、未处理的资源(字体、图标等)。
  • package.json - 项目清单。
  • astro.config.mjs - Astro 配置文件(推荐)。
  • tsconfig.json - TypeScript 配置文件(推荐)。

项目树示例

常见的 Astro 项目目录可能看起来像这样:

  • 目录public/
    • robots.txt
    • favicon.svg
    • social-image.png
  • 目录src/
    • 目录components/
      • Header.astro
      • Button.jsx
    • 目录layouts/
      • PostLayout.astro
    • 目录pages/
      • 目录posts/
        • post1.md
        • post2.md
        • post3.md
      • index.astro
    • 目录styles/
      • global.css
  • astro.config.mjs
  • package.json
  • tsconfig.json

src/

src/ 文件夹是大部分项目源代码所在的地方。这包括:

Astro 处理、压缩和打包你的 src/ 文件以创建最终传递到浏览器的网站。与静态的 public/ 目录不同,你的 src/ 文件是由 Astro 为你构建和处理的。

有些文件(如 Astro 组件)甚至不会按写入方式传递到浏览器,而是被渲染成静态 HTML。其他文件(如 CSS)则会被传递到浏览器,但可能被会压缩或与其他 CSS 文件打包在一起以提高性能。

src/assets

src/assets 目录推荐用于存储由 Astro 处理的资源(例如:图片)。这不是必需的,也不是特殊的保留文件夹。

src/components

组件是你在 HTML 页面中可重复使用的代码单元。它可以是 Astro 组件 或是像 React 或 Vue 这样的UI框架组件。通常将你项目中所有组件都分组放在这个文件夹中。

这是 Astro 项目约定俗成的,但不是必需的。你可以随意组织你的组件!

src/content

src/content/ 目录是被保留用于存储内容集合和可选的集合配置文件。此文件夹中不允许有其他文件。

src/layouts

布局是定义一个或多个页面共享的UI结构的 Astro 组件。

src/components 一样,这个目录也只是约定俗成,但不是必需的。

src/pages

页面是一种用于创建新的页面的特殊组件。一个页面可以是一个 Astro 组件,也可以是表示站点某些页面内容的 Markdown 文件。

src/styles

将 CSS 或 Sass 文件存储在 src/styles 目录中是一种常见的约定,但这不是必需的。只要你的样式位于 src/ 目录中的某个位置并且正确导入,Astro 就会处理和压缩它们。

public/

public/ 目录用于存放在 Astro 构建过程中不需要处理的文件和资源。这些文件将原封不动地复制到构建文件夹中。

这种行为使得 public/ 成为存放图片和字体等普通资源或 robots.txtmanifest.webmanifest 等特殊文件的理想选择。

你也可以把 CSS 和 JavaScript 放在 public/ 目录中,但要注意这些文件不会在最终构建中被打包或压缩。

package.json

JavaScript 包管理器用它来管理依赖关系。它也定义了通常用于运行 Astro 的脚本(例如:npm startnpm run build)。

package.json 中可以指定两种依赖关系dependenciesdevDependencies。在大多数情况下它们效果一样,Astro 在构建时需要所有依赖,而你的包管理器则会同时安装这两种依赖。我们建议把所有的依赖项放在 dependencies 中,只有在你发现有特殊需要后,再使用 devDependencies

如果想要为你的项目创建新的 package.json 文件时遇到困难,请查看手册设置中的说明。

astro.config.mjs

该文件在每个入门模板中都会生成,它包括你的 Astro 项目的配置。你可以在这里指定要使用的集成、构建选项、服务器选项以及其他内容。

参见配置参考了解关于配置的更多细节。

tsconfig.json

该文件在每个入门模板中都会生成,它包括你的 Astro 项目的 TypeScript 配置项。如果没有 tsconfig.json 文件,编辑器将不完全支持某些功能(如 npm 包的导入)。

参见 TypeScript 指南了解关于配置的更多细节。