Intlayer के साथ अपनी Astro + Lit साइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

विषय-सूची

विकल्पों पर इन्टलेयर क्यों?

एस्ट्रो-आई18एन या आई18नेक्स्ट जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

Astro + Lit में Intlayer को कॉन्फ़िगर करने के लिए चरण-दर-चरण मार्गदर्शिका

GitHub पर एप्लिकेशन टेम्पलेट देखें।

1. 1

   निर्भरताएँ स्थापित करें

   अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:

   bash

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

   कोड कॉपी करें

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

   npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   
   npx intlayer init
   

   यदि आप अपनी सामग्री का उपयोग स्ट्रिंग एट्रिब्यूट में करना चाहते हैं, जैसे कि alt, title, href, aria-label, आदि, तो आप फ़ंक्शन के मान का उपयोग कर सकते हैं, जैसे:

   html

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

   कोड कॉपी करें

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

   <img src="{content.image.src.value}" alt="{content.image.value}" />
   <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
   <img src="{String(content.image.src)}" alt="{String(content.image)}" />
   

   bash

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

   कोड कॉपी करें

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

   npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   

   • intlayer मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपाइलेशन और CLI कमांड के लिए i18n टूल प्रदान करता है।

   • astro-intlayer Intlayer को Vite बंडलर के साथ जोड़ने के लिए Astro एकीकरण प्लगइन, साथ ही उपयोगकर्ता की पसंदीदा भाषा का पता लगाने, कुकीज़ प्रबंधित करने और URL रीडायरेक्ट को संभालने के लिए मिडलवेयर शामिल है।

   • lit तेज़, हल्के Web Components बनाने के लिए मुख्य Lit पैकेज।

   • lit-intlayer Lit अनुप्रयोगों में Intlayer को एकीकृत करने के लिए पैकेज। यह ReactiveController आधारित हुक (useIntlayer, useLocale, आदि) प्रदान करता है जो भाषा बदलने पर LitElement को स्वतः पुन: रेंडर करने का निर्देश देते हैं।

   • @astrojs/lit आधिकारिक Astro एकीकरण जो Astro पृष्ठों के भीतर Lit custom elements के उपयोग की अनुमति देता है।

2. 2

   अपना प्रोजेक्ट कॉन्फ़िगर करें

   अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:

   intlayer.config.ts

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

   कोड कॉपी करें

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

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         Locales.HINDI,
         // आपकी अन्य भाषाएँ
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्ट, कुकी नाम, सामग्री घोषणाओं का स्थान और एक्सटेंशन कॉन्फ़िगर कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।

3. 3

   अपने Astro कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

   अपने Astro कॉन्फ़िगरेशन में intlayer प्लगइन और Lit एकीकरण जोड़ें।

   astro.config.ts

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

   कोड कॉपी करें

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

   // @ts-check
   
   import { intlayer } from "astro-intlayer";
   import lit from "@astrojs/lit";
   import { defineConfig } from "astro/config";
   
   // https://astro.build/config
   export default defineConfig({
     integrations: [intlayer(), lit()],
   });
   

   intlayer() एकीकरण प्लगइन का उपयोग Intlayer को Astro के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के उत्पादन को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Astro एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है और प्रदर्शन को अनुकूलित करने के लिए उपनाम (aliases) प्रदान करता है।

   lit() एकीकरण Astro पृष्ठों के भीतर Lit custom elements के उपयोग की अनुमति देता है।

4. 4

   अपनी सामग्री घोषित करें

   अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:

   src/components/lit/app.content.ts

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

   कोड कॉपी करें

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

   import { t, type Dictionary } from "intlayer";
   
   const litDemoContent = {
     key: "lit-demo",
     content: {
       greeting: t({
         en: "Hello World",
         fr: "Bonjour le monde",
         es: "Hola mundo",
         hi: "नमस्ते दुनिया",
       }),
       description: t({
         en: "Welcome to my multilingual Astro + Lit site.",
         fr: "Bienvenue sur mon site Astro + Lit multilingue.",
         es: "Bienvenido a mi sitio Astro + Lit multilingüe.",
         hi: "मेरी बहुभाषी Astro + Lit साइट पर आपका स्वागत है।",
       }),
     },
   } satisfies Dictionary;
   
   export default litDemoContent;
   

   सामग्री घोषणाओं को आपके एप्लिकेशन में कहीं भी परिभाषित किया जा सकता है, बशर्ते वे contentDir (डिफ़ॉल्ट रूप से ./src) में शामिल हों और सामग्री घोषणा फ़ाइल एक्सटेंशन (डिफ़ॉल्ट रूप से .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) से मेल खाती हों।

   अधिक जानकारी के लिए, सामग्री घोषणा दस्तावेज़ देखें।

