配置概述
Astro 是一个灵活、不有态度的框架，允许你以多种不同的方式配置你的项目。这意味着开始一个新项目可能会让人感到不知所措：没有 “一种最佳方式” 来设置你的 Astro 项目！
¥Astro is a flexible, unopinionated framework that allows you to configure your project in many different ways. This means that getting started with a new project might feel overwhelming: there is no “one best way” to set up your Astro project!
本 “配置” 部分中的指南将帮助你熟悉允许你配置和自定义项目和开发环境方面的各种文件。
¥The guides in this “Configuration” section will help you familiarize yourself with the various files that allow you to configure and customize aspects of your project and development environment.
如果这是你的第一个 Astro 项目，或者你已经有一段时间没有设置新项目了，请使用以下指南和文档中的参考资料寻求帮助。
¥If this is your first Astro project, or if it’s been a while since you’ve set up a new project, use the following guides and reference in the documentation for assistance.
Astro 配置文件
标题部分 Astro 配置文件¥The Astro config File
Astro 配置文件 是包含在每个启动项目根目录中的 JavaScript 文件：
¥The Astro config file is a JavaScript file included at the root of every starter project:
import { defineConfig } from 'astro/config'
export default defineConfig({ // your configuration options here...})只有在你需要配置某些内容时才需要它，但大多数项目都会使用此文件。defineConfig() 助手在你的 IDE 中提供自动 IntelliSense，你可以在其中添加所有配置选项以告诉 Astro 如何构建和渲染你的项目为 HTML。
¥It is only required if you have something to configure, but most projects will use this file. The defineConfig() helper provides automatic IntelliSense in your IDE and is where you will add all your configuration options to tell Astro how to build and render your project to HTML.
我们建议在大多数情况下使用默认文件格式 .mjs，或者如果你想在配置文件中编写 TypeScript，则使用 .ts。但是，astro.config.js 和 astro.config.cjs 也受支持。
¥We recommend using the default file format .mjs in most cases, or .ts if you want to write TypeScript in your config file. However, astro.config.js and astro.config.cjs are also supported.
TypeScript 配置文件
标题部分 TypeScript 配置文件¥The TypeScript config File
每个 Astro 入门项目都在你的项目中包含一个 tsconfig.json 文件。Astro 的 组件脚本 是 Typescript，它提供了 Astro 的编辑器工具，并允许你选择性地将语法添加到 JavaScript 中，以便对自己的项目代码进行类型检查。
¥Every Astro starter project includes a tsconfig.json file in your project. Astro’s component script is Typescript, which provides Astro’s editor tooling and allows you to optionally add syntax to your JavaScript for type checking of your own project code.
使用 tsconfig.json 文件配置 TypeScript 模板，该模板将对你的代码执行类型检查、配置 TypeScript 插件、设置导入别名等。
¥Use the tsconfig.json file to configure the TypeScript template that will perform type checks on your code, configure TypeScript plugins, set import aliases, and more.
开发体验
标题部分 开发体验¥Development Experience
在开发模式下工作时，你可以利用代码编辑器和其他工具来改善 Astro 开发者体验。
¥While you work in development mode, you can take advantage of your code editor and other tools to improve the Astro developer experience.
Astro 提供了自己的官方 VS Code 扩展，并与其他几种流行的编辑器工具兼容。Astro 还提供了一个可自定义的工具栏，可在开发服务器运行时显示在浏览器预览中。你可以安装甚至构建自己的工具栏应用以获得更多功能。
¥Astro provides its own official VS Code extension and is compatible with several other popular editor tools. Astro also provides a customizable toolbar that displays in your browser preview while the dev server is running. You can install and even build your own toolbar apps for additional functionality.
常见的新项目任务
标题部分 常见的新项目任务¥Common new project tasks
以下是你可能选择在新的 Astro 项目中采取的一些初始步骤。
¥Here are some first steps you might choose to take with a new Astro project.
添加你的部署域
标题部分 添加你的部署域¥Add your deployment domain
要生成站点地图并创建规范 URL，请在 site 选项中配置部署 URL。如果你要部署到路径（例如 www.example/docs），你还可以为项目的根目录配置 base。
¥For generating your sitemap and creating canonical URLs, configure your deployment URL in the site option. If you are deploying to a path (e.g. www.example/docs), you can also configure a base for the root of your project.
此外，不同的部署主机可能对 URL 末尾的尾部斜杠有不同的行为。（例如 example.com/about 与 example.com/about/）。一旦你的站点部署完毕，你可能需要配置你的 trailingSlash 首选项。
¥Additionally, different deployment hosts may have different behavior regarding trailing slashes at the end of your URLs. (e.g. example.com/about vs example.com/about/). Once your site is deployed, you may need to configure your trailingSlash preference.
import { defineConfig } from 'astro/config'
export default defineConfig({ site: 'https://www.example.com', base: '/docs', trailingSlash: 'always',})添加网站元数据
标题部分 添加网站元数据¥Add site metadata
Astro 不会将其配置文件用于常见的 SEO 或元数据，仅用于构建项目代码并将其渲染为 HTML 所需的信息。
¥Astro does not use its configuration file for common SEO or meta data, only for information required to build your project code and render it to HTML.
相反，此信息会添加到 HTML <link> 和 <meta> 标签中的页面 <head> 中，就像你编写纯 HTML 页面一样。
¥Instead, this information is added to your page <head> in HTML <link> and <meta> tags, just as if you were writing plain HTML pages.
Astro 网站的一个常见模式是创建一个 <Head /> .astro 组件，可以将其添加到通用 布局组件 中，以便应用于所有页面。
¥One common pattern for Astro sites is to create a <Head /> .astro component that can be added to a common layout component so it can apply to all your pages.
---import Head from './Head.astro';const { ...props } = Astro.props;---<html> <head> <meta charset="utf-8"> <Head /> <!-- --> </head> <body><!-- --></body></html>因为 Head.astro 只是一个常规的 Astro 组件，所以你可以导入文件并接收从其他组件传递的 props，例如特定的页面标题。
¥Because Head.astro is just a regular Astro component, you can import files and receive props passed from other components, such as a specific page title.
---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 />