Intlayer कंटेंट प्रबंधन प्रणाली (CMS) दस्तावेज़ीकरण

www.youtube.com

Open embedded page in fullscreen

Intlayer CMS एक एप्लिकेशन है जो आपको Intlayer प्रोजेक्ट की अपनी सामग्री को बाहरीकृत करने की अनुमति देता है।

इसके लिए, Intlayer ने 'दूरस्थ शब्दकोश' (distant dictionaries) की अवधारणा पेश की है।

विषय सूची

दूरस्थ शब्दकोश को समझना

Intlayer 'स्थानीय' (local) और 'दूरस्थ' (distant) शब्दकोश के बीच अंतर करता है।

• एक 'स्थानीय' शब्दकोश वह शब्दकोश होता है जिसे आपके Intlayer प्रोजेक्ट में घोषित किया गया है। जैसे कि किसी बटन की घोषणा फ़ाइल, या आपकी नेविगेशन बार। इस मामले में अपनी सामग्री को बाहरीकृत करना उचित नहीं है क्योंकि इस सामग्री को अक्सर बदलने की आवश्यकता नहीं होती।

• एक 'दूरस्थ' शब्दकोश वह शब्दकोश होता है जिसे Intlayer CMS के माध्यम से प्रबंधित किया जाता है। यह आपकी टीम को आपकी वेबसाइट पर सीधे आपकी सामग्री प्रबंधित करने की अनुमति देने के लिए उपयोगी हो सकता है, और साथ ही A/B परीक्षण सुविधाओं और SEO स्वचालित अनुकूलन का उपयोग करने का लक्ष्य रखता है।

विज़ुअल एडिटर बनाम CMS

Intlayer Visual संपादक एक उपकरण है जो आपको स्थानीय शब्दकोशों के लिए एक दृश्य संपादक में अपनी सामग्री प्रबंधित करने की अनुमति देता है। एक बार परिवर्तन करने के बाद, सामग्री को कोड-बेस में प्रतिस्थापित कर दिया जाएगा। इसका मतलब है कि एप्लिकेशन को पुनः बनाया जाएगा और नया सामग्री दिखाने के लिए पृष्ठ को पुनः लोड किया जाएगा।

इसके विपरीत, Intlayer CMS एक उपकरण है जो आपको दूरस्थ शब्दकोशों के लिए एक दृश्य संपादक में अपनी सामग्री प्रबंधित करने की अनुमति देता है। एक बार परिवर्तन करने के बाद, सामग्री आपके कोड-बेस को प्रभावित नहीं करेगी। और वेबसाइट स्वचालित रूप से बदली गई सामग्री प्रदर्शित करेगी।

एकीकरण

पैकेज को स्थापित करने के बारे में अधिक विवरण के लिए, नीचे संबंधित अनुभाग देखें:

Next.js के साथ एकीकरण

Next.js के साथ एकीकरण के लिए, कृपया सेटअप गाइड देखें।

Create React App के साथ एकीकरण

Create React App के साथ एकीकरण के लिए, कृपया सेटअप गाइड देखें।

Vite + React के साथ एकीकरण

Vite + React के साथ एकीकरण के लिए, कृपया सेटअप गाइड देखें।

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

Intlayer CMS में लॉग इन करने के लिए निम्नलिखित कमांड चलाएँ:

npx intlayer login

यह आपके डिफ़ॉल्ट ब्राउज़र को खोलेगा ताकि प्रमाणीकरण प्रक्रिया को पूरा किया जा सके और Intlayer सेवाओं का उपयोग करने के लिए आवश्यक क्रेडेंशियल (क्लाइंट ID और क्लाइंट सीक्रेट) प्राप्त किए जा सकें।

