집 > 기사 > 웹 프론트엔드 > 문의 양식을 사용한 Astrobuild 튜토리얼

문의 양식을 사용한 Astrobuild 튜토리얼

Patricia Arquette원래의: 2024-10-04 22:23:30294검색

Astrobuild tutorial with Contact Form

Fabform을 사용한 문의 양식이 포함된 AstroBuild 튜토리얼

아스트로란 무엇인가요?

Astro는 속도를 위해 제작되었으며 빠르고 SEO 친화적인 웹사이트를 만드는 데 최적화된 최신 SSG(정적 사이트 생성기)입니다. 여러 프런트엔드 프레임워크를 지원하므로 React, Vue, Svelte 또는 바닐라 JavaScript와 같은 기술을 프로젝트에 쉽게 통합할 수 있습니다. Astro는 더 적은 양의 JavaScript를 제공하므로 로딩 시간이 더 빨라지고 전반적으로 성능이 향상됩니다.

이 튜토리얼에서는 다음 단계를 다룹니다.

Astro 프로젝트 설정
페이지 및 레이아웃 만들기
구성요소 추가
Fabform.io를 사용하여 문의 양식 통합

전제 조건

시작하기 전에 다음이 설치되어 있는지 확인하세요.

Node.js(v16 이상)
코드 편집기(VSCode 등)
HTML, CSS, JavaScript에 대한 지식

1단계: Astro 프로젝트 설정

1.1 아스트로 설치

먼저 새로운 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 정보 페이지 만들기

마찬가지로 정보 페이지의 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는 레이아웃을 지원합니다. 사이트의 기본 레이아웃을 만들어 보겠습니다.

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이 제출을 처리하고 이메일이나 구성한 서비스를 통해 결과를 보내드립니다.

5단계: 최종 마무리

이제 여러 페이지, 공유 레이아웃, Fabform.io에서 제공하는 문의 양식을 갖춘 간단하고 빠른 Astro 웹사이트가 생겼습니다.

폴더 구조:


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

npm run dev를 실행하여 사이트를 다시 미리 보고 모든 것이 예상대로 작동하는지 확인하세요.

결론

Astro를 사용하면 최소한의 JavaScript와 고성능으로 정적 웹사이트를 놀라울 정도로 쉽게 구축할 수 있습니다. 레이아웃 및 구성 요소 기반 아키텍처와 같은 기능을 사용하면 코드를 깔끔하고 재사용 가능하게 유지할 수 있습니다. Fabform.io를 사용하여 문의 양식을 추가하면 백엔드 구축에 대한 걱정 없이 쉽게 사용자 피드백을 수집할 수 있습니다.

React 또는 Svelte와 같은 추가 구성요소나 프레임워크를 통합하여 Astro의 전체 기능을 탐색하여 이 프로젝트를 자유롭게 확장하세요!

위 내용은 문의 양식을 사용한 Astrobuild 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css less html npm Static for Directory using copy JS default this vscode http https everything prompt SEO

성명：

이전 기사：이벤트 플래너다음 기사：이벤트 플래너