Author:
    Aymeric PINEAU
    Creation:2026-01-20Last update:2026-01-22

    HTML सामग्री / Intlayer में HTML

    Intlayer HTML सामग्री का समर्थन करता है, जिससे आप अपने dictionaries के भीतर समृद्ध, संरचित सामग्री एम्बेड कर सकते हैं। इस सामग्री को standard HTML टैग्स के साथ रेंडर किया जा सकता है या रनटाइम पर कस्टम कंपोनेंट्स से बदल दिया जा सकता है।

    HTML कंटेंट घोषित करना

    आप html फ़ंक्शन का उपयोग करके या सीधे एक स्ट्रिंग के रूप में HTML कंटेंट घोषित कर सकते हैं।

    HTML कंटेंट को स्पष्ट रूप से घोषित करने के लिए html फ़ंक्शन का उपयोग करें। यह सुनिश्चित करता है कि मानक टैग सही तरीके से मैप किए जाएँ, भले ही स्वचालित पहचान अक्षम हो।

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // कॉन्फ़िग फ़ाइल में सेट किया जा सकता है
content: {
  myHtmlContent:  html("<p>हैलो <strong>वर्ल्ड</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

    यदि स्ट्रिंग में सामान्य HTML टैग शामिल हैं (उदाहरण के लिए <p>, <div>, <strong> आदि), तो Intlayer इसे स्वतः रूप से परिवर्तित कर देगा।

    htmlDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // कॉन्फ़िग फ़ाइल में सेट किया जा सकता है
content: {
  myHtmlContent:  "<p>हैलो <strong>वर्ल्ड</strong></p>",
},
};

    HTML सामग्री फ़ाइलों से आयात करें। ध्यान दें कि वर्तमान में file() फ़ंक्शन एक स्ट्रिंग लौटाता है, जिसे टैग शामिल होने पर स्वतः HTML के रूप में पहचाना जाएगा।

    htmlDictionary.content.ts
    import { html, file, t } from "intlayer";

export default {
key: "app",
content: {
  content: t({
    hi: html(file("./content.hi.html")),
    en: html(file("./content.en.html")),
    fr: html(file("./content.fr.html")),
  }),
},
};

    html() नोड

    html() फ़ंक्शन Intlayer v8 में एक नई विशेषता है जो आपको अपने शब्दकोशों में स्पष्ट रूप से HTML सामग्री को परिभाषित करने की अनुमति देती है। जबकि Intlayer अक्सर HTML सामग्री का स्वतः पता लगा सकता है, html() फ़ंक्शन का उपयोग करने से कई लाभ मिलते हैं:

    • टाइप सुरक्षा (Type Safety): html() फ़ंक्शन आपको कस्टम घटकों के लिए अपेक्षित प्रॉप्स (props) को परिभाषित करने की अनुमति देता है, जो आपके संपादक में बेहतर ऑटोकंप्लीशन और टाइप चेकिंग प्रदान करता है।
    • स्पष्ट घोषणा: यह सुनिश्चित करता है कि स्ट्रिंग को हमेशा HTML के रूप में माना जाए, भले ही इसमें मानक HTML टैग न हों जो स्वतः पता लगाने को ट्रگر करते हैं।
    • कस्टम घटक परिभाषा: आप कस्टम घटकों और उनके अपेक्षित प्रॉप प्रकारों को परिभाषित करने के लिए html() में दूसरा तर्क पारित कर सकते हैं।
    typescript
    import { html } from "intlayer";

const myContent = html(
  "<MyCustomComponent title='नमस्ते'>दुनिया</MyCustomComponent>",
  {
    MyCustomComponent: {
      title: "string",
      children: "node",
    },
  }
);

    HTML नोड पर .use() विधि का उपयोग करते समय, आपके द्वारा प्रदान किए गए घटकों की जांच html() फ़ंक्शन (यदि उपलब्ध हो) में प्रदान की गई परिभाषा के विरुद्ध की जाएगी।

    HTML रेंडरिंग

    रेंडरिंग को Intlayer के कंटेंट सिस्टम द्वारा स्वचालित रूप से या विशेष टूल्स का उपयोग करके मैन्युअली संभाला जा सकता है।

    स्वचालित रेंडरिंग (useIntlayer का उपयोग)

    जब आप useIntlayer के माध्यम से कंटेंट एक्सेस करते हैं, तो HTML नोड्स पहले से ही रेंडरिंग के लिए तैयार होते हैं।

    HTML नोड्स को सीधे JSX के रूप में रेंडर किया जा सकता है। सामान्य टैग स्वचालित रूप से काम करते हैं।

    App.tsx
    import { useIntlayer } from "react-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    कस्टम कंपोनेंट्स प्रदान करने या टैग ओवरराइड करने के लिए .use() मेथड का उपयोग करें:

    tsx
    {myHtmlContent.use({
p: (props) => <p className="prose" {...props} />,
CustomLink: ({ children }) => <a href="/details">{children}</a>,
})}

    Vue में, HTML कंटेंट बिल्ट-इन component के माध्यम से रेंडर किया जा सकता है।

    App.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const { myHtmlContent } = useIntlayer("app");
</script>

<template>
<component :is="myHtmlContent" />
</template>

    ओवरराइड करने के लिए .use() का उपयोग करें:

    vue
    <component :is="myHtmlContent.use({ h1: 'h2' })" />

    Svelte HTML नोड्स को स्ट्रिंग के रूप में रेंडर करता है। इसे रेंडर करने के लिए {@html} का उपयोग करें।

    svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("app");
</script>

{@html $content.myHtmlContent}

    Preact JSX में सीधे HTML नोड्स को सपोर्ट करता है।

    App.tsx
    import { useIntlayer } from "preact-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Solid JSX में सीधे HTML नोड्स को सपोर्ट करता है।

    App.tsx
    import { useIntlayer } from "solid-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Angular HTML कंटेंट रेंडर करने के लिए [innerHTML] डायरेक्टिव का उपयोग करता है।

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-root",
template: `<div [innerHTML]="content().myHtmlContent"></div>`,
})
export class AppComponent {
content = useIntlayer("app");
}

    कस्टम कंपोनेंट्स प्रदान करने या टैग ओवरराइड करने के लिए .use() मेथड का उपयोग करें:

    typescript
    content().myHtmlContent.use({
p: { class: "prose" },
CustomLink: { href: "/details" },
})

    HTMLProvider के साथ वैश्विक कॉन्फ़िगरेशन

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

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
    CustomLink: ({ children }) => <a href="/details">{children}</a>,
  }}