5. 5

   Astro में सामग्री का उपयोग करना

   आप सीधे अपने .astro फ़ाइलों में intlayer से निर्यात किए गए मुख्य सहायकों का उपयोग करके शब्दकोशों का उपयोग कर सकते हैं। आपको हर पृष्ठ पर SEO मेटाडेटा (जैसे hreflang और कैनोनिकल लिंक) भी जोड़ना चाहिए। Lit custom elements को एक क्लाइंट <script> के माध्यम से आयात किया जाता है और बॉडी में रखा जाता है।

   src/pages/[...locale]/index.astro

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

   कोड कॉपी करें

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

   ---
   import {
     getIntlayer,
     getLocaleFromPath,
     getLocalizedUrl,
     getHTMLTextDir,
     getPrefix,
     localeMap,
     defaultLocale,
     type LocalesValues,
   } from "intlayer";
   
   export const getStaticPaths = () => {
     return localeMap(({ locale }) => ({
       params: { locale: getPrefix(locale).localePrefix },
     }));
   };
   
   const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
   const { greeting } = getIntlayer("lit-demo", locale);
   ---
   
   <!doctype html>
   <html lang={locale} dir={getHTMLTextDir(locale)}>
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       <title>{greeting}</title>
   
       <!-- कैनोनिकल लिंक -->
       <link
         rel="canonical"
         href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
       />
   
       <!-- Hreflang लिंक्स -->
       {
         localeMap(({ locale: mapLocale }) => (
           <link
             rel="alternate"
             hreflang={mapLocale}
             href={new URL(
               getLocalizedUrl(Astro.url.pathname, mapLocale),
               Astro.site
             )}
           />
         ))
       }
   
       <link
         rel="alternate"
         hreflang="x-default"
         href={new URL(
           getLocalizedUrl(Astro.url.pathname, defaultLocale),
           Astro.site
         )}
       />
     </head>
     <body>
       <!-- Lit custom element - सर्वर-पहचाने गए लोकेल को एक प्रॉपर्टी के रूप में प्राप्त करता है -->
       <lit-demo locale={locale}></lit-demo>
     </body>
   </html>
   
   <script>
     import "../../components/lit/LitDemo";
   </script>
   

   यदि आप अपनी content को string attribute में उपयोग करना चाहते हैं, जैसे alt, title, href, aria-label, आदि, तो आप function के value का उपयोग कर सकते हैं, जैसे:

   html

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

   कोड कॉपी करें

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

   <img src="{content.image.src.value}" alt="{content.image.value}" />
   <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
   <img src="{String(content.image.src)}" alt="{String(content.image)}" />
   

   रूटिंग सेटअप पर नोट: आपके द्वारा उपयोग की जाने वाली निर्देशिका संरचना intlayer.config.ts में middleware.routing सेटिंग पर निर्भर करती है:

   • prefix-no-default (डिफ़ॉल्ट): डिफ़ॉल्ट भाषा को रूट पर रखता है (कोई उपसर्ग नहीं) और अन्य को उपसर्ग देता है। सभी मामलों को पकड़ने के लिए [...locale] का उपयोग करें।
   • prefix-all: सभी URL को भाषा उपसर्ग प्राप्त होता है। यदि आपको रूट को अलग से संभालने की आवश्यकता नहीं है तो आप मानक [locale] का उपयोग कर सकते हैं।
   • search-param या no-prefix: किसी भाषा निर्देशिका की आवश्यकता नहीं है। भाषा को क्वेरी पैरामीटर या कुकीज़ के माध्यम से संभाला जाता है।

