React + Remix 前端代码开发规范工程化 - 图1

基本介绍

  • Headless：Shopify Headless 是一种将 Shopify 的后台电商功能与自定义前端分离的架构方式。传统的 Shopify 商店使用 Shopify 提供的模板和主题进行展示，而在 Headless 架构中，前端和后端是完全解耦的
  • Hydrogen：Shopify Hydrogen 是 Shopify 推出的一个基于 React 的前端框架，专为构建 Shopify Headless 商店而设计。Hydrogen 提供了一套开发工具和组件库，让开发者能够快速构建高性能、定制化的电商体验，同时利用 Shopify 的后端服务。
  • Shopify Oxygen：Oxygen 是为 Shopify 的定制店铺框架 Hydrogen 专门设计的托管平台。Hydrogen 是一个基于 React 的框架，用于构建自定义的、快速的 Shopify 店面，而 Oxygen 则是为其提供托管的基础设施。
  • Graphql：一种 API 接口，用于更高效地与 Shopify 的数据进行交互。相比于传统的 REST API，GraphQL API 更加灵活和高效，允许客户端精确请求所需的数据，减少冗余的数据传输。
  • Remix：Remix 是一个现代化的全栈 Web 框架，专注于构建快速、动态和高效的用户界面。它基于 React，并且以服务端渲染（SSR）为核心，旨在提供更好的用户体验和开发者体验。Remix 提供了一整套的工具和最佳实践，帮助开发者构建复杂的 Web 应用。
  • Strapi：Strapi 是一个开源的 Headless CMS（内容管理系统），用于构建灵活、可扩展的 API 驱动应用程序。它允许开发者快速构建和管理内容，同时通过 REST 或 GraphQL API 将数据提供给前端。Strapi 提供了一个直观的管理面板，非技术用户也可以轻松地创建和管理内容。
  • 优势
    • 灵活性：前端可以完全定制，不受 Shopify 主题的限制，可以自定义URL路径
    • 性能优化：使用现代前端框架可以提高网站的加载速度和 SEO 性能
    • 更好的内容管理：可以将 Shopify 与其他 CMS（如 Strapi）集成，提供更好的内容管理能力
  • 使用场景：定制化需求高的网站

项目介绍