>
  {children}
</HTMLProvider>
);
    main.ts
    import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
components: {
  p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),
  CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),
},
});

app.mount("#app");
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

<HTMLProvider
components={{
  p: MyCustomP,
}}
>
<slot />
</HTMLProvider>
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {children}
</HTMLProvider>
);
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

export const AppProvider = (props) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {props.children}
</HTMLProvider>
);
    अपने HTML renderer को dynamically import करना आपके application के bundle size को कम करने का एक अच्छा तरीका है।
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    components: {
      p: { class: "prose" },
      CustomLink: { href: "/details" },
    },
  }),
],
};

    आप अपना स्वयं का HTML renderer भी उपयोग कर सकते हैं:

    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    renderHTML: async (html) => {
      const { renderHTML } = await import('angular-intlayer/html');
      return renderHTML(html);
    },
  }),
],
};
    अपने HTML renderer को dynamically import करना आपके application के bundle size को कम करने का एक अच्छा तरीका है।

    मैनुअल रेंडरिंग और उन्नत टूल्स

    यदि आपको raw HTML स्ट्रिंग्स रेंडर करने की आवश्यकता है या component मैपिंग पर अधिक नियंत्रण चाहिए, तो निम्नलिखित टूल्स का उपयोग करें।

    <HTMLRenderer /> कम्पोनेंट

    विशिष्ट कम्पोनेंट्स के साथ HTML स्ट्रिंग रेंडर करें।

    tsx
    import { HTMLRenderer } from "react-intlayer/html";

