在这个实用的Astro指南中，我将领导你实现设置过程，并通知你如何结构你的文件。你将学习如何增加页面、交互式组件，甚至是markdown文章。我还会通知你如何从服务器上获取数据，创立布局，并应用vanilla JavaScript和其余框架增加互动性。筹备好享受一些入手的乐趣，因为咱们将一起创立一个小型的网站实例。咱们将构建一个多页面的网站，包含一个博客。

在这篇文章开端，你会很好地了解Astro是如何工作的，以及你如何应用它来更快地创立高效的网站。开始吧！

  • 什么是Astro框架？
  • Astro入门
  • Astro我的项目构造
  • Astro页面
  • Astro组件
  • 增加脚本
  • Astro布局
  • <slot />元素
  • Astro组件props
  • Astro中的款式
  • 获取数据
  • 治理内容
  • 嵌套布局
  • 加载本地文件
  • 增加脚本
  • 应用UI框架
  • 指令
  • 构建和公布
  • 总结

什么是Astro框架？

作为开发人员，咱们晓得，在建设网站时，发明一个良好的用户体验是要害。而用户最喜爱的是什么？疾速的网站，不节约他们的工夫。有了Astro，咱们能够通过向浏览器发送更少的代码来实现这一指标。

咱们都有本人喜爱的UI框架，使咱们的生存更轻松，但它们可能会以惨重的网站为代价。然而有了Astro，咱们就能够领有两个世界中最好的货色。它容许咱们用咱们最喜爱的框架甚至多个框架同时构建咱们的网站，但它在构建时将它们渲染成动态HTML。因而，咱们能够为咱们的用户创立一个疾速的网站，而不就义古代开发者的体验。

但Astro并没有止步不前。它还容许咱们在须要时退出动静的客户端JavaScript，这意味着咱们能够在网站上领有可交互的组件，但只在必要时进行。换句话说，Astro容许你从简略的开始，在须要时减少复杂性。

简而言之，Astro是一个弱小的框架，它同时反对动态网站生成（SSG）和服务端渲染（SSR），帮忙咱们建设疾速的、基于内容的网站，同时思考到开发人员的体验。它轻量、高效、灵便，使它成为创立内容丰盛的网站的适合抉择，如博客、投资组合、文档和一些电子商务网站。如果你想创立一个具备大量交互的简单应用程序，Astro可能不是你的正确抉择。相同，你能够思考其余工具比方Next.js。

很好，当初咱们对Astro是什么以及它能做什么有了很好的理解。接下来，让咱们持续钻研，看看咱们能一起结构些什么。

Astro入门

首先，让咱们装置Astro并创立我的项目的模板。确保你的电脑上装置了Node.js v16.12.0或者更高版本。

npm create astro@latest

或者：

yarn create astro@latest

CLI会询问你的项目名称和你是否要应用Typescript。此外，它还会给你几个选项，通知你如何设置你的我的项目。在本教程中，我抉择了"一个空我的项目 "选项。

以下是我与Astro CLI的小型对话：

一旦你在编辑器中关上你的我的项目，你能够装置Astro的扩大。因为Astro有本人的文件扩大和语法，你可能想为你的编辑器装置其扩大。这里是VSCode的Astro扩大的链接，它不仅仅为你高亮语法，还能做得更多。

当初你能够用以下命令来运行你的我的项目。不须要装置任何依赖。

npm run dev

关上浏览器，拜访http://localhost:3000/ ，所有就绪。

Astro我的项目构造

Astro的文件构造相当含糊其辞。

  • src：你的源码（组件、页面、款式等等）
  • public：你的动态资源（字体、图标等等）

在src/pages目录下，Astro创立了一个index.astro，你能够认为这是index.html。

值得注意的是，src/content/是Astro的一个保留目录。Astro v2.0引入了Collections API，用于将你的Markdown和MDX文件组织成内容汇合。这个API保留了src/content/作为一个非凡的文件夹。

Astro页面

好了，让咱们来谈谈Astro的页面。Astro页面解决路由、数据加载以及网站上每个页面的整体布局。它们是具备不同扩展名的文件，存在于src/pages/子目录中。

在Astro中，咱们有不同类型的页面，包含.astro、.md、.mdx、.html甚至是.js/.ts。每种文件类型都有不同的用处，能够用不同的形式来创立你的页面。