अपने Intlayer कॉन्फ़िगरेशन फ़ाइल में, आप CMS सेटिंग्स को अनुकूलित कर सकते हैं:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... अन्य कॉन्फ़िगरेशन सेटिंग्स
  editor: {
    /**
     * आवश्यक
     *
     * एप्लिकेशन का URL।
     * यह URL विज़ुअल एडिटर द्वारा लक्षित किया जाता है।
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,

    /**
     * आवश्यक
     *
     * एडिटर को सक्षम करने के लिए क्लाइंट ID और क्लाइंट सीक्रेट आवश्यक हैं।
     * ये उपयोगकर्ता की पहचान करने की अनुमति देते हैं जो सामग्री संपादित कर रहा है।
     * इन्हें Intlayer डैशबोर्ड - प्रोजेक्ट्स (https://app.intlayer.org/projects) में नया क्लाइंट बनाकर प्राप्त किया जा सकता है।
     * clientId: process.env.INTLAYER_CLIENT_ID,
     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
     */
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,

    /**
     * वैकल्पिक
     *
     * यदि आप Intlayer CMS को स्वयं होस्ट कर रहे हैं, तो आप CMS का URL सेट कर सकते हैं।
     *
     * Intlayer CMS का URL।
     * डिफ़ॉल्ट रूप से, इसे https://intlayer.org पर सेट किया गया है।
     */
    cmsURL: process.env.INTLAYER_CMS_URL,

    /**
     * वैकल्पिक
     *
     * यदि आप Intlayer CMS को स्वयं होस्ट कर रहे हैं, तो आप बैकएंड का URL सेट कर सकते हैं।
     *
     * Intlayer CMS का URL।
     * डिफ़ॉल्ट रूप से, इसे https://back.intlayer.org पर सेट किया गया है।
     */
    backendURL: process.env.INTLAYER_BACKEND_URL,
  },
};

export default config;

यदि आपके पास क्लाइंट ID और क्लाइंट सीक्रेट नहीं है, तो आप इन्हें Intlayer डैशबोर्ड - प्रोजेक्ट्स में नया क्लाइंट बनाकर प्राप्त कर सकते हैं।

सभी उपलब्ध पैरामीटर देखने के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।

CMS का उपयोग करना

अपनी कॉन्फ़िगरेशन पुश करें

Intlayer CMS को कॉन्फ़िगर करने के लिए, आप intlayer CLI कमांड्स का उपयोग कर सकते हैं।

npx intlayer config push

यदि आप अपनी intlayer.config.ts कॉन्फ़िगरेशन फ़ाइल में पर्यावरण चर (environment variables) का उपयोग करते हैं, तो आप --env तर्क का उपयोग करके इच्छित पर्यावरण निर्दिष्ट कर सकते हैं:

npx intlayer config push --env production

यह कमांड आपकी कॉन्फ़िगरेशन को Intlayer CMS पर अपलोड करता है।

एक शब्दकोश (डिक्शनरी) पुश करें

अपने लोकल शब्दकोशों को दूरस्थ शब्दकोश में बदलने के लिए, आप intlayer CLI कमांड्स का उपयोग कर सकते हैं।

npx intlayer dictionary push -d my-first-dictionary-key

यदि आप अपनी intlayer.config.ts कॉन्फ़िगरेशन फ़ाइल में पर्यावरण चर (environment variables) का उपयोग करते हैं, तो आप --env तर्क का उपयोग करके इच्छित पर्यावरण निर्दिष्ट कर सकते हैं:

npx intlayer dictionary push -d my-first-dictionary-key --env production

यह कमांड आपकी प्रारंभिक सामग्री शब्दकोशों को अपलोड करता है, जिससे वे Intlayer प्लेटफ़ॉर्म के माध्यम से असिंक्रोनस रूप से प्राप्त करने और संपादित करने के लिए उपलब्ध हो जाते हैं।

शब्दकोश संपादित करें

फिर आप अपने शब्दकोश को Intlayer CMS में देख और प्रबंधित कर सकेंगे।

@intlayer/api SDK के साथ प्रोग्रामेटिक एक्सेस

CLI और विजुअल एडिटर के अलावा, Intlayer @intlayer/api पैकेज में एक typed SDK प्रदान करता है। यह आपको CMS को एक headless content database के रूप में उपयोग करने देता है: आप प्रोजेक्ट प्राप्त कर सकते हैं, डिक्शनरी प्राप्त कर सकते हैं, और उन्हें सीधे अपने एप्लिकेशन, स्क्रिप्ट या CI pipeline से push या अपडेट कर सकते हैं।

