Astrobuild 教程和联系表-js教程-PHP中文网

Astrobuild 教程和联系表

碧海醫心

发布： 2024-10-05 11:40:51

转载

552人浏览过

astrobuild 教程和联系表

astrobuild 教程以及使用 fabform 的联系表单

什么是阿斯特罗？

astro 是一款现代静态站点生成器 (ssg)，专为提高速度而构建，并针对创建快速、seo 友好的网站进行了优化。它支持多种前端框架，可以轻松地将 react、vue、svelte 甚至普通 javascript 等技术集成到您的项目中。 astro 提供的 javascript 更少，这意味着加载时间更快，整体性能更好。

在本教程中，我们将介绍以下步骤：

建立 astro 项目
创建页面和布局
添加组件
使用 fabform.io 集成联系表单

先决条件

开始之前，请确保您已安装以下软件：

node.js（v16 或更高版本）
代码编辑器（如 vscode）
熟悉 html、css 和 javascript

第 1 步：建立 astro 项目

1.1 安装astro

首先，您需要创建一个新的 astro 项目。打开终端并运行以下命令：


npm create astro@latest

登录后复制

这将提示您为项目命名。为您的项目选择一个名称并继续进行设置。为了简单起见，您可以使用默认设置。

1.2 导航到您的项目

项目设置完毕后，导航到您的项目目录：


cd your-project-name

登录后复制

1.3 运行开发服务器

要启动开发服务器，请运行以下命令：


npm run dev

登录后复制

您的 astro 项目现在应该在 http://localhost:3000 上运行。

第 2 步：创建页面

2.1 创建主页

astro 使用基于文件的路由系统。要创建主页，请导航到 src/pages/ 目录并创建一个名为 index.astro 的文件。


src/pages/index.astro

登录后复制

在index.astro中，添加以下代码：


---
title = "home"
---

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <h1>welcome to my astro site</h1>
    <p>this is the homepage created using astro.</p>
  </body>
</html>

登录后复制

astro 使用 frontmatter 语法（顶部的 --- 块）来声明可在文件中使用的变量。

2.2 创建关于页面

类似地，在 src/pages/ 目录中为“关于”页面创建一个 about.astro 文件。


src/pages/about.astro

登录后复制

添加以下代码：


---
title = "about"
---

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <h1>about us</h1>
    <p>this is the about page of our astro project.</p>
  </body>
</html>

登录后复制

访问 http://localhost:3000/about 即可看到新页面。

第 3 步：添加布局

为了避免重复，astro 支持布局。让我们为我们的网站创建一个基本布局。

爱图表

AI驱动的智能化图表创作平台

查看详情

3.1 创建布局

创建 src/layouts/ 目录和一个名为 mainlayout.astro 的新文件。


src/layouts/mainlayout.astro

登录后复制

为布局添加以下代码：


---
title = "my astro site"
---

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <header>
      <h1>welcome to {title}</h1>
      <nav>
        <a href="/">home</a> | 
        <a href="/about">about</a>
      </nav>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>&copy; 2024 my astro site</p>
    </footer>
  </body>
</html>

登录后复制

3.2 使用页面布局

现在，让我们更新 index.astro 和 about.astro 文件以使用此布局。

对于index.astro，将代码替换为：


---
import mainlayout from '../layouts/mainlayout.astro';
title = "home"
---

<mainlayout>
  <h2>welcome to my astro site</h2>
  <p>this is the homepage created using astro.</p>
</mainlayout>

登录后复制

同样，对于 about.astro，将代码替换为：


---
import mainlayout from '../layouts/mainlayout.astro';
title = "about"
---

<mainlayout>
  <h2>about us</h2>
  <p>this is the about page of our astro project.</p>
</mainlayout>

登录后复制

现在，两个页面共享共同的布局，以确保整个网站的一致性。

第 4 步：使用 fabform.io 添加联系表单

fabform.io 是一项简单的服务，可让您将表单添加到您的网站，而无需后端。您只需要集成他们的表单端点，fabform 就会处理剩下的事情。

4.1 创建联系页面

在 src/pages/ 目录中创建一个新文件 contact.astro。


src/pages/contact.astro

登录后复制

添加以下代码作为基本联系表单：


---
import mainlayout from '../layouts/mainlayout.astro';
title = "contact"
---

<mainlayout>
  <h2>contact us</h2>
  <form action="https://fabform.io/f/your-form-endpoint" method="post">
    <label for="name">name:</label>
    <input type="text" id="name" name="name" required />

    <label for="email">email:</label>
    <input type="email" id="email" name="email" required />

    <label for="message">message:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">send</button>
  </form>
</mainlayout>

登录后复制

4.2 自定义 fabform 端点

前往 fabform.io 并注册一个帐户。
创建一个新表单并复制他们提供的表单端点 url。
将表单操作中的 https://fabform.io/f/your-form-endpoint 替换为您唯一的表单 url。

现在，当用户提交表单时，fabform 将处理提交并通过电子邮件或您配置的服务向您发送结果。

第五步：最后的润色

您现在拥有一个使用 astro 的简单、快速的网站，包含多个页面、共享布局和由 fabform.io 提供支持的联系表单。

文件夹结构：


├── src
│   ├── layouts
│   │   └── MainLayout.astro
│   ├── pages
│   │   ├── about.astro
│   │   ├── contact.astro
│   │   └── index.astro
└── package.json

登录后复制

运行 npm run dev 再次预览您的网站并确保一切按预期运行。