المؤلف:
    Aymeric PINEAU
    إنشاء:2026-01-20آخر تحديث:2026-09-27

    محتوى HTML / HTML في Intlayer

    يدعم Intlayer محتوى HTML، مما يتيح لك تضمين محتوى غني ومنظم داخل القواميس (dictionaries) الخاصة بك. يمكن عرض هذا المحتوى باستخدام وسوم 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({
    ar: html(file("./content.ar.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",
    },
  }
);

    عند استخدام طريقة .use() على عقدة HTML، سيتم التحقق من المكونات التي تقدمها مقابل التعريف المقدم في دالة 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 عناصر HTML مباشرةً داخل JSX.

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

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

    يدعم Solid عناصر HTML مباشرةً داخل JSX.

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

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

    يستخدم Angular توجيه [innerHTML] لعرض محتوى HTML.

    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" },
})

    في Remix 3، يتم تحليل عقد HTML إلى سلسلة HTML. قم بحقنها باستخدام خاصية innerHTML في Remix JSX، أو باستخدام html.raw في عرض html-template.

    src/views/home.tsx
    import { useIntlayer } from "remix-intlayer";

export const HomePage = () => () => {
const { myHtmlContent } = useIntlayer("app");

return <div innerHTML={myHtmlContent.value} />;
};
    src/views/home.ts
    import { html } from "remix/html-template";
import { useIntlayer } from "remix-intlayer";

export const renderHomePage = () => {
const { myHtmlContent } = useIntlayer("app");

return html.raw`<div>${myHtmlContent.value}</div>`;
};
    يقوم Remix بتهريب القيم المدرجة افتراضيًا. innerHTML و html.raw هما خيارا إلغاء الاشتراك، وهو ما تحتاجه سلسلة HTML.

    استخدم طريقة .use() لتجاوز العلامات أو تعيين المكونات المخصصة. التجاوزات هي دوال تُرجع سلسلة HTML:

    tsx
    <div
innerHTML={myHtmlContent.use({
  p: ({ children }) => `<p class="prose">${children}</p>`,
  CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
})}
/>

    في Astro، يتم تحليل عقد HTML إلى سلسلة HTML. قم بحقنها باستخدام توجيه set:html في القالب، أو باستخدام innerHTML في <script> من جانب العميل.

    src/pages/index.astro
    ---
import { useIntlayer } from "astro-intlayer";

const { myHtmlContent } = useIntlayer("app");
---

<div set:html={myHtmlContent.value} />
    src/components/Content.astro
    <div id="content"></div>

<script>
import { useIntlayer } from "astro-intlayer";

const { myHtmlContent } = useIntlayer("app");

document.querySelector("#content")!.innerHTML = myHtmlContent.value;
</script>
    يقوم Astro بتهريب {التعبيرات} افتراضيًا. set:html هو خيار إلغاء الاشتراك، وهو ما تحتاجه سلسلة HTML.

    استخدم طريقة .use() لتجاوز العلامات أو تعيين المكونات المخصصة. التجاوزات هي دوال تُرجع سلسلة HTML:

    astro
    <div
set:html={myHtmlContent.use({
  p: ({ children }) => `<p class="prose">${children}</p>`,
  CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
})}
/>

    التكوين العام باستخدام HTMLProvider

    يمكنك تكوين عرض HTML على مستوى التطبيق بأكمله. هذا مناسب لتعريف مكونات مخصصة يجب أن تكون متاحة في جميع محتويات 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>
);

    يمكنك أيضًا استخدام محرك تصيير HTML الخاص بك:

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

export const AppProvider = ({ children }) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('react-intlayer/html');
    return renderHTML(html);
  }}
>
  {children}
</HTMLProvider>
);
    استيراد محرك HTML الخاص بك ديناميكيًا هو طريقة جيدة لتقليل حجم حزمة تطبيقك.
    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");

    يمكنك أيضًا استخدام محرك تصيير HTML الخاص بك:

    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, {
renderHTML: async (html) => {
  const { renderHTML } = await import('vue-intlayer/html');
  return renderHTML(html);
},
});

app.mount("#app");
    استيراد محرك HTML الخاص بك ديناميكيًا هو طريقة جيدة لتقليل حجم حزمة تطبيقك.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

<HTMLProvider
components={{
  p: MyCustomP,
}}
>
<slot />
</HTMLProvider>

    يمكنك أيضًا استخدام محرك تصيير HTML الخاص بك:

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

<HTMLProvider
renderHTML={async (html) => {
  const { renderHTML } = await import('svelte-intlayer/html');
  return renderHTML(html);
}}
>
<slot />
</HTMLProvider>
    استيراد محرك HTML الخاص بك ديناميكيًا هو طريقة جيدة لتقليل حجم حزمة تطبيقك.
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {children}
</HTMLProvider>
);

    يمكنك أيضًا استخدام محرك تصيير HTML الخاص بك:

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

export const AppProvider = ({ children }) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('preact-intlayer/html');
    return renderHTML(html);
  }}
>
  {children}
</HTMLProvider>
);
    استيراد محرك HTML الخاص بك ديناميكيًا هو طريقة جيدة لتقليل حجم حزمة تطبيقك.
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

export const AppProvider = (props) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {props.children}
</HTMLProvider>
);

    يمكنك أيضًا استخدام محرك تصيير HTML الخاص بك:

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

export const AppProvider = (props) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('solid-intlayer/html');
    return renderHTML(html);
  }}
>
  {props.children}