目录结构

  1. ├─ .eslintignore
  2. ├─ .eslintrc.cjs
  3. ├─ .github // github CI/CD
  4. │  └─ workflows
  5. │     ├─ oxygen-deployment-1000022982.yml
  6. │     └─ oxygen-deployment-1000023026.yml
  7. ├─ .gitignore
  8. ├─ .graphqlrc.js
  9. ├─ app
  10. │  ├─ assets // 存放静态资源
  11. │  │  └─ favicon.svg
  12. │  ├─ components // 存放公共组件
  13. │  │  ├─ AddToCartButton.jsx
  14. │  │  ├─ Aside.jsx
  15. │  │  ├─ CartLineItem.jsx
  16. │  │  ├─ CartMain.jsx
  17. │  │  ├─ CartSummary.jsx
  18. │  │  ├─ Footer.jsx
  19. │  │  ├─ Header.jsx
  20. │  │  ├─ PageLayout.jsx
  21. │  │  ├─ PaginatedResourceSection.jsx
  22. │  │  ├─ ProductForm.jsx
  23. │  │  ├─ ProductImage.jsx
  24. │  │  ├─ ProductPrice.jsx
  25. │  │  ├─ SearchForm.jsx
  26. │  │  ├─ SearchFormPredictive.jsx
  27. │  │  ├─ SearchResults.jsx
  28. │  │  └─ SearchResultsPredictive.jsx
  29. │  ├─ entry.client.jsx
  30. │  ├─ entry.server.jsx
  31. │  ├─ graphql
  32. │  │  └─ customer-account
  33. │  │     ├─ CustomerAddressMutations.js
  34. │  │     ├─ CustomerDetailsQuery.js
  35. │  │     ├─ CustomerOrderQuery.js
  36. │  │     ├─ CustomerOrdersQuery.js
  37. │  │     └─ CustomerUpdateMutation.js
  38. │  ├─ lib // 封装的工具库
  39. │  │  ├─ context.js
  40. │  │  ├─ fragments.js
  41. │  │  ├─ i18n.js
  42. │  │  ├─ search.js
  43. │  │  ├─ session.js
  44. │  │  └─ variants.js
  45. │  ├─ root.jsx // 根路径，页面入口
  46. │  ├─ routes // 路由页面 
  47. │  │  ├─ ($locale).$.jsx
  48. │  │  ├─ ($locale).account.$.jsx
  49. │  │  ├─ ($locale).account.addresses.jsx
  50. │  │  ├─ ($locale).account.jsx
  51. │  │  ├─ ($locale).account.orders.$id.jsx
  52. │  │  ├─ ($locale).account.orders._index.jsx
  53. │  │  ├─ ($locale).account.profile.jsx
  54. │  │  ├─ ($locale).account._index.jsx
  55. │  │  ├─ ($locale).account_.authorize.jsx
  56. │  │  ├─ ($locale).account_.login.jsx
  57. │  │  ├─ ($locale).account_.logout.jsx
  58. │  │  ├─ ($locale).blogs.$blogHandle.$articleHandle.jsx
  59. │  │  ├─ ($locale).blogs.$blogHandle._index.jsx
  60. │  │  ├─ ($locale).blogs._index.jsx
  61. │  │  ├─ ($locale).cart.$lines.jsx
  62. │  │  ├─ ($locale).cart.jsx
  63. │  │  ├─ ($locale).collections.$handle.jsx
  64. │  │  ├─ ($locale).collections.all.jsx
  65. │  │  ├─ ($locale).collections._index.jsx
  66. │  │  ├─ ($locale).discount.$code.jsx
  67. │  │  ├─ ($locale).jsx
  68. │  │  ├─ ($locale).pages.$handle.jsx
  69. │  │  ├─ ($locale).policies.$handle.jsx
  70. │  │  ├─ ($locale).policies._index.jsx
  71. │  │  ├─ ($locale).products.$handle.jsx
  72. │  │  ├─ ($locale).search.jsx
  73. │  │  ├─ ($locale).[sitemap.xml].jsx
  74. │  │  ├─ ($locale)._index.jsx
  75. │  │  ├─ api.quick-order.jsx
  76. │  │  ├─ api.subscribe.jsx
  77. │  │  └─ [robots.txt].jsx
  78. │  └─ styles // 样式
  79. │     ├─ app.css
  80. │     └─ reset.css
  81. ├─ CHANGELOG.md
  82. ├─ customer-accountapi.generated.d.ts
  83. ├─ env.d.ts
  84. ├─ jsconfig.json
  85. ├─ package-lock.json
  86. ├─ package.json
  87. ├─ public
  88. │  └─ .gitkeep
  89. ├─ README.md
  90. ├─ server.js 
  91. ├─ storefrontapi.generated.d.ts
  92. └─ vite.config.js // vite相关配置
  • assets文件夹存放一些静态资源（image、svg、media等等）
  • components文件夹存放封装的公共组件
  • lib文件夹存放封装好的工具库或者Hooks
  • routes文件夹下是存放相关路由，也就是对应相关的url路径，相关资料（路由文件命名）
    • ($locale)是占位符并且可选，用于多语言的方案切换，例如 /zh-cn/products、/en-us/products
    • 每次新增一个新的路由，都需要在robots.txt中去新增可返回的路径名

开发流程

确定整体的开发框架

多语言

利用脚手架已经写好的项目逻辑，可以看到

定义：

React + Remix 前端代码开发规范工程化 - 图2React + Remix 前端代码开发规范工程化 - 图3

使用：（拿到相关信息）

  1. const {language, country} = context.storefront.i18n;

React + Remix 前端代码开发规范工程化 - 图4

使用Scss预处理器

  • 安装依赖
  1. npm install sass -D
  • 在vite.config.js中修改css相关配置
  1. css: {
  2.     preprocessorOptions: {
  3.       scss: {
  4.         additionalData: `@import "~/styles/global.scss";`,
  5.       },
  6.     },
  7.     devSourcemap: true,
  8.   },
  • 在组件中使用Module CSS

