Astro，完美的解决方案。
Astro，完美的解决方案。
有 天文 从一开始就吸引你的东西。您欣赏其方法的简单性或该工具允许您对网站进行模块化和组件化的速度，但它的影响更大。前几天我看到这条推文解释了这一切：
简单作为大规模建设的武器。一个用于预渲染的脚本区域和另一个用于模板的区域。从那里，添加单独的组件化策略，您就可以得到最终产品。 Astro 在其网站上列出了几个有利于其使用的键：
- 内容导向
内容生成是主要目标。用户创建文件，将它们放在 pages 目录中，Astro 负责路由。应用程序已准备好以声明方式而非编程方式提供服务，将路由逻辑放在服务器上而不是客户端上。 - 服务器优先
在服务器上渲染 HTML 在交付速度和 SEO 技术的应用方面带来了无数的优势。 - 默认快速
这 岛屿建筑 允许您控制加载这些岛屿（组件、布局）的有效负载的时刻，这有利于网站的第一次快速绘制。这 客户政策 Astro 提供的是一个权威的工具来控制和推迟你的作品的负载。 - 便于使用
在这篇文章中，我们将尝试以实际的方式证明这一点。定义一个布局，找到共同的部分来组件化它们，并将这两个元素添加到您网站的页面中，这会自动生成路由。 - 随时可用但可扩展
天文 允许集成 无数的技术； vue、react、svelte 或 lit、css 框架（如 tailwind）或解决方案（如站点地图或预取）中的组件。
限制
Astro 在某些情况下会很有用，但对于其他情况，则需要求助于其他解决方案。要了解这一点，请查看 该模型 它的基础是：
Astro 允许您生成多页应用程序 (MPA)。 MPA 是包含多个 HTML 页面的应用程序，最好在服务器上呈现。导航到新页面时，浏览器会向服务器请求新的 HTML。与这个想法相反，SPA（Single Page Applications）的想法是基于在用户浏览器中加载单个文件并在本地呈现 HTML 的想法。
在 MPA 应用程序中，总会有一些限制，例如共享状态的创建和处理，尽管 astro 已经 优惠 像这样的解决方案 纳米商店 在本地生成该数据存储。
有关更多信息，我建议查看优秀的 文件 的明星。现在，我们将把内置的 html 集成到 astro 项目中，以实际的方式了解它的优势。
步骤一：astro 安装。
假设我们收到了一个完成的平面 html 网站，其样式来自构建器。对于这种集成，我们采用了以下开源模板，由 Elzerowebschool 并在 https://github.com/ElzeroWebSchool/HTML_And_CSS_Template_Two
Kasper template
一旦我们有了我们的 HTML 站点，我们继续在我们的机器上安装 astro，之前确保我们遵守 前置要求 定义，打开我们的控制台或终端并输入指令：
npm 创建 [email protected]
该向导将引导我们完成创建过程。
- 运行命令后，向导会要求我们选择或创建安装目录。我们在桌面上创建它，名称为 kasper-app (Img. 01)
Img. 01
2.添加完目录后，我们选择安装类型；在我们的例子中，我们选择基本推荐（图 02）
Img. 02
3.选择安装类型并创建模板后，我们安装项目依赖项（图03）
Img. 03
4. 向导将选择性地让我们初始化 git 存储库，我们将回答否，它会提供我们在项目中安装 typescript，我们将回答否（图 04）
Img. 04
5. 在这里，我们将安装项目并准备好使用它（图 05）。
Img. 05
要在本地运行它，我们在终端中输入 cd kasper-app 进入安装目录，然后在终端中输入 npm run dev 来运行本地服务器，这几乎会立即在我们的 localhost 的 3000 端口上为我们提供原始的 astro 脚手架（图 06）
Img. 06
从这里开始，我们的目标是将 kasper html 模板集成到 astro 中，生成布局和必要的组件。
第二步：astro脚手架的元素。
为了完成集成，我们打开我们的代码编辑器（在我的例子中是 Visual Studio Code）并将 kasper-app 目录添加到我们的工作区。如果我们展开这个 astro 初始安装的树，我们将有以下结构：
在这个结构中我们已经可以找到astro中的三个主要开发单元，页面（pages）、布局和组件（components）。让我们分别分析这 3 个文件：
托管在 pages/index.astro 的 index.astro 文件是脚手架中唯一的页面，可通过路径“”、“/”或“index.html”访问。让我们看一下并分析它的代码（Img 08）：
Img. 08 (pages/index.astro)
我们在顶部看到一个由三个中间连字符分隔的区域：这是我们将导入页面元素（组件、布局）的脚本区域。在 index.astro 中，布局是从 '.../layouts/Layout.astro' 导入的，而 Card 组件是从 '../components/Card.astro' 导入的。这个想法很简单： 页面 作为容器， 布局 作为可以在我们的网站上重复使用的模板，以及 成分 作为建筑中可重复使用的部件。在脚本区域下，我们在 Layout 标签内有布局声明，在 Style 标签内有它的样式。关于布局的两个注意事项：我们可以找到一个名为 title 的属性，其字符串值为“Welcome to Astro”。和一个带有代码的 html 主元素。标题和此代码都是布局将接收以组成最终结果的值。让我们看看布局（图 09）：
Img. 09 (layouts/Layout.astro)
在布局中我们突出显示，在脚本区域中，Props 接口的定义，它为每个属性分配相应的数据类型，并将接口的 title 属性分配给我们布局中的一个常量，这将允许我们动态分配它并在第 16 行使用它
<title>{标题}</title>
我们还观察到，在体内，存在一种 投币口 ，这将允许我们动态地将我们需要的代码和元素插入到每个页面中。通过这种方式，布局获得了必要的灵活性，能够表示具有不同标题和内容的不同页面。
最后，让我们可视化 Card 组件的内容（图 10），它代表了 Img 中可见的一系列功能（文档、集成、主题和聊天）的每个元素。 06.
Img. 10 (components/Card.astro)
在脚本区我们可以看到 Props 界面有 3 个元素：title、body 和 href，它们由 解构 常量并在模板中使用。在脚本区用js打工，然后把值传给模板就这么简单。
我们托管了项目的当前状态，保持其开发的当前状态 这个 github 仓库 （标签 v0.0.1）
接下来我们将分解我们的 Kasper 模板的 html 以将其集成到 astro 中。
第三步：在 Astro 中集成我们的 HTML 模板。
一旦我们在本地运行了 astro，我们将把托管在我们 repo 的 kasper-html-template 文件夹中的 HTML 模板移动到我们的 astro 应用程序中。首先，我们将修改 layouts/Layout.astro 文件以包含必要的标记和样式。
如果我们查看 Layout.astro 的第 47 行，我们会看到样式是在样式标签中声明的，并且样式标签本身伴随着一个名为 是：全球 ，它告诉我们默认样式是本地的或作用域的，也就是说，它们只在声明它们的作用域内工作，并且通过使用 this is:global 指令，它们变成了全局的：
