自定义具有模板可扩展性的组件

在本教程中，我们将使用模板可扩展性为站点创建自定义组件。在此示例中，我们将创建一个自定义页脚。由于页脚是基本模板中的现有组件，并且我们不想更改页面布局，因此我们将在组件级别覆盖页脚。

有关更多指导，请参阅以下文档：最佳实践和疑难解答。

在运行本教程中的命令之前，请将所有占位符替换为实际值。占位符的格式如 $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。

在主页上，页脚看起来与下面显示的页脚相似。例如，背景颜色和措辞是自定义的。

4. 部署您的捆绑包