React + Remix 前端代码开发规范工程化 - 图5

  1. import React, {useState} from 'react';
  2. import {motion, AnimatePresence} from 'framer-motion';
  3. import styles from './index.module.scss';
  5. // 折叠面板公共组件
  6. /**
  7.  * @param {string | VNode} title - 标题
  8.  * @param {VNode} children - 标题
  9.  */
  10. const Accordion = ({title, children}) => {
  11.   const [isOpen, setIsOpen] = useState(false);
  13.   const togglePanel = () => {
  14.     setIsOpen(!isOpen);
  15.   };
  17.   return (
  18.     <div className={styles.accordion}>
  19.       <div onClick={togglePanel} className={styles.header}>
  20.         {typeof title === 'string' ? (
  21.           <div className={styles.title}>{title}</div>
  22.         ) : (
  23.           title
  24.         )}
  25.         <div className={styles.icon}>
  26.           {isOpen ? <span className={styles.iconOpen}>-</span> : '+'}
  27.         </div>
  28.       </div>
  29.       <AnimatePresence>
  30.         <motion.div
  31.           initial={{height: 0, opacity: 0}}
  32.           animate={{height: isOpen ? 'auto' : 0, opacity: isOpen ? 1 : 0}}
  33.           exit={{height: 0, opacity: 0}}
  34.           transition={{duration: 0.3}}
  35.           style={{overflow: 'hidden'}}
  36.         >
  37.           <div className={styles.content}>{children}</div>
  38.         </motion.div>
  39.       </AnimatePresence>
  40.     </div>
  41.   );
  42. };
  44. export default Accordion;
  • scss文件名需要定义为xxx.module.css（相对与Vue的scoped，具有样式隔离的作用）
  1. .accordion {
  2.   border-bottom: 1px solid #eaeaea;
  4.   .header {
  5.     display: flex;
  6.     align-items: center;
  7.     justify-content: space-between;
  8.     padding: 24px 0;
  10.     // border-bottom: 1px solid #eaeaea;
  11.     cursor: pointer;
  13.     @media (width <= 768px) {
  14.       padding-block: 10px;
  15.     }
  17.     .title {
  18.       width: calc(100% - 54px);
  19.       margin: 0;
  20.       font-size: 18px;
  21.       font-family: MontserratMedium, sans-serif;
  23.       @media (width <= 768px) {
  24.         font-size: 16px;
  25.         line-height: 1.6;
  26.       }
  27.     }
  29.     .icon {
  30.       display: flex;
  31.       align-items: center;
  32.       justify-content: center;
  33.       width: 32px;
  34.       height: 32px;
  35.       font-size: 32px;
  37.       .iconOpen {
  38.         display: flex;
  39.         align-items: center;
  40.         justify-content: center;
  41.         width: 100%;
  42.         height: 100%;
  43.         font-size: 44px;
  45.         @media (width <= 768px) {
  46.           font-size: 34px;
  47.         }
  48.       }
  50.       @media (width <= 768px) {
  51.         font-size: 24px;
  52.       }
  53.     }
  54.   }
  56.   .content {
  57.     padding: 0 0 16px;
  58.     background-color: #f7f9f9;
  59.     white-space: pre-wrap;
  60.     word-wrap: break-word; /* 旧名称 */
  61.     overflow-wrap: break-word; /* 新名称 */
  63.     p {
  64.       font-size: 14px;
  65.       line-height: 1.5;
  66.     }
  67.   }
  68. }
  70. .accordion:last-child {
  71.   .header {
  72.     border-bottom: none;
  73.   }
  74. }

Axios的二次封装

