从零开始使用 Astro 的实用指南

在这个实用的Astro指南中，我将指导你完成设置过程，并告诉你如何构造你的文件。你将学习如何添加页面、交互式组件，甚至是markdown文章。我还会告诉你如何从服务器上获取数据，创建布局，并使用vanilla JavaScript和其他框架添加互动性。准备好享受一些动手的乐趣，因为我们将一起创建一个小型的网站实例。我们将构建一个多页面的网站，包括一个博客。

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

什么是Astro框架？
Astro入门
Astro项目结构
Astro页面
Astro组件
添加脚本
Astro布局
元素
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 />元素是一个外部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-14
description: 'Jamstack is not about a specific technology…'
author: 'Denis Kostrzewa'
image:
    url: '<https://bejamas.io/_next/image/?.>..' 
    alt: 'Jamstack Explained Photo'
---

# Jamstack Explained
Jamstack 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.astro
title: 'Jamstack Explained'
pubDate: 2020-12-14
description: 'Jamstack is not about a specific technology…'
author: 'Denis Kostrzewa'
image:
    url: '<https://bejamas.io/_next/image/?.>..' 
    alt: 'Jamstack Explained Photo'
---

# Jamstack Explained
Jamstack 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。这样一来，我们的用户就有了快速、无缝的体验，而我们仍然可以享受到使用动态框架工作的所有好处。这对用户和开发者来说是一个双赢的局面！

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

posted @ 2023-05-18 21:42 chuckQu 阅读(0) 评论(0) 编辑收藏举报

从零开始使用Astro的实用指南

从零开始使用 Astro 的实用指南

什么是Astro框架？

Astro入门

Astro项目结构

Astro页面

Astro组件

添加脚本

Astro布局

元素

Astro组件props

Astro中的样式

获取数据

管理内容

嵌套布局

加载本地文件

添加脚本

使用UI框架

指令

构建和发布

总结

张三（王者段位）

温馨提示

最新会员

从零开始使用Astro的实用指南

从零开始使用 Astro 的实用指南

什么是Astro框架？

Astro入门

Astro项目结构

Astro页面

Astro组件

添加脚本

Astro布局

元素

Astro组件props

Astro中的样式

获取数据

管理内容

嵌套布局

加载本地文件

添加脚本

使用UI框架

指令

构建和发布

总结

张三 （王者 段位）

温馨提示

最新会员

张三（王者段位）