Connect your website

CMS API आपकी वेबसाइट को Profound CMS से प्रकाशित सामग्री प्राप्त करने और प्रदर्शित करने की अनुमति देता है। आप इसे दस्तावेज़ीकरण पृष्ठों, विपणन पृष्ठों, ब्लॉग, सहायता केंद्रों या किसी अन्य सामग्री-चालित अनुभव को संचालित करने के लिए उपयोग कर सकते हैं।

सामान्य एकीकरण में तीन हिस्से होते हैं:

1. अपनी CMS कनेक्शन कॉन्फ़िगर करें
2. प्रकाशित सामग्री प्राप्त करें
3. अपने अनुप्रयोग में सामग्री रेंडर करें

कॉन्फ़िगरेशन

अपने अनुप्रयोग को CMS से जोड़ने के लिए, अपना CMS API URL, वेबसाइट ID और API कुंजी प्रदान करें।

const cmsConfig = {
  cmsUrl: 'https://cms.dev.tryprofoun.com',
  websiteId: 'your-website-id',
  apiKey: process.env.PROFOUND_API_KEY,
};

पर्यावरण के बीच बदलने वाले मानों के लिए पर्यावरण चर का उपयोग करें:

NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_WEBSITE_ID=your-website-id
PROFOUND_API_KEY=your-api-key

क्लाइंट-साइड कोड में निजी API कुंजियों को उजागर न करें। API कुंजियों का उपयोग अपने सर्वर, बिल्ड प्रक्रिया या बैकएंड रूट्स में करें।

सामग्री प्राप्त करें

CMS में सामग्री स्कीमा के आधार पर व्यवस्थित होती है। उदाहरण के लिए, आपके प्रोजेक्ट में post, category, page या section जैसे स्कीमा हो सकते हैं।

सामग्री प्राप्त करने के लिए स्कीमा नाम का उपयोग करें:

const posts = await cms.schema('post').fetchAll();

ID द्वारा एकल दस्तावेज़ प्राप्त करने के लिए:

const post = await cms.schema('post').fetchSingleById('document-id');

स्थानीयकृत सामग्री प्राप्त करने के लिए, स्कीमा के अनुवादित संस्करण का अनुरोध करें:

const frenchPost = await cms
  .schema('post')
  .translation('fr')
  .fetchSingleById('document-id');

रूट रेंडर करें

वे वेबसाइटें जो CMS द्वारा प्रबंधित पृष्ठों का उपयोग करती हैं, उनके लिए आप वर्तमान URL पथ के आधार पर सामग्री प्राप्त कर सकते हैं।

const route = await cms.route.getByPath({
  websiteId: 'your-website-id',
  path: '/docs/getting-started',
});

रूट प्रतिक्रिया उस पृष्ठ और रेंडर किए जाने वाले ब्लॉक्स की पहचान करती है। इसके बाद आपका अनुप्रयोग ब्लॉक्स प्राप्त कर सकता है और उन्हें अपने स्वयं के घटकों के साथ रेंडर कर सकता है।

const blocks = await cms.block.getByIds({
  websiteId: 'your-website-id',
  ids: route.blockIds,
});

उदाहरण: डॉक्युमेंटेशन पृष्ठ रेंडर करें

async function getDocsPage(path: string) {
  const route = await cms.route.getByPath({
    websiteId: process.env.WEBSITE_ID,
    path,
  });

  const blocks = await cms.block.getByIds({
    websiteId: process.env.WEBSITE_ID,
    ids: route.blockIds,
  });

  return {
    title: route.label,
    path: route.path,
    blocks,
  };
}

आप लौटाए गए ब्लॉक्स का उपयोग अपने अनुप्रयोग के कंपोनेंट सिस्टम के माध्यम से पृष्ठ रेंडर करने के लिए कर सकते हैं।

कैशिंग

प्रकाशित CMS सामग्री को कैश करना सुरक्षित है। अधिकांश वेबसाइटों के लिए, API प्रतिक्रियाओं को कुछ समय के लिए कैश करें और जब सामग्री बदलती है तो उन्हें पुनर्मान्य करें।