React + Remix 前端代码开发规范工程化 - 图6

  • 在app目录下创建http的文件夹，在http文件夹下创建request.js文件，二次封装好对RESTFUL API接口
  1. import axios from 'axios';
  3. // BASE_URL
  4. const BASE_URL = 'https://strapi.wininfluencer.com/api';
  5. // 请求头 - Authorization
  6. const AUTHORIZATION =
  7.   'Bearer 733e5129c6ce52de6a628973c8247f68ff64a2d4655af6dbfab4cf3e32518c4411f1c8249afe7bdcd14ed07994a6f59a22ba088ec9fcc557b72a5c856d1d7b762fb43f67fe5059cd286b067adf7ff1fe6c73de3b9dd8e957478326cc62478e6320b7209388d7dd41e87826eecfced54d9de7dca30717a840dc361154b6c80641';
  9. const service = axios.create({
  10.   timeout: 60 * 1000,
  11.   baseURL: BASE_URL,
  12.   headers: {
  13.     'Content-Type': 'application/json',
  14.     Authorization: AUTHORIZATION,
  15.   },
  16. });
  18. // axios实例拦截请求
  19. service.interceptors.request.use(
  20.   (config) => {
  21.     // 这里可以对config请求体数据进行处理
  22.     return config;
  23.   },
  24.   (error) => {
  25.     // 排除错误
  26.     return Promise.reject(error);
  27.   },
  28. );
  30. // axios实例拦截响应
  31. service.interceptors.response.use(
  32.   (response) => {
  33.     return response.data;
  34.   },
  35.   // 请求失败
  36.   (error) => {
  37.     return Promise.reject(error);
  38.   },
  39. );
  41. // 此处相当于二次响应拦截
  42. // 为响应数据进行定制化处理
  43. const requestInstance = (config) => {
  44.   return new Promise((resolve, reject) => {
  45.     service
  46.       .request(config)
  47.       .then((data) => {
  48.         // 成功直接返回数据
  49.         if (data.result === 'success') {
  50.           config.returnAllData ? resolve(data) : resolve(data.data);
  51.         } else {
  52.           config.returnAllData ? resolve(data) : resolve(data.data);
  53.         }
  54.       })
  55.       .catch((error) => {
  56.         reject(error);
  57.       });
  58.   });
  59. };
  61. // GET请求
  62. export function get(url, parms, config = {}) {
  63.   return requestInstance({
  64.     url,
  65.     method: 'GET',
  66.     params: parms,
  67.     ...config,
  68.   });
  69. }
  71. // POST请求
  72. export function post(url, data, config = {}) {
  73.   return requestInstance({
  74.     url,
  75.     method: 'POST',
  76.     data,
  77.     ...config,
  78.   });
  79. }
  81. // PUT请求
  82. export function put(url, data, config = {}) {
  83.   return requestInstance({
  84.     url,
  85.     method: 'PUT',
  86.     data,
  87.     ...config,
  88.   });
  89. }
  91. // DELETE请求
  92. export function del(url, data, config = {}) {
  93.   return requestInstance({
  94.     url,
  95.     method: 'DELETE',
  96.     data,
  97.     ...config,
  98.   });
  99. }
  • 在http文件夹下创建project.js文件，用于某一页面接口的的集合管理，将函数接口暴露出去提供使用
  1. import {get} from '~/http/request';
  3. /**
  4.  * 解决方案接口
  5.  */
  7. const services = {
  8.   // 页面
  9.   getProjectPage(params) {
  10.     return get(
  11.       '/project-page',
  12.       {
  13.         populate: '*',
  14.         ...params,
  15.       },
  16.       {},
  17.     );
  18.   },
  19.   // 页面
  20.   getProjectDetailPage(params) {
  21.     return get(
  22.       '/project-detail-page',
  23.       {
  24.         populate: '*',
  25.         ...params,
  26.       },
  27.       {},
  28.     );
  29.   },
  30.   // 获取一级解决方案
  31.   getProjectCategories(params) {
  32.     return get(
  33.       '/project-categories',
  34.       {
  35.         populate: '*',
  36.         ...params,
  37.       },
  38.       {},
  39.     );
  40.   },
  41.   // 获取所有的解决方案
  42.   getAllProject(params) {
  43.     return get(
  44.       '/projects',
  45.       {
  46.         populate:
  47.           'meta,banner_module,banner_module.content,impact_module,product_module,other_projects_module,summaryt_module,project_categories',
  48.         'pagination[pageSize]': '8',
  49.         ...params,
  50.       },
  51.       {returnAllData: true},
  52.     );
  53.   },
  54. };
  56. export default services;

路由确定

  • 需要与设计进行需求对齐
    • 有哪些页面（并定好页面的url的命名），例如联系我们页面（/contact-us）
    • 每个页面要跳转的页面url
  • 确定是否需要多语言
    • 需要则对每个路由页面都进行判断切换语言

例如页面已经确定了有首页、集合页、关于我们、联系我们这四个页面

在routes页面理应只有($locale)._index.jsx、($locale).collection._index.jsx、($locale).about-us._index.jsx、($locale).contact_index.jsx这四个路由页面，因为模板有自带的其他页面参考，可以把其他的页面删除掉，因为会占到相关的内存，每个Shopify oxygen提供的托管服务器只能提供最多10M内存大小的资源，所以尽可能减少无关页面的存在。

接口数据结构和字段确定

  • 对齐好需求后，应该先将需求理清，然后将在Shopify后台或者Srtapi后台开始可以配一些数据和定义数据结构
  • 这里分GraphQL Storefront API 和 Strapi API
    • GraphQL Storefront API的数据结构以及字段都是已经由Shopify确定的，所以我们就根据提供的结果进行数据转换和展示。
    • Strapi API是先由开发者自己先定义然后再去调用接口的，所以我们需要先确定数据结构和字段，后续在使用接口的时候不应该轻易去改变结构，按照提供的数据结构来进行开发。

静态页面开发