SDK आपके लिए प्रमाणीकरण को हैंडल करता है। जब तक आपका clientId और clientSecret उपलब्ध हैं (आपकी Intlayer कॉन्फ़िगरेशन या environment में), यह स्वचालित रूप से एक OAuth2 एक्सेस टोकन प्राप्त करता है और रीफ्रेश करता है और हर अनुरोध को साइन करता है।

इंस्टॉलेशन

npm install @intlayer/api

यह कैसे काम करता है: authenticator + endpoints

SDK को दो अलग-अलग imports में विभाजित किया गया है, ताकि आपका bundle छोटा रहे:

1. createIntlayerCMS — एक हल्का authenticator बनाता है। यह केवल credentials और managed access token को ले जाता है; यह किसी विशिष्ट domain के बारे में कुछ नहीं जानता।
2. dictionaryEndpoint, projectEndpoint, … — प्रति-domain endpoint binders, प्रत्येक अपने subpath से imported (@intlayer/api/dictionary, @intlayer/api/project, …)। आप authenticator को उस endpoint पर पास करते हैं जिसकी आपको जरूरत है।

क्योंकि प्रत्येक endpoint अलग से imported है, आपका bundle केवल उन domains को शामिल करता है जिन्हें आप वास्तव में use करते हैं — dictionaryEndpoint को import करना कभी भी project, AI, या किसी अन्य domain client को pull नहीं करता।

import { createIntlayerCMS } from "@intlayer/api";

// कॉन्फ़िगरेशन वैकल्पिक है: जब छोड़ा जाता है, तो credentials को पढ़ा जाता है
// `@intlayer/config/built` से, जो INTLAYER_CLIENT_ID और
// INTLAYER_CLIENT_SECRET environment variables को resolve करता है।
export const cmsAuthenticator = createIntlayerCMS();

WARNING

CMS credentials (clientId / clientSecret) आपके content को write access प्रदान करते हैं। authenticator को केवल server side पर बनाएं (server actions, route handlers, scripts, CI)। इसे कभी भी client-side code में import न करें या अपने credentials को browser में expose न करें।

यदि आप build-time configuration पर निर्भर नहीं करना पसंद करते हैं, तो credentials को explicitly पास करें:

import { createIntlayerCMS } from "@intlayer/api";

export const cmsAuthenticator = createIntlayerCMS({
  editor: {
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
    // वैकल्पिक, self-hosted backends के लिए:
    // backendURL: process.env.INTLAYER_BACKEND_URL,
  },
});

Intlayer Dashboard - Projects में एक नई access key बनाकर अपने credentials प्राप्त करें।

Projects को Fetch करें

import { createIntlayerCMS } from "@intlayer/api";
import { projectEndpoint } from "@intlayer/api/project";

const cmsAuthenticator = createIntlayerCMS();

// अपने credentials के साथ accessible projects को list करें
const { data: projects } =
  await projectEndpoint(cmsAuthenticator).getProjects();

// चुने गए project की aggregated localization insights को read करें
const { data: insights } =
  await projectEndpoint(cmsAuthenticator).getProjectInsights();

शब्दकोश प्राप्त करें

import { createIntlayerCMS } from "@intlayer/api";
import { dictionaryEndpoint } from "@intlayer/api/dictionary";

const cmsAuthenticator = createIntlayerCMS();

// प्रोजेक्ट के हर दूरस्थ शब्दकोश को सूचीबद्ध करें
const { data: dictionaries } =
  await dictionaryEndpoint(cmsAuthenticator).getDictionaries();

// या कुंजी द्वारा एक एकल शब्दकोश प्राप्त करें
const { data: dictionary } = await dictionaryEndpoint(
  cmsAuthenticator
).getDictionary("my-first-dictionary-key");

शब्दकोश को Push और Update करें

सामग्री वापस लिखने के लिए CMS को डेटाबेस के रूप में उपयोग करें:

import { createIntlayerCMS } from "@intlayer/api";
import { dictionaryEndpoint } from "@intlayer/api/dictionary";

const cmsAuthenticator = createIntlayerCMS();

// एक नया शब्दकोश बनाएं
await dictionaryEndpoint(cmsAuthenticator).addDictionary({
  key: "my-first-dictionary-key",
  content: { title: "Hello world" },
});