<HTMLRenderer components={{ p: MyCustomP }}>
{"<p>Hello World</p>"}
</HTMLRenderer>

    useHTMLRenderer() हुक

    एक पूर्व-कॉन्फ़िगर किया हुआ renderer फ़ंक्शन प्राप्त करें।

    tsx
    import { useHTMLRenderer } from "react-intlayer/html";

const renderHTML = useHTMLRenderer({
components: { strong: (props) => <strong {...props} className="text-red-500" /> }
});

return renderHTML("<p>हैलो <strong>वर्ल्ड</strong></p>");

    renderHTML() यूटिलिटी

    कम्पोनेन्ट्स के बाहर रेंडरिंग के लिए स्टैंडअलोन यूटिलिटी।

    tsx
    import { renderHTML } from "react-intlayer/html";

const jsx = renderHTML("<p>हैलो</p>", { components: { p: 'div' } });

    <HTMLRenderer /> कम्पोनेन्ट

    vue
    <script setup>
import { HTMLRenderer } from "vue-intlayer/html";
</script>

<template>
<HTMLRenderer content="<p>Hello World</p>" />
</template>

    <HTMLRenderer /> कम्पोनेन्ट

    svelte
    <script lang="ts">
import { HTMLRenderer } from "svelte-intlayer/html";
</script>

<HTMLRenderer value="<p>Hello World</p>" />

    useHTMLRenderer() हुक

    svelte
    <script lang="ts">
import { useHTMLRenderer } from "svelte-intlayer/html";
const render = useHTMLRenderer();
</script>

{@html render("<p>Hello World</p>")}

    renderHTML() यूटिलिटी

    svelte
    <script lang="ts">
import { renderHTML } from "svelte-intlayer/html";
</script>

{@html renderHTML("<p>Hello World</p>")}

    <HTMLRenderer /> कम्पोनेंट

    tsx
    import { HTMLRenderer } from "preact-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

    useHTMLRenderer() हुक

    tsx
    import { useHTMLRenderer } from "preact-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

    renderHTML() यूटिलिटी

    tsx
    import { renderHTML } from "preact-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

    <HTMLRenderer /> कम्पोनेंट

    tsx
    import { HTMLRenderer } from "solid-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

    useHTMLRenderer() हुक

    tsx
    import { useHTMLRenderer } from "solid-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

    renderHTML() यूटिलिटी

    tsx
    import { renderHTML } from "solid-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

    IntlayerHTMLService सर्विस

    सर्विस का उपयोग करके HTML स्ट्रिंग रेंडर करें।

    typescript
    import { IntlayerHTMLService } from "angular-intlayer/html";

export class MyComponent {
constructor(private markdownService: IntlayerHTMLService) {}

renderHTML(html: string) {
  return this.markdownService.renderHTML(html);
}
}

    विकल्प संदर्भ

    इन विकल्पों को HTMLProvider, HTMLRenderer, useHTMLRenderer, और renderHTML को पास किया जा सकता है।

    विकल्प प्रकार डिफ़ॉल्ट विवरण
    components Record<string, any> {} HTML टैग्स या कस्टम कॉम्पोनेंट नामों को कॉम्पोनेंट्स से मैप करने वाला ऑब्जेक्ट।
    renderHTML Function null डिफ़ॉल्ट HTML पार्सर को पूरी तरह से बदलने के लिए एक कस्टम रेंडरिंग फ़ंक्शन (केवल Vue/Svelte providers के लिए)।
    नोट: React और Preact के लिए, मानक HTML टैग्स स्वतः प्रदान किए जाते हैं। केवल तभी आपको components prop पास करने की आवश्यकता होती है जब आप उन्हें ओवरराइड करना या कस्टम कॉम्पोनेंट जोड़ना चाहें।
    Markdownफ़ंक्शन फेचिंग