公共组件开发

  • 组件封装需写清楚各个入参的描述信息，以及组件的使用
  1. import React, {useState} from 'react';
  2. import {motion, AnimatePresence} from 'framer-motion';
  3. import styles from './index.module.scss';
  5. // 折叠面板公共组件
  6. /**
  7.  * @param {string | VNode} title - 标题
  8.  * @param {VNode} children - 标题
  9.  */
  10. const Accordion = ({title, children}) => {
  11.   const [isOpen, setIsOpen] = useState(false);
  13.   const togglePanel = () => {
  14.     setIsOpen(!isOpen);
  15.   };
  17.   return (
  18.     <div className={styles.accordion}>
  19.       <div onClick={togglePanel} className={styles.header}>
  20.         {typeof title === 'string' ? (
  21.           <div className={styles.title}>{title}</div>
  22.         ) : (
  23.           title
  24.         )}
  25.         <div className={styles.icon}>
  26.           {isOpen ? <span className={styles.iconOpen}>-</span> : '+'}
  27.         </div>
  28.       </div>
  29.       <AnimatePresence>
  30.         <motion.div
  31.           initial={{height: 0, opacity: 0}}
  32.           animate={{height: isOpen ? 'auto' : 0, opacity: isOpen ? 1 : 0}}
  33.           exit={{height: 0, opacity: 0}}
  34.           transition={{duration: 0.3}}
  35.           style={{overflow: 'hidden'}}
  36.         >
  37.           <div className={styles.content}>{children}</div>
  38.         </motion.div>
  39.       </AnimatePresence>
  40.     </div>
  41.   );
  42. };
  44. export default Accordion;

路由页面开发

总结

React + Remix 前端代码开发规范工程化 - 图7

React + Remix 前端代码开发规范工程化 - 图8

Strapi的使用