Astro应用一种称为基于文件路由的路由策略，这意味着你的src/pages/目录中的每个文件都会依据其文件门路成为你网站上的一个端点。这使得你的页面具备灵活性，并易于组织。

在本教程中，咱们次要应用.astro和.md文件来创立页面。留神，如果你应用.html页面，一些要害的Astro个性在HTML组件中不被反对。

当初让咱们来创立第二个页面，看看它是如何工作的。你所须要做的就是在src/pages目录下创立一个紧挨着index.astro的文件。

我打算把它命名为about.astro，并在外面写上非常简单的标记语言：

<html lang="en">  <head>    <meta charset="utf-8" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <meta name="viewport" content="width=device-width" />    <title>About</title>  </head>  <body>    <h1>About</h1>    <p>Jamstack development agency.</p>  </body></html>

当初你能够拜访localhost:3000/about，在你的浏览器中看到这个页面。正如你所看到的，只有你把文件增加到pages文件夹中，/about路由就能立刻发挥作用。

你能够更新内容，甚至增加你本人的外部款式，Astro将为你实时预览。所以不须要装置任何实时重载的NPM包或此类货色。

为了可能在页面之间轻松导航，我打算在我的index.astro和about.astro文件中增加导航：

<body>  <nav>    <a href="/">Home</a>    <a href="/about">About</a>  </nav>      <h1>About</h1>  <p>Jamstack development agency.</p></body>

但你不心愿每次在导航中减少一个链接时都要更新所有的页面，对吗？

这就是组件发挥作用的中央，让你不要反复你本人（DRY）。

Astro组件

Astro组件是任何Astro我的项目的根本形成模块。它们有两个次要局部：

  • 组件脚本
  • 组件模板

Astro组件长这样：

---// Component Script (JavaScript)---<!-- Component Template (HTML + JS Expressions) -->

让咱们为我的项目增加第一个组件。

我打算创立一个src/components目录，并在外面增加一个header.astro文件。接着，我会挪动导航标记到Header组件中。目前为止，咱们的组件的脚本局部是空白的。

------<nav>  <a href="/">Home</a>  <a href="/about">About</a></nav>

下一步是将该组件增加到咱们的页面中。为了做到这一点，咱们须要导入该组件。因而，关上你的about.astro文件，在文件的顶部增加以下导入内容：

---import Header from '../components/Header.astro';---<html lang="en">  <head>    <meta charset="utf-8" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <meta name="viewport" content="width=device-width" />    <title>About</title>  </head>  <body>    <h1>About</h1>    <p>Jamstack development agency.</p>  </body></html>

当初，header组件曾经导入了，能够这么应用：

<body>  <Header />  <h1>About</h1></body>

对主页做同样的事件，也就是pages目录中的index.astro文件。

当初，如果你在浏览器中查看这些页面，你应该看到header展示良好。

最初，我将把咱们的logo和一些语义标记，与一个容器一起增加到咱们的header中，这样我稍后能够增加一些款式：

<header>  <div class="container">    <a class="logo" href="/">      <svg><!-- SVG Logo goes here --></svg>    </a>    <nav>      <a href="/">Home</a>      <a href="/about">About</a>    </nav>  </div></header>

这就是Astro的厉害之处。到目前为止，咱们曾经制作了页面，并向其增加了组件，而简直不须要写任何HTML以外的货色。

增加脚本

代码栅栏是你的Astro组件的脚本局部。你能够用栅栏来写任何你须要的JavaScript来渲染你的模板。你甚至能够写TypeScript！

---// The code fence area---

例如，在上一节中，我在我的代码栅栏中增加了一个导入行，将Header组件增加到我的页面。咱们将持续探讨咱们在代码栅栏中还能做什么。

它被称为代码栅栏的起因是，无论你在其中写了什么JavaScript代码，都会被"围起来"，不能逃到浏览器中去，也不能到你的用户手中。你在这里写的所有只是为了帮忙你的组件模板。

让咱们回到咱们的页面，在页面的代码栅栏中增加一个变量，用于存储页面题目：

---import Header from '../components/Header.astro';const pageTitle = 'Bejamas';---<html lang="en">  <head>    <title>{pageTitle}</title>  </head>  <body>    <Header />    <h1>{pageTitle}</h1>  </body></html>

