お問い合わせフォームを使用した Astrobuild チュートリアル-jsチュートリアル-php.cn

Astrobuild tutorial with Contact Form

Fabform を使用した問い合わせフォームによる AstroBuild チュートリアル

アストロとは何ですか？

Astro は、速度を重視して構築され、高速で SEO に優しい Web サイトを作成するために最適化された最新の静的サイトジェネレーター (SSG) です。複数のフロントエンドフレームワークをサポートしているため、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 は、フロントマター構文 (先頭の --- ブロック) を使用して、ファイル内で使用できる変数を宣言します。

2.2 概要ページの作成

同様に、About ページの about.astro ファイルを src/pages/ ディレクトリに作成します。


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 はレイアウトをサポートしています。サイトの基本的なレイアウトを作成しましょう。

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 は、バックエンドを必要とせずにフォームを Web サイトに追加できるシンプルなサービスです。フォームエンドポイントを統合するだけで済み、残りは 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 が送信を処理し、電子メールまたは設定したサービスを介して結果を送信します。

ステップ 5: 最終仕上げ

これで、Astro を使用した、複数のページ、共有レイアウト、Fabform.io によるお問い合わせフォームを備えた、シンプルで高速な Web サイトが完成しました。

フォルダー構造:


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

ログイン後にコピー

npm run dev を実行してサイトを再度プレビューし、すべてが期待どおりに動作することを確認します。

結論

Astro を使用すると、最小限の JavaScript と高いパフォーマンスで静的 Web サイトを驚くほど簡単に構築できます。レイアウトやコンポーネントベースのアーキテクチャなどの機能を使用することで、コードをクリーンで再利用可能な状態に保つことができます。 Fabform.io を使用して問い合わせフォームを追加すると、バックエンドの構築を心配することなく、ユーザーのフィードバックを簡単に収集できます。

React や Svelte などの追加コンポーネントやフレームワークを統合して、このプロジェクトを自由に拡張して、Astro の全機能を探索してください!

以上がお問い合わせフォームを使用した Astrobuild チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。