在项目里使用

  • 一般读取数据会在loader函数中进行操作
  1. import httpGeneral from '~/http/general';
  3. export async function loader(args) {
  4.   // Start fetching non-critical data without blocking time to first byte
  5.   const deferredData = loadDeferredData(args);
  7.   // Await the critical data required to render initial state of the page
  8.   const criticalData = await loadCriticalData(args);
  9.   // const data = await HttpQuote.getQuote({key: 'value'});
  10.   const data = await httpGeneral.getGeneral({key: 'value'});
  11.   // 确保 criticalData.product.metafields 是一个有效的数组
  12.   const metafields = Array.isArray(criticalData.product.metafields)
  13.     ? criticalData.product.metafields
  14.     : [];
  16.   // 查找 related_products 字段，确保每个项都是对象并且具有 key 属性
  17.   const relatedProducts =
  18.     metafields.find((item) => item && item.key === 'related_products') || null;
  20.   const relatedHandle = relatedProducts?.reference?.handle;
  21.   const recommendedData = await loadRecommendedData({
  22.     context: args.context,
  23.     relatedHandle,
  24.   });
  25.   const {locale} = args.params;
  26.   return defer({
  27.     ...deferredData,
  28.     ...criticalData,
  29.     ...recommendedData,
  30.     locale,
  31.     data,
  32.     // pageData,
  33.   });
  34. }
  • 然后在组件中去使用useLoaderData函数去获取
  1. import {useLoaderData} from '@remix-run/react';
  3. export default function Blogs() {
  4.   /** @type {LoaderReturnData} */
  5.   const {blogs} = useLoaderData();
  7.   return (
  8.     <div className="blogs">
  9.       <h1>Blogs</h1>
  10.       <div className="blogs-grid">
  11.         <Pagination connection={blogs}>
  12.           {({nodes, isLoading, PreviousLink, NextLink}) => {
  13.             return (
  14.               <>
  15.                 <PreviousLink>
  16.                   {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
  17.                 </PreviousLink>
  18.                 {nodes.map((blog) => {
  19.                   return (
  20.                     <Link
  21.                       className="blog"
  22.                       key={blog.handle}
  23.                       prefetch="intent"
  24.                       to={`/blogs/${blog.handle}`}
  25.                     >
  26.                       <h2>{blog.title}</h2>
  27.                     </Link>
  28.                   );
  29.                 })}
  30.                 <NextLink>
  31.                   {isLoading ? 'Loading...' : <span>Load more ↓</span>}
  32.                 </NextLink>
  33.               </>
  34.             );
  35.           }}
  36.         </Pagination>
  37.       </div>
  38.     </div>
  39.   );
  40. }

常用的Components、Hooks、Utilites

Components - Hydrogen

  • 购物车组件，一般使用在结账逻辑、商品添加、购物车页面逻辑，不必再自己造轮子封装逻辑。

参考：https://shopify.dev/docs/api/hydrogen/2023-07/components/cartform

  1. import { CartForm } from '@shopify/hydrogen';
  • 媒体组件（ExternalVideo、Image、MediaFile、ModelViewer、Video）

参考：https://shopify.dev/docs/api/hydrogen-react/2024-07/components/media/externalvideo

  1. import {Image,ExternalVideo,MediaFile,ModelViewer,Video} from '@shopify/hydrogen';

Components - Remix

  1. import { Await, Form, Link, useRouteLoaderData } from "@remix-run/react";

Hooks - Hydrogen

  1. import { useCart, useShop } from "@remix-run/react";

Hooks - Remix

  1. import { useNavigate, useLocation, useNavigate, useNavigation, useParam, useRouteLoaderData  } from "@remix-run/react";

Utilites

  1. import { json, defer ,redirect } from '@shopify/remix-oxygen';

第三方库的使用（推荐）

NPM包 功能 官网
ahooks 提供了丰富的、可复用的 React Hooks https://ahooks.pages.dev/
react-intersection-observer 通常用于懒加载图片、动画触发、无尽滚动、广告曝光监控等场景 https://react-intersection-observer.vercel.app/?path=/docs/intro—docs
swiper、swiper/react 轮播图效果 https://swiperjs.com/react
framer-motion 强大且易用的 React 动画库，专门用于创建复杂而流畅的动画和交互效果 https://www.framer.com/motion/

开发注意事项

  1. 在安装引用了第三方库时，有时候会报错，require is not define等等类似的错误，这时候应该在vite.config.js文件中写入相关配置
  1. ssr: {
  2.     optimizeDeps: {
  3.       /**
  4.        * Include dependencies here if they throw CJS<>ESM errors.
  5.        * For example, for the following error:
  6.        *
  7.        * > ReferenceError: module is not defined
  8.        * >   at /Users/.../node_modules/example-dep/index.js:1:1
  9.        *
  10.        * Include 'example-dep' in the array below.
  11.        * @see https://vitejs.dev/config/dep-optimization-options
  12.        */
  13.       include: ['这里填写你的引用依赖值'],
  14.     },
  15.   },
  1. 请求读取Shopify的数据时，会有一个缓存策略，https://shopify.dev/docs/storefronts/headless/hydrogen/caching

React + Remix 前端代码开发规范工程化 - 图9

  1. 添加内容安全策略( CSP) https://shopify.dev/docs/storefronts/headless/hydrogen/content-security-policy
  1. const {nonce, header, NonceProvider} = createContentSecurityPolicy({
  2.   styleSrc: [
  3.     "'self'",
  4.     'https://cdn.shopify.com',
  5.     'https://some-custom-css.cdn',
  6.   ],
  7. });
  1. 使用vite-plugin-svgr插件
  • 安装依赖包npm i -D vite-plugin-svgr
  1. import svgr from 'vite-plugin-svgr';
  3. plugins: [
  4.     hydrogen(),
  5.     oxygen(),
  6.     remix({
  7.       presets: [hydrogen.preset()],
  8.       future: {
  9.         v3_fetcherPersist: true,
  10.         v3_relativeSplatPath: true,
  11.         v3_throwAbortReason: true,
  12.       },
  13.     }),
  14.     tsconfigPaths(),
  15.     svgr(),
  16.   ],
  • 使用
  1. import HomepageIconSvg2 from '~/assets/svg/homepage-icon-2.svg?react';
  3. const SolutionLearnMoreCard = ({
  4. }) => {
  5.   return (
  6.     <div className={styles.solution_learn_more_card}>
  7.       {/* 背景图片 */}
  8.       <img src={imageSrc} alt={imageAlt} />
  9.       {/* 文案 */}
  10.       <div className={styles.text_container}>
  11.         <AnimationText>
  12.           <div className={styles.text}>
  13.             <div className={styles.title}>{mainTitle}</div>
  14.             <div className={styles.desc}>{description}</div>
  15.             <Link
  16.               className={styles.more}
  17.               to={handle ? `/${handle}${link}` : link}
  18.             >
  19.               <span className={styles.more_text}>{button}</span>
  20.               <RightArrowSvg />
  21.             </Link>
  22.           </div>
  23.         </AnimationText>
  24.       </div>
  25.     </div>
  26.   );
  27. };

参考链接

其他

使用到Hydrogen的项目