ホームページ > 記事 > ウェブフロントエンド > お問い合わせフォームを使用した Astrobuild チュートリアル
お問い合わせフォームを使用した Astrobuild チュートリアル
- Patricia Arquetteオリジナル
- 2024-10-04 22:23:30289ブラウズ
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>© 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 サイトの他の関連記事を参照してください。