乐趣区

关于javascript:从零开始使用-Astro-的实用指南

jiezi

在这个实用的 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-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。这样一来，咱们的用户就有了疾速、无缝的体验，而咱们依然能够享受到应用动静框架工作的所有益处。这对用户和开发者来说是一个双赢的场面！

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

退出移动版