正如你在下面的片段中所看到的，你能够在代码栅栏内定义本地JavaScript变量，而后应用相似JSX的表达式将变量注入HTML模板中。

当初在你的其余页面比方about.astro等，能够做同样的事件。

当你查看不同页面时，你可能又开始留神到一些宜人的货色。是的，当你在不同的页面中写同样的货色时，你会反复本人。除了题目之外，你的页面中所有的代码都是齐全一样的。

我想这是议论Astro布局的一个好时机。

Astro布局

Astro布局只是具备不同名称的Astro组件，用于创立一个UI构造或布局，比方一个页面模板。因而，任何你能在组件中做到的事件，都有可能在布局中实现。

你能够把你的布局文件放在你我的项目的任何中央，但把它们增加到src/layouts目录中是很好的做法。

在咱们的我的项目中，有一些跨页面的共享标记能够作为模板应用，以防止在不同的文件中反复它们。为了做到这一点，让咱们在 src/layouts目录中创立一个 BaseLayout.astro 文件。

咱们把index.astro的内容复制粘贴到该文件中：

你刚刚实现了你的第一个Astro布局，当初你须要在你的Astro页面中应用它。让咱们看看你如何能做到这一点。

像组件一样，第一步是将布局导入到代码栅栏，而后通过在模板局部搁置其标签来应用它。上面就是index.astro的样子：

---import BaseLayout from '../layouts/BaseLayout.astro';---<BaseLayout></BaseLayout>

如果你试图为你的About页面做同样的事件，你会留神到about.astro外面有不同的内容。你须要保留它，或者以某种形式将它传递给你的BaseLayout文件。这就是<slot />的用武之地。

<slot />元素

<slot />元素是一个内部HTML内容的占位符。它指定了其余文件中的子元素应该被注入你的组件模板的地位。

你能够把这个元素增加到你的BaseLayout.astro文件中，就像上面的代码：

---import Header from '../components/Header.astro';const pageTitle = 'Bejamas';---<html lang="en">  <head>    <meta charset="utf-8" />    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />    <meta name="viewport" content="width=device-width" />    <title>{pageTitle}</title>  </head>  <body>    <Header />    <h1>{pageTitle}</h1>    <slot /> <!-- your content is injected here -->  </body></html>

当初，About页面的内容能够像这样放在BaseLayout标签之间：

---import BaseLayout from '../layouts/BaseLayout.astro';---<BaseLayout>  <p>Jamstack development agency.</p></BaseLayout>

如果你查看你的浏览器，你会看到这两个页面是如何应用雷同的模板但内容不同的。

只有一个局部被咱们弄乱了，就是页面的题目。在我的例子中，两个题目都是 "Bejamas"。

这里就是组件props的用武之地！

Astro组件props

除了插槽，Astro组件的另一个个性是props，它在布局中可能十分有用。任何Astro组件都能够定义和接管props。要定义模板局部以外的props，你能够通过Astro.props全局设置。

在咱们的例子中，咱们能够定义一个pageTitle参数，并把它传递给咱们的BaseLayout组件，以便可能在不同的页面上有不同的页面题目。

上面是你如何在BaseLayout组件中定义一个prop的例子：

---import Header from '../components/Header.astro';const { pageTitle } = Astro.props;---<html lang="en">  <head>    <title>{pageTitle}</title>  </head>  <body>    <Header />    <h1>{pageTitle}</h1>    <slot /> <!-- your content is injected here -->  </body></html>

留神咱们是如何应用结构化语法从全局的Astro.props对象中取出props的。如果你有更多的props，你能够应用逗号分隔，就像上面这样：

const { pageTitle, pageDescription } = Astro.props;

当初，让咱们看看你如何将一个prop传递到组件或者布局中。

index.astro页面能够将pageTitle作为属性进行传递:

---import BaseLayout from '../layouts/BaseLayout.astro';---<BaseLayout pageTitle="Bejamas"></BaseLayout>

此外，你能够在脚本中定义变量更易于治理。在About页面中这样做：

---import BaseLayout from '../layouts/BaseLayout.astro';const pageTitle = 'About';---<BaseLayout pageTitle={pageTitle}>  <p>Jamstack development agency.</p></BaseLayout>

