Tác giả:
    Aymeric PINEAU
    Ngày tạo:2026-01-20Cập nhật lần cuối:2026-01-22

    Nội dung HTML / HTML trong Intlayer

    Intlayer hỗ trợ nội dung HTML, cho phép bạn nhúng nội dung phong phú, có cấu trúc vào trong các dictionary của mình. Nội dung này có thể được hiển thị bằng các thẻ HTML tiêu chuẩn hoặc được thay thế bằng các component tùy chỉnh vào thời điểm chạy.

    Khai báo nội dung HTML

    Bạn có thể khai báo nội dung HTML bằng hàm html hoặc đơn giản bằng một chuỗi.

    Sử dụng hàm html để khai báo rõ ràng nội dung HTML. Điều này đảm bảo các thẻ chuẩn được ánh xạ đúng ngay cả khi phát hiện tự động bị tắt.

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

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // có thể đặt trong tệp cấu hình
content: {
  myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

    Nếu chuỗi chứa các thẻ HTML phổ biến (ví dụ: <p>, <div>, <strong>, v.v.), Intlayer sẽ tự động chuyển đổi nó.

    htmlDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // có thể đặt trong tệp cấu hình
content: {
  myHtmlContent:  "<p>Hello <strong>World</strong></p>",
},
};

    Nhập nội dung HTML từ các tệp. Lưu ý rằng hiện tại hàm file() trả về một chuỗi, chuỗi này sẽ được tự động nhận diện là HTML nếu nó chứa các thẻ.

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

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

    Node html()

    Hàm html() là một tính năng mới trong Intlayer v8 cho phép bạn xác định rõ ràng nội dung HTML trong từ điển của mình. Mặc dù Intlayer thường có thể tự động phát hiện nội dung HTML, nhưng việc sử dụng hàm html() mang lại một số lợi thế:

    • An toàn kiểu (Type Safety): Hàm html() cho phép bạn xác định các props mong đợi cho các thành phần tùy chỉnh, cung cấp khả năng tự động hoàn thành và kiểm tra kiểu tốt hơn trong trình soạn thảo của bạn.
    • Khai báo rõ ràng: Nó đảm bảo rằng một chuỗi luôn được coi là HTML, ngay cả khi nó không chứa các thẻ HTML tiêu chuẩn để kích hoạt tính năng tự động phát hiện.
    • Định nghĩa thành phần tùy chỉnh: Bạn có thể truyền đối số thứ hai vào html() để xác định các thành phần tùy chỉnh và các kiểu prop mong đợi của chúng.
    typescript
    import { html } from "intlayer";

const myContent = html(
  "<MyCustomComponent title='Xin chào'>Thế giới</MyCustomComponent>",
  {
    MyCustomComponent: {
      title: "string",
      children: "node",
    },
  }
);

    Khi sử dụng phương thức .use() trên một node HTML, các thành phần bạn cung cấp sẽ được kiểm tra so với định nghĩa được cung cấp trong hàm html() (nếu có).

    Kết xuất HTML

    Việc kết xuất có thể được xử lý tự động bởi hệ thống nội dung của Intlayer hoặc thực hiện thủ công bằng các công cụ chuyên dụng.

    Kết xuất tự động (sử dụng useIntlayer)

    Khi bạn truy cập nội dung qua useIntlayer, các nút HTML đã được chuẩn bị sẵn để kết xuất.

    Các nút HTML có thể được kết xuất trực tiếp dưới dạng JSX. Các thẻ tiêu chuẩn hoạt động tự động.

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

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

    Sử dụng phương thức .use() để cung cấp component tùy chỉnh hoặc ghi đè các thẻ:

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

    Trong Vue, nội dung HTML có thể được render bằng thành phần built-in component.

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

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

    Sử dụng .use() để ghi đè:

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

    Svelte render các node HTML dưới dạng chuỗi. Sử dụng {@html} để render chúng.

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

{@html $content.myHtmlContent}

    Preact hỗ trợ các node HTML trực tiếp trong JSX.

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

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

    Solid hỗ trợ các node HTML trực tiếp trong JSX.

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

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

    Angular sử dụng chỉ thị [innerHTML] để hiển thị nội dung 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");
}

    Sử dụng phương thức .use() để cung cấp các thành phần tùy chỉnh hoặc ghi đè các thẻ:

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

    Cấu hình toàn cục với HTMLProvider

    Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn bộ ứng dụng của mình. Điều này lý tưởng để định nghĩa các component tùy chỉnh mà nên có sẵn trong tất cả nội dung 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>
);

    Bạn cũng có thể sử dụng trình render HTML của riêng mình:

    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>
);
    Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
    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");

    Bạn cũng có thể sử dụng trình render HTML của riêng mình:

    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");
    Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

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

    Bạn cũng có thể sử dụng trình render HTML của riêng mình:

    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>
    Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

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

    Bạn cũng có thể sử dụng trình render HTML của riêng mình:

    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>
);
    Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

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

    Bạn cũng có thể sử dụng trình render HTML của riêng mình:

    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>
);
    Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

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

    Bạn cũng có thể sử dụng trình render HTML của riêng mình:

    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);
    },
  }),
],
};
    Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.

    Kết xuất Thủ công & Công cụ Nâng cao

    Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhiều hơn việc ánh xạ component, hãy sử dụng các công cụ sau.

    Thành phần <HTMLRenderer />

    Kết xuất một chuỗi HTML sử dụng các component cụ thể.

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

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

    Hook useHTMLRenderer()

    Lấy một hàm renderer đã được cấu hình sẵn.

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

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

return renderHTML("<p>Hello <strong>World</strong></p>");

    Tiện ích renderHTML()

    Tiện ích độc lập để render bên ngoài các component.

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

const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

    Thành phần <HTMLRenderer />

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

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

    Thành phần <HTMLRenderer />

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

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

    Hook useHTMLRenderer()

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

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

    Tiện ích renderHTML()

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

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

    Thành phần <HTMLRenderer />

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

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

    Hook useHTMLRenderer()

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

const render = useHTMLRenderer();

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

    Tiện ích renderHTML()

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

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

    Thành phần <HTMLRenderer />

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

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

    Hook useHTMLRenderer()

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

const render = useHTMLRenderer();

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

    Tiện ích renderHTML()

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

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

    Dịch vụ IntlayerHTMLService

    Render một chuỗi HTML bằng cách sử dụng dịch vụ.

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

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

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

    Tham chiếu Tùy chọn

    Các tùy chọn này có thể được truyền cho HTMLProvider, HTMLRenderer, useHTMLRenderer, và renderHTML.

    Tùy chọn Kiểu Mặc định Mô tả
    components Record<string, any> {} Bản đồ các thẻ HTML hoặc tên component tùy chỉnh tới các component tương ứng.
    renderHTML Function null Một hàm render/kết xuất tùy chỉnh để thay thế hoàn toàn bộ parser HTML mặc định (Chỉ dành cho Vue/Svelte providers).
    Lưu ý: Đối với React và Preact, các thẻ HTML chuẩn được cung cấp tự động. Bạn chỉ cần truyền prop components nếu bạn muốn ghi đè chúng hoặc thêm các component tùy chỉnh.
    MarkdownLấy hàm