6. 6

   एक Lit Custom Element घटक बनाएँ

   एक Lit custom element बनाएँ। क्लाइंट-साइड अनुवाद सिंगलटन को इनिशियलाइज़ करने के लिए सर्वर-आधारित locale एट्रिब्यूट (attribute) का उपयोग करके connectedCallback में installIntlayer को कॉल करें।

   src/components/lit/LitDemo.ts

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

   कोड कॉपी करें

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

   import { LitElement, html } from "lit";
   import { installIntlayer, useIntlayer, useLocale } from "lit-intlayer";
   import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";
   
   class LitDemo extends LitElement {
     static properties = {
       locale: { type: String },
     };
   
     locale: LocalesValues = "en" as LocalesValues;
   
     private _content = useIntlayer(this, "lit-demo");
     private _localeCtrl = useLocale(this, {
       onLocaleChange: (newLocale: LocalesValues) => {
         window.location.href = getLocalizedUrl(
           window.location.pathname,
           newLocale
         );
       },
     });
   
     override connectedCallback() {
       super.connectedCallback();
       // सर्वर-पहचाने गए लोकेल के साथ इनिशियलाइज़ करें
       installIntlayer({ locale: this.locale as any });
     }
   
     override render() {
       const { greeting, description } = this._content;
       const {
         locale: currentLocale,
         availableLocales,
         setLocale,
       } = this._localeCtrl;
   
       return html`
         <div>
           <h1>${greeting}</h1>
           <p>${description}</p>
           <!-- LitElement के भीतर रेंडर किया गया भाषा स्विचर -->
           <div class="locale-switcher">
             <span class="switcher-label">भाषा बदलें:</span>
             <div class="locale-buttons">
               ${availableLocales.map(
                 (localeItem) => html`
                   <button
                     class="locale-btn ${
                       localeItem === currentLocale ? "active" : ""
                     }"
                     ?disabled=${localeItem === currentLocale}
                     @click=${() => setLocale(localeItem)}
                   >
                     <span class="ls-own-name">${getLocaleName(localeItem)}</span>
                     <span class="ls-current-name"
                       >${getLocaleName(localeItem, currentLocale)}</span
                     >
                     <span class="ls-code">${localeItem.toUpperCase()}</span>
                   </button>
                 `
               )}
             </div>
           </div>
         </div>
       `;
     }
   }
   
   customElements.define("lit-demo", LitDemo);
   

   locale एट्रिब्यूट को Astro पृष्ठ (सर्वर पहचान) से पारित किया जाता है और connectedCallback में installIntlayer को इनिशियलाइज़ करने के लिए उपयोग किया जाता है, जो घटक के भीतर सभी ReactiveController हुक के लिए प्रारंभिक भाषा सेट करता है।

   useIntlayer को एक ReactiveController के रूप में पंजीकृत किया गया है। भाषा बदलने पर यह ऑटोमैटिक रूप से घटक को पुन: रेंडर (re-render) करने का निर्देश देता है, इसलिए किसी अतिरिक्त सदस्यता तर्क की आवश्यकता नहीं है।

7. 7

   एक भाषा स्विचर जोड़ना

   भाषा स्विचिंग कार्यक्षमता सीधे Lit custom element की render() विधि के भीतर एकीकृत है (ऊपर चरण 6 देखें)। यह lit-intlayer से useLocale का उपयोग करता है और उपयोगकर्ता द्वारा एक नई भाषा चुनने पर स्थानीयकृत URL पर नेविगेट करता है:

   src/components/lit/LitDemo.ts

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

   कोड कॉपी करें

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

   // LitElement क्लास के भीतर, चरण 6 में useLocale सेटअप के बाद:
   
   private _localeCtrl = useLocale(this, {
     onLocaleChange: (newLocale: LocalesValues) => {
       // भाषा परिवर्तन पर स्थानीयकृत URL पर नेविगेट करें
       window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
     },
   });
   
   override render() {
     const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;
   
     return html`
       <div class="locale-switcher">
         <span class="switcher-label">भाषा बदलें:</span>
         <div class="locale-buttons">
           ${availableLocales.map(
             (localeItem) => html`
               <button
                 class="locale-btn ${localeItem === currentLocale ? "active" : ""}"
                 ?disabled=${localeItem === currentLocale}
                 @click=${() => setLocale(localeItem)}
               >
                 <span class="ls-own-name">${getLocaleName(localeItem)}</span>
                 <span class="ls-current-name">${getLocaleName(localeItem, currentLocale)}</span>
                 <span class="ls-code">${localeItem.toUpperCase()}</span>
               </button>
             `
           )}
         </div>
       </div>
     `;
   }
   

   Lit प्रतिक्रियात्मकता पर नोट: useLocale एक ReactiveController लौटाता है। जब setLocale को कॉल किया जाता है, तो कंट्रोलर ऑटोमैटिक रूप से पुन: रेंडर का निर्देश देता है, जिससे मैन्युअल DOM हेरफेर के बिना सक्रिय बटन स्थिति अपडेट हो जाती है।

   निरंतरता पर नोट: window.location.href के माध्यम से रीडायरेक्ट करने के लिए onLocaleChange का उपयोग यह सुनिश्चित करता है कि नया भाषाई URL देखा जाए, जिससे Intlayer मिडलवेयर भाषा कुकी सेट कर सके और भविष्य की यात्राओं में उपयोगकर्ता की वरीयता को याद रख सके।

