소셜 미디어 바닥글 만들기
요구 사항
- 바닥글 컴포넌트 만들기
- 소셜 미디어 컴포넌트에 props를 생성하고 전달합니다.
이제 페이지에서 Astro 컴포넌트를 사용했으므로 다른 컴포넌트 내에서 컴포넌트를 사용할 차례입니다!
바닥글 컴포넌트 만들기
섹션 제목: 바닥글 컴포넌트 만들기-
src/components/Footer.astro위치에 새 파일을 만듭니다. -
다음 코드를 새 파일
Footer.astro에 복사합니다.src/components/Footer.astro ---const platform = "github";const username = "withastro";---<footer><p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p></footer>
Footer.astro 가져오기 및 사용
섹션 제목: Footer.astro 가져오기 및 사용-
세 개의 Astro 페이지 (
index.astro,about.astro,blog.astro) 각각의 프런트매터에 다음 import 문을 추가하세요.import Footer from '../components/Footer.astro'; -
페이지 하단에 바닥글을 표시하려면 닫는
</body>태그 바로 앞에있는 각 페이지의 Astro 템플릿에 새로운<Footer />컴포넌트를 추가하세요.<Footer /></body></html> -
브라우저 미리보기에서 각 페이지의 새 바닥글 텍스트가 보이는지 확인하세요.
직접 시도해 보기 - 바닥글 맞춤설정
섹션 제목: 직접 시도해 보기 - 바닥글 맞춤설정여러 소셜 네트워크 (예: Instagram, Twitter, LinkedIn)를 표시하도록 바닥글을 사용자 정의하고 사용자 이름을 포함하여 자신의 프로필에 직접 연결하세요.
코드 체크인
섹션 제목: 코드 체크인튜토리얼의 각 단계를 따라왔다면 index.astro 파일은 다음과 같아야 합니다:
---import Navigation from '../components/Navigation.astro';import Footer from '../components/Footer.astro';import '../styles/global.css';
const pageTitle = 'Home Page';---
<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" /> <meta name="generator" content={Astro.generator} /> <title>{pageTitle}</title> </head> <body> <Navigation /> <h1>{pageTitle}</h1> <Footer /> </body></html>소셜 미디어 컴포넌트 만들기
섹션 제목: 소셜 미디어 컴포넌트 만들기연결할 수 있는 온라인 계정이 여러 개 있을 수 있으므로 재사용 가능한 단일 컴포넌트를 만들어 여러 번 표시할 수 있습니다. 매번 사용할 다른 속성 (props) (온라인 플랫폼 및 사용자 이름)을 전달합니다.
-
src/components/Social.astro위치에 새 파일을 생성합니다. -
다음 코드를 새 파일
Social.astro에 복사합니다.src/components/Social.astro ---const { platform, username } = Astro.props;---<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
바닥글에 Social.astro를 가져와 사용
섹션 제목: 바닥글에 Social.astro를 가져와 사용-
src/components/Footer.astro의 코드를 변경하여 가져오고 이 새 컴포넌트를 세 번 사용하고 매번 다른 컴포넌트 속성을 props로 전달합니다.src/components/Footer.astro ---const platform = "github";const username = "withastro";import Social from './Social.astro';---<footer><p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p><Social platform="twitter" username="astrodotbuild" /><Social platform="github" username="withastro" /><Social platform="youtube" username="astrodotbuild" /></footer> -
브라우저 미리보기를 확인하면 각 페이지에 이 세 가지 플랫폼에 대한 링크가 표시되는 새 바닥글이 표시됩니다.
소셜 미디어 컴포넌트 스타일 지정
섹션 제목: 소셜 미디어 컴포넌트 스타일 지정-
src/components/Social.astro에<style>태그를 추가하여 링크 모양을 사용자 정의하세요.src/components/Social.astro ---const { platform, username } = Astro.props;---<a href={`https://www.${platform}.com/${username}`}>{platform}</a><style>a {padding: 0.5rem 1rem;color: white;background-color: #4c1d95;text-decoration: none;}</style> -
내용의 레이아웃을 개선하려면
src/components/Footer.astro에<style>태그를 추가하세요.src/components/Footer.astro ---import Social from './Social.astro';---<style>footer {display: flex;gap: 1rem;margin-top: 2rem;}</style><footer><Social platform="twitter" username="astrodotbuild" /><Social platform="github" username="withastro" /><Social platform="youtube" username="astrodotbuild" /></footer> -
브라우저 미리보기를 다시 확인하고 각 페이지에 업데이트된 바닥글이 표시되는지 확인하세요.
지식 테스트
섹션 제목: 지식 테스트-
title,author,date값을 props로 받으려면 Astro 컴포넌트의 프런트매터에 어떤 코드 줄을 작성해야 합니까? -
Astro 컴포넌트에 어떻게 값을 props로 전달합니까?