目前为止，我还没给你展现任何后果。起因是咱们还短少款式。那么咱们就加一些CSS吧。

Astro中的款式

Astro我的项目能够用很多办法进行款式申明，咱们在这里无奈涵盖所有。然而你应该晓得，Astro反对任何你能想到的办法。你能够编写纯CSS、Sass和CSS模块，甚至能够导入你喜爱的CSS库，比方Tailwind。

你能够间接在你的组件或页面模板上增加一个<style>标签。

------<style>  .container { /*  */  }    nav {    display: flex;    gap: 1rem;      }  nav a { /* */ }</style><header>  <div class="container">    <a class="logo" href="/">      <svg><!-- SVG Logo goes here --></svg></a>    <nav>      <a href="/">Home</a>      <a href="/about">About</a>    </nav>  </div></header>

Astro <style> CSS规定默认是在组件内起作用和封装的。这意味着写在这个组件中的款式不会透露，也不会影响你网站的其余局部。

除了Header组件外，我将把其余的款式增加到一个内部的CSS文件中，并在我的项目中作为全局款式导入。

上面是你如何将内部的CSS文件导入到BaseLayout.astro文件中的例子：

---import Header from '../components/Header.astro';import '../styles/global.css';const { pageTitle } = Astro.props;---<html lang="en">  <head>    <title>{pageTitle}</title>  </head>  <body>    <Header />    <h1>{pageTitle}</h1>    <slot />  </body></html>

在我跳到下一节之前，我将在这里分享一个工作demo。我给我的Home和About页面增加了一些动态内容，并写了一些款式。

上面是我增加到我的主页的内容：

---  import BaseLayout from '../layouts/BaseLayout.astro';  const pageTitle = 'Bejamas';---<BaseLayout pageTitle={pageTitle}>  <section class="section">    <div class="container">      <div class="banner">        <div class="">          <h3 class="pretitle">Jamstack Developers for hire</h3>          <h1 class="title">We build<br><mark>fast sites &amp; apps.</mark></h1>          <p class="text">Maximize your business potential...</p>          <a class="button" href="">Start project</a>        </div>        <img src="jam.svg" alt="" />      </div>    </div>  </section>  </BaseLayout>

主页看起来长这样：

点击这里查看demo。

获取数据

咱们教程的这一部分，咱们将应用Bejamas API从服务器获取一些数据，并在咱们的主页上创立这些案例钻研卡。

在Astro中获取数据是非常容易的。你能够在你的代码栅栏中应用全局fetch()函数，在你的所有组件中向API收回HTTP申请。

在index.astro中，我将增加这段代码，应用fetch()函数从服务器上获取案例钻研的数据：

---  import BaseLayout from '../layouts/BaseLayout.astro';  const pageTitle = 'Bejamas';  const response = await fetch('bejamas.io/api/blog?category=case-studies');  const data = await response.json();  const posts = data.posts;---

当初我有了posts变量中的数据，我能够用它来生成动静HTML，在我的主页上显示案例钻研卡片。

上面是posts数组的样子：

"posts": [  {    "excerpt": "",    "mainImage": {      "asset": {        "url": ""      }    },    "slug": "",    "title": ""  }]

我会应用map函数遍历posts，而后动态创建每张卡片：

<section class="section" id="casestudies-section">  <div class="container">    <h2 class="section-title">Case studies</h2>    <ul class="case-studies">      {posts.map((post) => (        <li>          <article class="casestudy">            <img src={post.mainImage.asset.url} alt="" />            <div>              <h3>{post.title}</h3>              <p>{post.excerpt}</p>              <a href={`https://bejamas.io/blog/${post.slug}`} class="">Read more</a>            </div>          </article>        </li>      ))}    </ul>  </div></section>

最酷的是，所有这些都是在构建时产生的，咱们将只向浏览器发送动态HTML。

这是向全局CSS增加款式后的后果：

点击这里查看demo。

治理内容

当波及到创立和治理你的内容时，Astro给你两个抉择：

  • Markdown
  • MDX

MDX相似于规范的Markdown，但有额定的性能。它容许你在你的Markdown内容中应用变量、JSX表达式和组件。

Astro内置了对Markdown的反对，但为了解决.mdx文件，你须要装置@astrojs/mdx进行集成。在本教程中，咱们保持应用规范的Markdown内容。

