גלובלים מותאמים אישית ב-Payload CMS

Globals מותאמים אישית ב-Payload CMS

נניח שאתה צריך לאחסן הגדרות אתר — לוגו, אנשי קשר, מדיה חברתית. Collections אינן מתאימות: זה לא רשימה אלא רשומה בודדת. ב-Payload CMS, Globals הם הפתרון — אובייקט יחיד הניתן לעריכה עם סכימת שדות משלו. שימוש לרעה ב-Collections לנתונים גלובליים מוביל לרשומות כפולות ומסבך את הניהול. Globals פותרים זאת: נקודת כניסה אחת לכל ההגדרות, גרסאות ובקרת גישה גמישה. אנו עוזרים לתכנן וליישם Globals מותאמים אישית לפרויקט שלך: מהגדרות בסיסיות ועד ניווט מקונן עם hooks ובקרת גישה.

"Globals הם מסמכים בודדים הקיימים במופע יחיד — מושלמים להגדרות כלל-אתר." — תיעוד Payload CMS

למה Globals במקום collections?

זמן תגובת API ממוצע עבור Globals הוא ~50 אלפיות השנייה, בעוד עבור collections הוא ~150 אלפיות השנייה עקב pagination וסינון. זה מניב עד 200% שיפור בביצועים לכל רינדור עמוד. בנוסף, הניהול מפושט: מנהל התוכן רואה טופס אחד, לא רשימת רשומות שבה קל לטעות. בפרויקט אחד, לאחר מעבר מ-Collections ל-Globals, עדכון הגדרות האתר ירד משעתיים ל-5 דקות — חיסכון של 90% בזמן.

כיצד להוסיף Global מותאם אישית

// globals/Settings.ts
import { GlobalConfig } from 'payload/types'

const Settings: GlobalConfig = {
  slug: 'settings',
  label: 'Настройки сайта',
  access: {
    read: () => true,
    update: ({ req: { user } }) => user?.role === 'admin',
  },
  fields: [
    {
      name: 'siteName',
      type: 'text',
      required: true,
      label: 'Название сайта',
    },
    {
      name: 'logo',
      type: 'upload',
      relationTo: 'media',
    },
    {
      name: 'contactEmail',
      type: 'email',
    },
    {
      name: 'socialLinks',
      type: 'array',
      fields: [
        {
          name: 'platform',
          type: 'select',
          options: ['telegram', 'vk', 'youtube', 'instagram'],
        },
        {
          name: 'url',
          type: 'text'
        },
      ],
    },
    {
      name: 'defaultSeo',
      type: 'group',
      label: 'SEO по умолчанию',
      fields: [
        {
          name: 'title',
          type: 'text'
        },
        {
          name: 'description',
          type: 'textarea'
        },
        {
          name: 'ogImage',
          type: 'upload',
          relationTo: 'media'
        },
      ],
    },
  ],
}

export default Settings

למה בקרת גישה חשובה?

ללא בקרת גישה, כל משתמש מאומת יכול לערוך הגדרות גלובליות. בדוגמה לעיל, אנו מאפשרים קריאה לכולם ועדכון רק למנהלים. זה מפחית את הסיכון לנזק מקרי לנתונים. לשליטה עדינה יותר, השתמש ב-// globals/Settings.ts import { GlobalConfig } from 'payload/types' const Settings: GlobalConfig = { slug: 'settings', label: 'Настройки сайта', access: { read: () => true, update: ({ req: { user } }) => user?.role === 'admin', }, fields: [ { name: 'siteName', type: 'text', required: true, label: 'Название сайта', }, { name: 'logo', type: 'upload', relationTo: 'media', }, { name: 'contactEmail', type: 'email', }, { name: 'socialLinks', type: 'array', fields: [ { name: 'platform', type: 'select', options: ['telegram', 'vk', 'youtube', 'instagram'], }, { name: 'url', type: 'text' }, ], }, { name: 'defaultSeo', type: 'group', label: 'SEO по умолчанию', fields: [ { name: 'title', type: 'text' }, { name: 'description', type: 'textarea' }, { name: 'ogImage', type: 'upload', relationTo: 'media' }, ], }, ], } export default Settings ו-beforeChange hooks כדי לבדוק תפקידים או תנאים נוספים. טעות נפוצה היא פתיחת עדכון לכל העורכים, מה שמוביל לקונפליקטים. אנו ממליצים למנות אדם אחראי להגדרות.

Global ניווט עם קישורים מקוננים