// शब्दकोशों का एक बैच Upsert करें (एक कॉल में उन्हें बनाएं या अपडेट करें)
await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
  { key: "home", content: { title: "Home" } },
  { key: "about", content: { title: "About" } },
]);

// एक मौजूदा शब्दकोश को अपडेट करें
await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
  id: "<dictionary-id>",
  key: "home",
  content: { title: "Updated title" },
});

टिप: बंधे हुए endpoint को दोबारा उपयोग करें ताकि आपको अपने आप को दोहराना न पड़े:

typescript

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

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

const dictionary = dictionaryEndpoint(cmsAuthenticator);
await dictionary.pushDictionaries([myDictionary]);
const { data } = await dictionary.getDictionaries();

एक single method निकालना

हर endpoint method पहले से authenticated है और standalone है (यह अपना token handling करता है), इसलिए आप एक को निकाल सकते हैं और इसे around pass कर सकते हैं — उदाहरण के लिए इसे dependency के रूप में inject करने के लिए:

import { createIntlayerCMS } from "@intlayer/api";
import { dictionaryEndpoint } from "@intlayer/api/dictionary";

const dictionary = dictionaryEndpoint(createIntlayerCMS());

// पहले से authenticated — हर call पर token को automatically refresh करता है
export const pushDictionaries = dictionary.pushDictionaries;

// उपयोग
await pushDictionaries([{ key: "home", content: { title: "Home" } }]);

लाइव सिंक

लाइव सिंक आपकी ऐप को रनटाइम पर CMS सामग्री परिवर्तनों को प्रतिबिंबित करने देता है। पुनर्निर्माण या पुनः तैनाती की आवश्यकता नहीं होती। जब सक्षम किया जाता है, तो अपडेट्स लाइव सिंक सर्वर को स्ट्रीम किए जाते हैं जो आपके एप्लिकेशन द्वारा पढ़े जाने वाले शब्दकोशों को ताज़ा करता है।

पूर्ण सेटअप गाइड (सक्षम करना, Live Sync सर्वर शुरू करना, स्थानीय विकास वर्कफ़्लो, और सीमाओं) के लिए, Live Sync दस्तावेज़ देखें।

स्व-होस्टिंग (Self-Hosting)

Intlayer पूरी तरह से आपके अपने इंफ्रास्ट्रक्चर पर चल सकता है। एक सिंगल कमांड Docker Compose के साथ पूरे स्टैक (डैशबोर्ड, API, डेटाबेस, ऑब्जेक्ट स्टोरेज, और ईमेल) को बूटस्ट्रैप करती है:

curl -fsSL https://intlayer.org/install.sh | sh

पूर्ण सेटअप गाइड, एनवायरनमेंट वेरिएबल रेफरेंस, अपग्रेड निर्देश, और बैकअप/रिस्टोर प्रक्रियाओं के लिए, स्व-होस्टिंग गाइड देखें।

डिबग

यदि आपको CMS के साथ कोई समस्या आती है, तो निम्नलिखित जांचें:

• एप्लिकेशन चल रहा है।

• editor कॉन्फ़िगरेशन आपके Intlayer कॉन्फ़िगरेशन फ़ाइल में सही ढंग से सेट है।
  • आवश्यक फ़ील्ड:
• एप्लिकेशन URL को उस URL से मेल खाना चाहिए जिसे आपने संपादक कॉन्फ़िगरेशन (applicationURL) में सेट किया है।

• CMS URL

• सुनिश्चित करें कि प्रोजेक्ट कॉन्फ़िगरेशन Intlayer CMS में पुश किया गया है।

• विज़ुअल एडिटर आपकी वेबसाइट को प्रदर्शित करने के लिए एक iframe का उपयोग करता है। सुनिश्चित करें कि आपकी वेबसाइट की कंटेंट सिक्योरिटी पॉलिसी (CSP) CMS URL को frame-ancestors के रूप में अनुमति देती है (डिफ़ॉल्ट रूप से 'https://intlayer.org')। किसी भी त्रुटि के लिए संपादक कंसोल की जांच करें।