8. 8

   Sitemap और Robots.txt

   Intlayer आपकी स्थानीयकृत साइटमैप और robots.txt फ़ाइलों को गतिशील रूप से बनाने के लिए उपयोगिताओं की पेशकश करता है।

   साइटमैप (Sitemap)

   Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.

   The Intlayer generated sitemap supports the xhtml:link namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., /about, /about?lang=fr, and /about?lang=es). This ensures search engines correctly index and serve the right language version to the right audience.

   अपने सभी स्थानीयकृत रूट सहित साइटमैप उत्पन्न करने के लिए src/pages/sitemap.xml.ts बनाएँ।

   src/pages/sitemap.xml.ts

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

   कोड कॉपी करें

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

   import type { APIRoute } from "astro";
   import { generateSitemap, type SitemapUrlEntry } from "intlayer";
   
   const pathList: SitemapUrlEntry[] = [
     { path: "/", changefreq: "daily", priority: 1.0 },
     { path: "/about", changefreq: "monthly", priority: 0.7 },
   ];
   
   const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
   
   export const GET: APIRoute = async ({ site }) => {
     const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
   
     return new Response(xmlOutput, {
       headers: { "Content-Type": "application/xml" },
     });
   };
   

   Robots.txt

   खोज इंजन क्रॉलिंग को नियंत्रित करने के लिए src/pages/robots.txt.ts बनाएँ।

   src/pages/robots.txt.ts

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

   कोड कॉपी करें

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

   import type { APIRoute } from "astro";
   import { getMultilingualUrls } from "intlayer";
   
   const getAllMultilingualUrls = (urls: string[]) =>
     urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
   
   const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
   
   export const GET: APIRoute = ({ site }) => {
     const robotsTxt = [
       "User-agent: *",
       "Allow: /",
       ...disallowedPaths.map((path) => `Disallow: ${path}`),
       "",
       `Sitemap: ${new URL("/sitemap.xml", site).href}`,
     ].join("\n");
   
     return new Response(robotsTxt, {
       headers: { "Content-Type": "text/plain" },
     });
   };
   

9. 1

   अपने घटकों की सामग्री निकालें

   वैकल्पिक

   यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।

   इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।

   इसे सेट करने के लिए, आप अपनी intlayer.config.ts फ़ाइल में एक compiler अनुभाग जोड़ सकते हैं:

   intlayer.config.ts

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

   कोड कॉपी करें

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

   import { type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     // ... आपका शेष कॉन्फ़िगरेशन
     compiler: {
       /**
        * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
        */
       enabled: true,
   
       /**
        * आउटपुट फ़ाइलों का पथ परिभाषित करता है
        */
       output: ({ fileName, extension }) => `./${fileName}${extension}`,
   
       /**
        * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।
        */
       saveComponents: false,
   
       /**
        * शब्दकोश कुंजी उपसर्ग
        */
       dictionaryKeyPrefix: "",
     },
   };
   
   export default config;
   

   निकालें कमांडबैबेल कंपाइलर

   अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ

   bash

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

   कोड कॉपी करें

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

   npx intlayer extract
   

   v9 के बाद से, intlayerCompiler को intlayer प्लगइन में शामिल किया गया है। इसलिए आपको इसे manually जोड़ने की आवश्यकता नहीं है।

   intlayerCompiler प्लगइन शामिल करने के लिए अपनी vite.config.ts अपडेट करें:

   vite.config.ts

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

   कोड कॉपी करें

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

   import { defineConfig } from "vite";
   import { intlayer } from "vite-intlayer";
   
   export default defineConfig({
     plugins: [
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

   bash

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

   कोड कॉपी करें

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

   npm run build # या npm run dev
   

   ---

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

Intlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है। यदि आप डेकोरेटर (decorator) सिंटैक्स का उपयोग करते हैं, तो सुनिश्चित करें कि आप अपने कंपाइलर विकल्पों में experimentalDecorators को सक्षम करें।

सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।

{
  compilerOptions: {
    // ...
    experimentalDecorators: true,
    useDefineForClassFields: false, // Lit में डेकोरेटर समर्थन के लिए आवश्यक
  },
  "include": [
    // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन
    ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकारों को शामिल करें
  ],
}

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

Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।

ऐसा करने के लिए, अपनी .gitignore फ़ाइल में निम्न निर्देश जोड़ें:

# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
.intlayer

VS Code एक्सटेंशन

Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code एक्सटेंशन स्थापित कर सकते हैं।

VS Code Marketplace से इंस्टॉलेशन

यह एक्सटेंशन प्रदान करता है:

• अनुवाद कुंजियों के लिए ऑटो-पूर्णता।
• अनुपलब्ध अनुवादों के लिए वास्तविक समय त्रुटि पहचान।
• अनूदित सामग्री का इनलाइन पूर्वावलोकन।
• आसानी से अनुवाद बनाने और अपडेट करने के लिए त्वरित क्रियाएं।

एक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, VS Code एक्सटेंशन दस्तावेज़ देखें।

अपने ज्ञान को और गहरा करें

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