跳转到内容

配置概览

Astro 是一个灵活的、无主见的框架，允许你以多种不同的方式配置你的项目。这意味着开始一个新项目可能会让人感到不知所措：没有“一种最佳方式”来设置你的 Astro 项目！

本“配置”部分中的指南将帮助你熟悉用于配置和自定义项目以及开发环境各个方面的各种文件。

如果这是你的第一个 Astro 项目，或者你已经有一段时间没有建立新项目了，请使用文档中的以下指南和参考资料以获得帮助。

Astro 配置文件

名为“Astro 配置文件”的章节

Astro 配置文件是一个包含在每个入门项目根目录下的 JavaScript 文件

astro.config.mjs
import { defineConfig } from "astro/config";


export default defineConfig({
  // your configuration options here...
});

只有在需要配置时才需要它，但大多数项目都会使用此文件。 defineConfig() 辅助函数在你的 IDE 中提供自动的智能提示，你可以在其中添加所有配置选项，以告诉 Astro 如何构建和渲染你的项目为 HTML。

我们建议在大多数情况下使用默认的文件格式 .mjs，或者如果你想在配置文件中编写 TypeScript，则使用 .ts。但是，也支持 astro.config.js 和 astro.config.cjs。

阅读 Astro 的配置参考，以全面了解所有支持的配置选项。

TypeScript 配置文件

名为“TypeScript 配置文件”的章节

每个 Astro 入门项目都在你的项目中包含一个 tsconfig.json 文件。Astro 的组件脚本是 TypeScript，它提供了 Astro 的编辑器工具，并允许你选择性地向 JavaScript 添加语法，以对你自己的项目代码进行类型检查。

使用 tsconfig.json 文件来配置将对你的代码执行类型检查的 TypeScript 模板、配置 TypeScript 插件、设置导入别名等。

阅读 Astro 的 TypeScript 指南，以全面了解 TypeScript 选项和 Astro 的内置实用程序类型。

开发体验

名为“开发体验”的章节

在开发模式下工作时，你可以利用代码编辑器和其他工具来改善 Astro 的开发体验。

Astro 提供了自己的官方 VS Code 扩展，并与其他几种流行的编辑器工具兼容。Astro 还提供了一个可自定义的工具栏，在开发服务器运行时显示在浏览器预览中。你可以安装甚至构建自己的工具栏应用以获得附加功能。

阅读 Astro 的 编辑器设置选项 和 使用开发工具栏 指南，了解如何自定义你的开发体验。

常见的新项目任务

名为“常见的新项目任务”的章节

以下是你可能会选择对一个新的 Astro 项目采取的一些初步步骤。

添加你的部署域名

名为“添加你的部署域名”的章节

为了生成站点地图和创建规范 URL，请在 site 选项中配置你的部署 URL。如果你部署到某个路径（例如 www.example.com/docs），你还可以为项目根目录配置一个 base。

此外，不同的部署主机对于 URL 末尾的斜杠可能有不同的行为。（例如 example.com/about 与 example.com/about/）。一旦你的网站部署完成，你可能需要配置你的 trailingSlash 偏好。

astro.config.mjs
import { defineConfig } from "astro/config";


export default defineConfig({
  site: "https://www.example.com",
  base: "/docs",
  trailingSlash: "always",
});

添加站点元数据

名为“添加站点元数据”的章节

Astro 不使用其配置文件来处理常见的 SEO 或元数据，而只用于构建项目代码并将其渲染为 HTML 所需的信息。

相反，这些信息是使用标准的 HTML <link> 和 <meta> 标签添加到页面的 <head> 中的，就像你在编写普通的 HTML 页面一样。

Astro 站点的一个常见模式是创建一个 <Head /> .astro 组件，该组件可以被添加到一个通用的布局组件中，以便应用于你的所有页面。

src/components/MainLayout.astro
---
import Head from "./Head.astro";


const { ...props } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <Head />
    <!-- Additional head elements -->
  </head>
  <body>
    <!-- Page content goes here -->
  </body>
</html>

因为 Head.astro 只是一个常规的 Astro 组件，你可以导入文件并接收从其他组件传递的 props，例如特定的页面标题。

src/components/Head.astro
---
import Favicon from "../assets/Favicon.astro";
import SomeOtherTags from "./SomeOtherTags.astro";


const { title = "My Astro Website", ...props } = Astro.props;
---
<link rel="sitemap" href="/sitemap-index.xml">
<title>{title}</title>
<meta name="description" content="Welcome to my new Astro site!">


<!-- Web analytics -->
<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>


<!-- Open Graph tags -->
<meta property="og:title" content="My New Astro Website" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="Welcome to my new Astro site!" />
<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
<meta property="og:image:alt" content="">


<SomeOtherTags />


<Favicon />
贡献 社区 赞助