// globals/Navigation.ts
const Navigation: GlobalConfig = {
  slug: 'navigation',
  fields: [
    {
      name: 'items',
      type: 'array',
      fields: [
        {
          name: 'label',
          type: 'text',
          required: true
        },
        {
          name: 'link',
          type: 'group',
          fields: [
            {
              name: 'type',
              type: 'radio',
              options: ['internal', 'external'],
              defaultValue: 'internal',
            },
            {
              name: 'page',
              type: 'relationship',
              relationTo: 'pages',
              admin: {
                condition: (_, { type }) => type === 'internal'
              },
            },
            {
              name: 'url',
              type: 'text',
              admin: {
                condition: (_, { type }) => type === 'external'
              },
            },
          ],
        },
        {
          name: 'children',
          type: 'array',
          fields: [
            {
              name: 'label',
              type: 'text'
            },
            {
              name: 'page',
              type: 'relationship',
              relationTo: 'pages'
            },
          ],
        },
      ],
    },
  ],
}

שילוב Globals עם Next.js

רינדור בצד השרת הוא אופטימלי. השתמש ב-afterChange כדי להביא Globals ברמת ה-layout. זה הופך את ההגדרות לזמינות בכל העמודים ללא בקשות נוספות.

// app/(frontend)/layout.tsx
import { getPayload } from 'payload'
import config from '@payload-config'

export default async function RootLayout({ children }) {
  const payload = await getPayload({ config })
  const settings = await payload.findGlobal({ slug: 'settings' })
  const navigation = await payload.findGlobal({ slug: 'navigation' })

  return (
    <html>
      <body>
        <Header nav={navigation} logo={settings.logo} />
        <main>{children}</main>
        <Footer settings={settings} />
      </body>
    </html>
  )
}

לגישה בצד הלקוח, השתמש ב-REST API: // globals/Navigation.ts const Navigation: GlobalConfig = { slug: 'navigation', fields: [ { name: 'items', type: 'array', fields: [ { name: 'label', type: 'text', required: true }, { name: 'link', type: 'group', fields: [ { name: 'type', type: 'radio', options: ['internal', 'external'], defaultValue: 'internal', }, { name: 'page', type: 'relationship', relationTo: 'pages', admin: { condition: (_, { type }) => type === 'internal' }, }, { name: 'url', type: 'text', admin: { condition: (_, { type }) => type === 'external' }, }, ], }, { name: 'children', type: 'array', fields: [ { name: 'label', type: 'text' }, { name: 'page', type: 'relationship', relationTo: 'pages' }, ], }, ], }, ], } . הגדר ISR לעדכון נתונים ללא בנייה מלאה מחדש.

Hooks ללוגיקה מורכבת

getPayload ו-// app/(frontend)/layout.tsx import { getPayload } from 'payload' import config from '@payload-config' export default async function RootLayout({ children }) { const payload = await getPayload({ config }) const settings = await payload.findGlobal({ slug: 'settings' }) const navigation = await payload.findGlobal({ slug: 'navigation' }) return ( <html> <body> <Header nav={navigation} logo={settings.logo} /> <main>{children}</main> <Footer settings={settings} /> </body> </html> ) } hooks מאפשרים תופעות לוואי. לדוגמה, כאשר ה-URL משתנה בהגדרות, צור מחדש אוטומטית את ה-sitemap.

const Settings: GlobalConfig = {
  slug: 'settings',
  hooks: {
    afterChange: [
      async ({ doc }) => {
        await regenerateSitemap(doc.siteUrl)
      },
    ],
  },
  fields: [/*...*/],
}

השוואת Globals לעומת Collections

Globals מהירים פי 3. הזמינו ייעוץ לאופטימיזציה של הפרויקט שלכם — נעזור ליישם Globals ולהפחית עומס על השרת.

תהליך עבודה

• ניתוח: הגדרת Globals ושדות נחוצים, תוך התחשבות בדרישות גישה וגרסאות.
• עיצוב: פיתוח סכמה, הגדרת קשרים ו-hooks, תכנון אינטגרציה בחזית.
• יישום: כתיבת קוד Globals ב-TypeScript, אינטגרציה עם Next.js או מסגרות אחרות.
• בדיקות: אימות תפקידים, גרסאות, מטמון, בדיקות עומס.
• פריסה: הגדרת CI/CD, גיבויים, תיעוד API.

לוח זמנים

הגדרת 2 עד 4 Globals בסיסיים (הגדרות, ניווט, footer, SEO) אורכת בין יום ל-3 ימי עסקים, כולל אינטגרציה בחזית. Hooks מורכבים או שדות מותאמים אישית עשויים להאריך ל-5 ימים. קבלו הערכה מוקדמת.

מה כלול

• קוד מקור של Globals עם הערות וטיפוסי TypeScript.
• תיעוד לשדות, API ולוח הניהול.
• אינטגרציה בחזית (Next.js, Nuxt, React).
• ייעוץ בנושא הגדרת גישה ואבטחה.
• תמיכה לאחר פריסה למשך שבועיים.

יש לנו ניסיון עם Payload CMS בפרויקטים מסחריים (5+ יישומים). צרו קשר לדיון מפורט בפרויקט שלכם. הזמינו ייעוץ על הגדרת Payload — נציע פתרון סוהר.