在咱们进一步探讨之前，有必要提到Astro v2引入了内容汇合，这是一种在Astro我的项目中组织内容的绝佳形式。咱们将在将来的教程中写更多对于这个主题的内容。

正如咱们后面所说的，因为动态路由在Astro中的工作形式，src/pages/目录中的任何页面都会失去一个路由。这意味着你能够在你的浏览器中关上它，或者在你的我的项目中的任何中央链接到它。另外，咱们晓得Markdown文件是Astro的一种页面类型，咱们能够把它放在这个目录外面。牢记这些信息，让咱们在 src/pages 目录中创立咱们的第一个内容。

为了更有条理，我创立了一个blog文件夹，把我的.md文件放在那里，并把我的第一个Markdown内容增加到其中：

因为src/pages目录下的Astro组件（.astro）和Markdown文件（.md）会主动成为你网站上的页面，你能够简略地导航到以下URL，拜访你的第一篇博文：

localhost:3000/blog/jamstack

你能够在你的Markdown的前言中增加更多对于你内容的信息，比方它的题目，公布日期，次要图片等等，就像上面这样：

---title: 'Jamstack Explained'pubDate: 2020-12-14description: 'Jamstack is not about a specific technology…'author: 'Denis Kostrzewa'image:    url: '<https://bejamas.io/_next/image/?.>..'     alt: 'Jamstack Explained Photo'---# Jamstack ExplainedJamstack is no longer a buzzword over which dev keyword warriors brawl. It has grown to become a booming ecosystem of tools helping developers ship performant websites, progressive web apps, and other projects with benefits too good to ignore.

你当然不心愿你的文章看起来像这样，必定心愿把你的网站设计融入其中，对吗？让咱们为咱们的博客内容创立一个布局。

在src/layouts目录下增加一个名为BlogLayout.astro的文件，并将以下代码复制并粘贴到其中：

---import Header from '../components/Header.astro';import '../styles/global.css';const { frontmatter } = Astro.props;---<html lang="en">  <head>  </head>  <body>    <Header />    <div class="container">      <div class="meta">        <div>              <time class="date">{frontmatter.pubDate.slice(0, 10)}</time>          <h1 class="title">{frontmatter.title}</h1>          <p class="description">{frontmatter.description}</p>          <span class="author">Author: <span class="author-name">{frontmatter.author}</span></span>        </div>        <img class="poster" src={frontmatter.image.url}  alt={frontmatter.image.alt} />      </div>        <div class="body">        <slot />      </div>    </div>  </body></html>

请留神咱们是如何应用Astro.props将frontmatter属性传递给这个布局的。当初你能够以任何形式将这些属性增加到你的模板中。

另外，留神插槽元素。这是内容呈现在最终HTML页面上的中央。

还有一步。咱们须要把这个布局增加到咱们的内容中，所以咱们回到咱们的第一个Markdown文件，像以下代码那样做：

---layout: ../../layouts/BlogLayout.astrotitle: 'Jamstack Explained'pubDate: 2020-12-14description: 'Jamstack is not about a specific technology…'author: 'Denis Kostrzewa'image:    url: '<https://bejamas.io/_next/image/?.>..'     alt: 'Jamstack Explained Photo'---# Jamstack ExplainedJamstack is no longer a buzzword over which dev keyword warriors brawl. It has grown to become a booming ecosystem of tools helping developers ship performant websites, progressive web apps, and other projects with benefits too good to ignore.

正如你在第一行代码中所看到的，Astro有一个非凡的layout属性用于Markdown页面。这个属性定义了一个Astro布局组件的相对路径。

在localhost:3000/blog/jamstack再次预览，看看布局给你的页面增加了什么。

嵌套布局

你是否留神到，咱们不得不在咱们的BlogLayout.astro布局中增加<head>和<body>标签？难道咱们不能间接应用咱们的BaseLayout来做这个吗？

因为Astor布局基本上是组件，那么咱们能够嵌套它们。所以咱们须要做的就是把咱们的BaseLayout增加到新的BlogLayout.astro文件中：

