템플릿 확장성을 사용하여 구성요소 맞춤화

이 튜토리얼에서는 템플릿 확장성을 사용하여 사이트에 대한 맞춤형 구성요소를 만듭니다. 이 예제에서는 맞춤형 바닥글을 만듭니다. 바닥글은 기본 템플릿의 기존 구성요소이고, 저희는 페이지 레이아웃을 변경하지 않으려고 하므로 구성요소 수준에서 바닥글을 재정의합니다.

자세한 지침은 다음 설명서를 참조하십시오. 모범 사례 및 문제 해결.

이 튜토리얼의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.

페이지 오른쪽에 있는 제목을 사용하여 이 튜토리얼의 다른 위치로 이동합니다.

Tip

사전 요구 사항

이 튜토리얼을 완료하려면 다음 중 하나를 수행합니다.

PWA Kit 버전 3.x로 생성한 프로젝트를 사용합니다.

또는
프로젝트가 없는 경우 다음을 실행하여 PWA Kit 프로젝트를 생성합니다.

npx @salesforce/pwa-kit-create-app@latest ——outputDir $PATH/TO/NEW/LOCAL/PROJECT

1. 기본값을 재정의하는 파일 생성

overrides/app에 components라는 폴더를 만듭니다.
components 폴더에 footer라는 폴더를 만듭니다.
footer 폴더에 index.jsx.라는 파일을 만듭니다.

새 폴더와 파일의 구조는 다음과 같습니다.

연결된 스크린샷

2. 맞춤형 바닥글 생성

overrides/components/footer/index.jsx에 다음 코드를 추가합니다.

1import React from "react";
2
3import {
4  Box,
5  Container,
6  Stack,
7  Text,
8  Link,
9  Icon,
10  Input,
11  Button,
12  useColorModeValue,
13} from "@chakra-ui/react";
14import {
15  SocialFacebookIcon,
16  SocialTwitterIcon,
17  SocialInstagramIcon,
18} from "@salesforce/retail-react-app/app/components/icons";
19
20const Footer = () => {
21  return (
22    <Box
23      bg={useColorModeValue("gray.50", "gray.900")}
24      color={useColorModeValue("gray.700", "gray.200")}
25    >
26      <Container as={Stack} maxW={"6xl"} py={10}>
27        <Stack direction={{ base: "column", md: "row" }} spacing={4}>
28          <Link href="/about">About Us</Link>
29          <Link href="/contact">Contact</Link>
30          <Link href="/faq">FAQ</Link>
31        </Stack>
32        <Stack
33          direction={{ base: "column", md: "row" }}
34          justifyContent={"space-between"}
35          alignItems={"center"}
36        >
37          <Text>
38            © {new Date().getFullYear()} Your Company Name. All rights reserved
39          </Text>
40          <Stack direction={"row"} spacing={6}>
41            <Icon as={SocialFacebookIcon} />
42            <Icon as={SocialTwitterIcon} />
43            <Icon as={SocialInstagramIcon} />
44          </Stack>
45        </Stack>
46        <Stack
47          direction={{ base: "column", md: "row" }}
48          spacing={4}
49          mt={10}
50          alignItems={"center"}
51        >
52          <Text>Subscribe to our newsletter</Text>
53          <Input placeholder="Your email address" />
54          <Button>Subscribe</Button>
55        </Stack>
56      </Container>
57    </Box>
58  );
59};
60
61export default Footer;

3. 홈 페이지 미리보기

npm start를 실행합니다.
http://localhost:3000으로 이동합니다.

홈 페이지에서 바닥글은 아래에 나와 있는 것과 비슷합니다. 예를 들어 배경색과 문구가 맞춤화됩니다.