当你创建一个Astro项目时，你会看到一些以.astro 为扩展名的文件。
让我们看一看。
让我们选择Minimal模板中的那个。
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<title>Welcome to Astro</title>
</head>
<body>
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
</body>
</html>
该组件基本上是HTML，除了在顶部有两行--- 。这就是前端内容。你可能从Markdown文件中熟悉这个概念，例如我在Hugo的这篇文章中用它来设置页面标题和帖子日期。
请注意，如果fronttmatter是空的，你也可以省略它，而只是用一个HTML标签来启动这个组件。在这种情况下，它的存在是因为这是默认的Astro例子。
但Astro中有趣的是，它可以包含JavaScript（如果你愿意，也可以是TypeScript）。
请注意，上面的第一个例子包含了html,head 和body 标签，因为那是一个页面组件，一种特殊的组件，负责响应路由（并住在src/pages ）。
在
src/pages里面，你也可以把.md文件，它们将被视为markdown页面。Astro会把它们渲染成普通的HTML，除非你设置了一个布局。我们将在另一篇文章中看到这意味着什么。
组件可以更简单，比如你在这个演示中看到，如何用JavaScript（或TypeScript）在前言中定义变量，我们在HTML中用类似JJSX的语法使用它们。
---
const name = 'Flavio'
---
<p>{name}</p>
这个JavaScript代码在构建时运行，而不是在浏览器中。如果你想添加在浏览器中运行的JavaScript，你可以在页面中添加一个script 标签。
---
const name = 'Flavio'
---
<p>{name}</p>
<script>
alert('test')
</script>
而且你可以做得更多，不仅仅是定义变量。
你可以使用frontmatter来导入组件或库，你可以获取数据，你可以定义变量，然后在HTML中使用。
在任何组件中，你可以使用style标签定义范围内的CSS。
---
const name = 'Flavio'
---
<p>{name}</p>
<style>
p {
color: red;
}
</style>
当你在src/components 文件夹中定义一个组件时，它就可以在你的Astro组件中的任何地方使用，你只需要导入它，就可以嵌入它。
---
import Test from '../components/Test.astro'
---
<Test />
这并不是真正的JSX，但它实际上是一种改进。
例如，要修改一个页面组件的head 部分，只需添加一个head 标签。你可以使用正常的HTML注释，<!-- --> ，而不是{/* */} 。你可以使用HTML特殊字符。而且HTML属性不需要使用camelCased。不再有className= 。
小事情，但是是的。这使它更简单。
Astro提供了一些内置的组件。例如Markdown ，如果你想在你的组件中嵌入一些Markdown。
---
import { Markdown } from 'astro/components';
---
<Markdown> # test </Markdown>
你有Code ，可以在构建时直接嵌入语法高亮的代码。
对于同样的事情，如果你想使用Prism（我在博客上使用的库），也有Prism ，它包括客户端JavaScript。
还有Debug ，你可以通过打印页面内的变量内容来在客户端调试你的前端代码。
---
import Debug from 'astro/debug';
const name = 'Flavio'
---
<Debug {name} />