---import BaseLayout from "./BaseLayout.astro";const { frontmatter } = Astro.props;---<BaseLayout pageTitle={frontmatter.title}>  <div class="container">    <div class="meta">      <div>            <time class="date">{frontmatter.pubDate.slice(0, 10)}</time>        <h1 class="title">{frontmatter.title}</h1>        <p class="description">{frontmatter.description}</p>        <span class="author">Author: <span class="author-name">{frontmatter.author}</span></span>      </div>      <img class="poster" src={frontmatter.image.url}  alt={frontmatter.image.alt} />    </div>      <div class="body">      <slot />    </div>  </div></BaseLayout>

如许整洁，不是吗？

另外，留神到咱们是如何将咱们页面的题目传递给BaseLayout中的页面题目的：

<BaseLayout pageTitle={frontmatter.title}>

让咱们给BlogLayout增加一些款式，我将在BlogLayout.astro文件中增加作用域内的款式：

---import BaseLayout from "./BaseLayout.astro";const { frontmatter } = Astro.props;---<style>  .container {    padding: 3rem 0;    max-width: 1152px;  }  .meta {    display: flex;    align-items: center;    justify-content: space-between;    gap: 2rem;  }  /* And more... */</style><BaseLayout pageTitle={frontmatter.title}>  <!-- ... --></BaseLayout>

当初页面看起来长这样：

咱们须要做的最初一件事是在咱们的主页上显示这些文章。

加载本地文件

在你的blog目录中增加更多的博客文章，这样咱们就能够在咱们的主页上创立一个列表。

Astro.glob()容许你将本地文件加载到你的动态页面上。它将返回一个对象数组，每个博客文章都有一个，蕴含所有对于你的Markdown文件的信息。

上面是你如何在你的index.astro文件中应用它：

---  const blogs = await Astro.glob('../pages/blog/*.md');---

为了动静地生成整个文章列表，咱们对Astro.glob()返回的博客数组进行map遍历，如以下代码：

<section class="section blog-section" id="blog-section">  <div class="container">    <h2 class="section-title">Our Blog</h2>    <ul class="blogs">      {blogs.map((blog) =>        <li>          <article class="blog">                      <img src={blog.frontmatter.image.url} alt="blog.frontmatter.image.alt" />            <h3>{blog.frontmatter.title}</h3>            <p>{blog.frontmatter.description}</p>            <a href={blog.url} class="">Read more</a>          </article>                    </li>      )}    </ul>  </div></section>

咱们在index.astro文件中的案例钻研局部上面增加了这个文件。

在浏览器中从新扫视你的主页，享受你在页面底部增加的博客文章列表。在向global.css增加一些款式后，页面看起来是这样的：

如果你点击”Read more”链接，你会看到每篇文章的内容。

这里是目前为止我的项目的demo。

增加脚本

你能够应用规范的HTML <script>标签向你的Astro组件增加交互。这容许你发送JavaScript到浏览器中运行，并为你的Astro组件增加性能。例如，对于切换亮堂模式到暗黑模式，你不须要一个JavaScript框架，你能够用一般的JavaScript来解决它。

在.astro文件中，你能够用与HTML文件雷同的规范形式增加客户端JavaScript：

<script>  console.log('Print this to the browser console');</script><!-- relative path to script at `src/scripts/local.js` --><script src="../scripts/local.js"></script><!-- also works for local TypeScript files --><script src="./script-with-types.ts"></script><script is:inline src="<https://my-extenrnal-script.com/script.js>"></script>

你增加的所有脚本将被解决并捆绑在Astro中，而后用type="module"注入到页面的<head>中。

如果你想防止捆绑脚本，你能够应用is:inline指令导入一个内部文件，就像例子中最初一个那样。

应用UI框架

Astro最引人注目的特点之一是它能够灵便地与你喜爱的JS框架集成。而且你不用只应用一个框架，你能够应用多个。

在咱们的我的项目中，我想在主页的底部增加一个FAQ局部。我没有太多的工夫，只想应用他人的作品，以便可能尽快创立我的页面。我搜寻了一下FAQ的React组件，呈现了一些链接。

那么问题来了，如何将React组件增加到你的我的项目中。

首先，你须要将React增加到你的我的项目中。在你的终端运行以下命令：

npx astro add react

你能够简略地在你的我的项目中编写本人的React组件，在src/components目录下增加一个.jsx文件。

因为我想导入一个React组件而不是本人写，所以我须要先把它增加到我的我的项目中。