एक सामान्य सेटअप यह है:

const content = await cache(
  () => cms.schema('post').fetchAll(),
  {
    revalidate: 60,
    tags: ['cms-posts'],
  }
);

सिफारिशित कैश व्यवहार:

• प्रकाशित रीड्स को कैश करें।
• अक्सर अपडेट की जाने वाली सामग्री के लिए छोटे कैश विंडो का उपयोग करें।
• यदि आपका फ्रेमवर्क ऑन-डिमांड अमान्यकरण का समर्थन करता है तो कैश टैग्स का उपयोग करें।
• प्रीव्यू या ड्राफ्ट सामग्री को कैश करने से बचें।

प्रीव्यू मोड

प्रीव्यू मोड संपादकों को प्रकाशित होने से पहले अप्रकाशित परिवर्तनों को देखने की अनुमति देता है।

एक सामान्य पैटर्न अलग प्रीव्यू रूट का उपयोग करना है, उदाहरण के लिए:

/docs/getting-started
/cms-preview/docs/getting-started

प्रोडक्शन पृष्ठों को केवल प्रकाशित सामग्री ही प्राप्त करनी चाहिए। प्रीव्यू पृष्ठ प्रीव्यू पैरामीटर्स स्वीकार कर सकते हैं, जैसे:

?edit_mode=true

प्रीव्यू रूट्स आमतौर पर डायनेमिक होने चाहिए और उन्हें स्थैतिक रूप से कैश नहीं करना चाहिए।

त्रुटि प्रबंधन

बिल्ड या अनुरोध के दौरान CMS सामग्री उपलब्ध नहीं हो सकती। आपके अनुप्रयोग को इसे सुव्यवस्थित तरीके से संभालना चाहिए।

सुझाई गई व्यवहार शैली:

• जब कोई रूट मौजूद न हो तो 404 लौटाएँ।
• जब वैकल्पिक नेविगेशन सामग्री लोड न हो सके तो एक खाली सूची लौटाएँ।
• सर्वर-साइड फ़ेच त्रुटियों को लॉग करें।
• आंतरिक API त्रुटियों को आगंतुकों के सामने उजागर करने से बचें।

उदाहरण:

async function getPost(id: string) {
  try {
    return await cms.schema('post').fetchSingleById(id);
  } catch (error) {
    console.error('CMS पोस्ट प्राप्त करने में विफल', error);
    return null;
  }
}

सुरक्षा

API कुंजियों को निजी रखें और उनका उपयोग केवल सर्वर पर करें। ब्राउज़र बंडल्स या सार्वजनिक JavaScript में निजी क्रेडेंशियल्स शामिल न करें।

सार्वजनिक पर्यावरण चर का उपयोग केवल गैर-संवेदनशील मानों के लिए करें, जैसे:

• CMS सार्वजनिक URL
• वेबसाइट ID
• स्थानीय कॉन्फ़िगरेशन

निजी पर्यावरण चर का उपयोग इन के लिए करें:

• API कुंजियाँ
• प्रीव्यू टोकन
• एडमिन क्रेडेंशियल्स
• डिप्लॉयमेंट सीक्रेट्स

सारांश

जब आपकी वेबसाइट को संरचित सामग्री प्राप्त करनी हो, CMS-प्रबंधित रूट्स रेंडर करने हों या संपादक प्रीव्यू वर्कफ़्लो का समर्थन करना हो, तो CMS API का उपयोग करें।

एक मानक एकीकरण को चाहिए कि वह:

• CMS URL, वेबसाइट ID और API कुंजी कॉन्फ़िगर करे।
• स्कीमा द्वारा दस्तावेज़ प्राप्त करे।
• रूट पथ द्वारा पृष्ठ प्राप्त करे।
• CMS ब्लॉक्स को अपने घटकों के साथ रेंडर करे।
• प्रकाशित सामग्री को कैश करे।
• प्रीव्यू सामग्री को डायनेमिक रखे।
• निजी क्रेडेंशियल्स को सर्वर पर सुरक्षित रखे।