</HTMLProvider>
);
    استيراد محرك HTML الخاص بك ديناميكيًا هو طريقة جيدة لتقليل حجم حزمة تطبيقك.
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

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

    يمكنك أيضًا استخدام محرك تصيير HTML الخاص بك:

    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 الخاص بك ديناميكيًا هو طريقة جيدة لتقليل حجم حزمة تطبيقك.

    لا يحتوي Remix على شجرة مكونات للاحتفاظ بمزود، لذلك يتم تثبيت التكوين مرة واحدة، كعنصر فريد (singleton)، عند بدء تشغيل الخادم. يقوم بتكوين أداة العرض التي تُرجعها useHTMLRenderer(). يتم عرض عقد html التي تُرجعها useIntlayer كما هي؛ قم بتجاوز علاماتها لكل عقدة باستخدام .use().

    src/router.ts
    import { installIntlayerHTML } from "remix-intlayer/html";

installIntlayerHTML({
renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
});
    استخدم installIntlayerHTMLDynamic(async () => …) لتحميل أداة العرض بشكل متكاسل؛ يتم تشغيل أداة التحميل عند الاستدعاء الأول فقط.

    لا يحتوي Astro على شجرة مكونات للاحتفاظ بمزود، لذلك يتم تثبيت التكوين مرة واحدة، كعنصر فريد (singleton)، في البرمجيات الوسيطة (الخادم) وفي <script> من جانب العميل (المتصفح). يقوم بتكوين أداة العرض التي تُرجعها useHTMLRenderer(). يتم عرض عقد html التي تُرجعها useIntlayer كما هي؛ قم بتجاوز علاماتها لكل عقدة باستخدام .use().

    src/middleware.ts
    import { installIntlayerHTML } from "astro-intlayer/html";
import { defineMiddleware } from "astro:middleware";

// يتم التشغيل مرة واحدة عند بدء تشغيل الخادم؛ يتم تسجيل برمجية Intlayer الوسيطة نفسها
// بواسطة التكامل قبل هذا الملف.
installIntlayerHTML({
renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
});

export const onRequest = defineMiddleware((_context, next) => next());
    استخدم installIntlayerHTMLDynamic(async () => …) لتحميل أداة العرض بشكل متكاسل؛ يتم تشغيل أداة التحميل عند الاستدعاء الأول فقط.

    التصيير اليدوي والأدوات المتقدمة

    إذا كنت بحاجة إلى عرض سلاسل HTML خام أو التحكم بشكل أكبر في تعيين المكونات، فاستخدم الأدوات التالية.

    المكوّن <HTMLRenderer />

    عرض سلسلة HTML باستخدام مكونات محددة.

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

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

    Hook 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()

    أداة مستقلة للـ rendering خارج المكونات.

    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>مرحبًا بالعالم</p>" />
</template>

    المكوّن <HTMLRenderer />

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

<HTMLRenderer value="<p>مرحبًا بالعالم</p>" />

    Hook useHTMLRenderer()

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

{@html render("<p>مرحبًا بالعالم</p>")}

    أداة renderHTML()

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

{@html renderHTML("<p>مرحبًا بالعالم</p>")}

    مكوّن <HTMLRenderer />

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

<HTMLRenderer>
{"<p>مرحبًا بالعالم</p>"}
</HTMLRenderer>

    Hook useHTMLRenderer()

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

const render = useHTMLRenderer();

return <div>{render("<p>مرحبًا بالعالم</p>")}</div>;

    أداة renderHTML()

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

return <div>{renderHTML("<p>مرحبًا بالعالم</p>")}</div>;

    مكوّن <HTMLRenderer />

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

<HTMLRenderer>
{"<p>مرحبًا بالعالم</p>"}
</HTMLRenderer>

    Hook useHTMLRenderer()

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

const render = useHTMLRenderer();

return <div>{render("<p>مرحبًا بالعالم</p>")}</div>;

    أداة renderHTML()

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

return <div>{renderHTML("<p>مرحبًا بالعالم</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);
}
}

    Hook useHTMLRenderer()

    احصل على دالة عرض مهيأة مسبقًا بواسطة installIntlayerHTML(). تُرجع سلسلة HTML.

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

const renderHTML = useHTMLRenderer();

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

    أداة renderHTML()

    أداة قائمة بذاتها تتجاهل التكوين العام.

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

const html = renderHTML("<p>Hello</p>");

    Hook useHTMLRenderer()

    احصل على دالة عرض مهيأة مسبقًا بواسطة installIntlayerHTML(). تُرجع سلسلة HTML.

    astro
    ---
import { useHTMLRenderer } from "astro-intlayer/html";

const renderHTML = useHTMLRenderer();
---

<div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />

    أداة renderHTML()

    أداة قائمة بذاتها تتجاهل التكوين العام.

    astro
    ---
import { renderHTML } from "astro-intlayer/html";

const html = renderHTML("<p>Hello</p>");
---

<div set:html={html} />

    مرجع الخيارات

    يمكن تمرير هذه الخيارات إلى HTMLProvider وHTMLRenderer وuseHTMLRenderer وrenderHTML.

    الخيارالنوعالافتراضيالوصف
    componentsRecord<string, any>{}خريطة تربط علامات HTML أو أسماء المكونات المخصصة بالمكونات.
    renderHTMLFunctionnullدالة عرض مخصصة لاستبدال محلل HTML الافتراضي بالكامل (موفرو Vue وSvelte وRemix وAstro).
    ملاحظة: بالنسبة لـ React و Preact، يتم توفير علامات HTML القياسية تلقائيًا. تحتاج فقط إلى تمرير الخاصية components إذا أردت تجاوزها أو إضافة مكونات مخصصة.
    Markdownجلب الوظيفة