所以我将用我的终端来装置这个包：

npm install react-faq-component

我将把FAQ.jsx和FAQ.css文件增加到components目录中，并对我所导入的组件进行自定义：

import React, { useEffect, useState } from 'react';import Faq from 'react-faq-component';import './FAQ.css';const data = {  rows: [],};const styles = {};const config = {};export default function FAQ() {  return <div>            <Faq                data={data}                styles={styles}                config={config}            />        </div>;}

你的组件一旦准备就绪，你就须要将其导入到页面中：

---  import BaseLayout from '../layouts/BaseLayout.astro';  import Faq from '../components/FAQ.jsx';  const pageTitle = "Bejamas";---

接着在模板中得心应手地应用：

<section class="section" id="faq-section">  <h2 class="section-title">Questions you probably want to ask</h2>  <div class="container faq-container">    <Faq />  </div></section>

上面是最终成果：

如果你在浏览器中进行查看，你会留神到该组件曾经在你的页面上出现了。然而它没有任何可交互性。因为动作不失效，当你点击按钮时，你无奈开展子项。

我将在下一节向你展现咱们须要的货色。

指令

正如你在上一个例子中看到的，这个组件被增加到了页面上，但它没有失效。产生这种状况是因为，默认状况下，你的框架组件只会在服务端渲染为动态HTML，所以，你的点击处理器或状态钩子就不会失效。这对于增加非交互式的组件十分有用，能够防止向客户端发送任何不必要的JavaScript。

你能够通过增加Astro指令使一个框架组件具备交互性（hydrated）。这些组件属性指明组件的JavaScript何时应该被发送到浏览器。

我在这里列举出一些Astro的指令：

  • <Faq client:load /> 在页面加载时渲染该组件。
  • <Faq client:idle /> 一旦浏览器有闲暇工夫，就会渲染该组件。
  • <Faq client:visible /> 只有当该组件被滚动到视口范畴中时才会渲染。
  • <Faq client:media="{media query here}" />只有在媒体查问失效的状况下才会渲染该组件。
  • <Faq client:only="react" /> 只在客户端渲染该组件，而不会在服务端渲染成动态HTML。

如果你不像上一个例子那样给你的组件增加任何这些货色，该组件的纯HTML版本将在浏览器中渲染，所以任何点击处理器或状态都不会失效。

我想在页面加载时加载我的FAQ组件，所以这就是我须要的：

<Faq client:load />

请留神，所有这些都来自于Astro中的Island Architecture。

最初，这是咱们的最终成果。

构建和公布

Astro网站是开箱即用型的动态网站。这意味着所有的页面在最初都是动态HTML。因而，如果你领有一台服务器，你部署网站的第一个抉择是仅将你的最终HTML文件上传到你的服务器。

在你部署你的网站之前，你须要构建它。要做到这一点，你须要从你的Astro我的项目的根目录中运行构建命令。你能够通过在你的终端运行以下命令来做到这一点：

npm run build

我的项目的最终构建将被默认存储在dist文件夹中。所以，你须要做的就是把你的dist目录上传到你的服务器。 手动部署你的网站不是当初的首选办法。有大量的工具和服务能够为你主动实现整个工作流程。你所须要做的就是推送你的变动，他们将为你构建和部署我的项目。

你能够依照Astro网站上的指南，看看你如何在不同的部署服务上部署你的我的项目，如Netlify、Vercel、Deno等。

总结

总之，作为网络开发者，JavaScript框架的衰亡赋予了咱们诸多力量和丰盛的体验。咱们喜爱应用这些框架，因为它们使创立组件、共享和重用它们变得很容易。围绕应用Vue、React和Svelte等框架进行构建的工具是一流的。然而，应用这些框架的代价往往是在咱们的页面上发送大量的JavaScript，即便是简略的动态内容。

有了Astro，咱们就能失去两者的益处。咱们依然能够应用JSX和JavaScript编写动静内容，但Astro将其全副渲染成动态HTML，所以咱们只加载咱们真正须要的JavaScript。这样一来，咱们的用户就有了疾速、无缝的体验，而咱们依然能够享受到应用动静框架工作的所有益处。这对用户和开发者来说是一个双赢的场面！

以上就是本文的全部内容，如果对你有所帮忙，欢送点赞、珍藏、转发~