صفحات سفارشی: موارد استفاده و ایجاد

مقدمه:

به آموزش بعدی مجموعه توسعه تم Fynd Platform خوش آمدید. در این جلسه، ما به صفحات سفارشی، کاربرد آنها و نحوه ایجاد آنها خواهیم پرداخت. صفحات سفارشی در زیر نصب می شوند /c/ پیشوند مسیر، با انعطاف پذیری برای تعریف مسیرهای بعد /c/. در پایان این آموزش، نحوه ایجاد، ثبت و رندر صفحات سفارشی را به طور یکپارچه خواهید دانست.

1. صفحات سفارشی چیست؟

صفحات سفارشی اجزای React هستند که برای موارد استفاده منحصر به فرد طراحی شده اند که در آن صفحات سیستم موجود کافی نیست. آنها از طریق مسیرهای پیشوند با قابل دسترسی هستند /c/، و بخش های بعد از آن /c/ کاملا قابل تنظیم هستند

ویژگی های کلیدی:

• در زیر نصب شده است /c/ (مثلا /c/author).
• مسیرهای کاملاً قابل تنظیم بعد /c/.
• ایده‌آل برای صفحات تبلیغاتی، طرح‌بندی‌های برند خاص یا فرم‌ها.

2. ساختار دایرکتوری برای صفحات سفارشی

صفحات سفارشی در دایرکتوری قالب های سفارشی درون موضوع شما ذخیره می شوند. در اینجا ساختار توصیه شده است:

theme/
├── custom-templates/
│   ├── author.jsx
│   ├── about.jsx
│   └── index.jsx
├── pages/
├── sections/
├── components/
├── styles/
├── index.jsx

3. ایجاد یک صفحه سفارشی

مرحله 1: کامپوننت صفحه را تعریف کنید
یک فایل جدید، به عنوان مثال author.jsx، در پوشه custom-templates ایجاد کنید.

import React from "react";
import { useParams } from "react-router-dom";

function Author() {
  const { userId } = useParams(); // Fetch route parameters if needed

  return (
    <div>
      <h1>Author Profileh1>
      <p>Welcome to the author page of user {userId}p>
    div>
  );
}

Author.serverFetch = async ({ fpi, router }) => {
  const { userId } = router.params;
  return apiCallToFetchAuthor({ userId });
};

export default Author;

4. ثبت صفحات سفارشی

صفحات سفارشی باید در سایت ثبت شوند custom-templates/index.jsx فایل با استفاده از مسیریابی پویا React Router.

مثال index.jsx:

import React from "react";
import { Route } from "react-router-dom";
import Author from "./author";
import About from "./about";

export default [
  <Route path="/c/author/:userId" element={<Author />} />,
  <Route path="/c/about" element={<About />} />,
];

5. اضافه کردن صفحات سفارشی به index.jsx

صفحات سفارشی را در موضوع ثبت کنید index.jsx فایل بوت استرپ

مثال index.jsx:

import customTemplates from "./custom-templates";

export default async () => {
  return {
    customTemplates,
    // other keys...
  };
};

6. واکشی داده ها با serverFetch

صفحات سفارشی می توانند داده ها را به صورت پویا و با استفاده از serverFetch روش استاتیک در کامپوننت این متد در حین رندر سمت سرور اجرا می شود.

مثال: استفاده از serverFetch

Author.serverFetch = async ({ fpi, router }) => {
  const { userId } = router.params;
  return fpi.users.fetchUserData({ userId });
};

7. بهترین شیوه ها

اجزای قابل استفاده مجدد:
اجزای مشترک را برای عملکرد ثابت در صفحات سفارشی ایجاد کنید.

رسیدگی به خطا:
اطمینان حاصل کنید که صفحات سفارشی داده های گم شده یا نادرست را به خوبی مدیریت می کنند.

بهینه سازی سئو:
متادیتا مانند عناوین و توضیحات برای صفحات سفارشی اضافه کنید.

8. موارد استفاده در زندگی واقعی

صفحات تبلیغاتی:
از صفحات سفارشی برای پیشنهادات با زمان محدود یا کمپین های ویژه استفاده کنید.

صفحات برند:
طرح‌بندی‌های منحصربه‌فرد برای نمایش برندهای خاص طراحی کنید.

فرم های سفارشی:
صفحاتی برای بازخورد، نظرسنجی یا سایر ورودی های سفارشی ایجاد کنید.

9. مزایای صفحات سفارشی

انعطاف پذیری کنترل شده: مسیرها زیر هستند /c/، اما بخش های بعد از /c/ کاملا قابل تنظیم هستند
مقیاس پذیری: ویژگی ها یا طرح های منحصر به فرد را ادغام کنید.
شخصی سازی: صفحات را برای نیازهای خاص کاربر یا تاجر تنظیم کنید.

نتیجه گیری:

صفحات سفارشی به توسعه دهندگان این امکان را می دهد که صفحات منحصر به فرد و هدفمند با مسیرهایی که در زیر تعریف شده اند ایجاد کنند /c/. با استفاده از serverFetch، می توانید داده ها را به صورت پویا بارگیری کنید و عملکرد این صفحات را افزایش دهید.

در آموزش بعدی، صفحات بازاریابی و ادغام آنها را بررسی خواهیم کرد. در جریان باشید!