Creation:2026-01-20Last update:2026-01-22

Tham chiếu tài liệu này tới trợ lý AI yêu thích của bạn

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Đặt câu hỏi và nhận tóm tắt tài liệu bằng cách tham chiếu trang này và nhà cung cấp AI bạn chọn

Tài liệu này đã lỗi thời, phiên bản gốc đã được cập nhật vào 24 tháng 3, 2026.

Xem tài liệu tiếng Anh

Lịch sử phiên bản

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.024/3/2026
"move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
v8.5.024/3/2026
"Thêm HTMLRenderer / useHTMLRenderer / tiện ích renderHTML"
v8.0.022/1/2026
"Thêm hỗ trợ phân tích cú pháp HTML"
v8.0.020/1/2026

Nội dung của trang này đã được dịch bằng AI.

Xem phiên bản mới nhất của nội dung gốc bằng tiếng Anh

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Nội dung HTML / HTML trong Intlayer

Name: Intlayer
Author: 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

Sao chép mã

Sao chép mã vào clipboard

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;

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

Sao chép mã

Sao chép mã vào clipboard

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

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

Sao chép mã

Sao chép mã vào clipboard

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

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

Sao chép mã

Sao chép mã vào clipboard

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

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

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

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

Sao chép mã

Sao chép mã vào clipboard

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

{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

Sao chép mã

Sao chép mã vào clipboard

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

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

vue

Sao chép mã

Sao chép mã vào clipboard

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

<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

Sao chép mã

Sao chép mã vào clipboard

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

<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

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

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

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

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

Sao chép mã

Sao chép mã vào clipboard

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

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

Sao chép mã

Sao chép mã vào clipboard

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

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

Sao chép mã

Sao chép mã vào clipboard

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>);

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

Sao chép mã

Sao chép mã vào clipboard

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");

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

Sao chép mã

Sao chép mã vào clipboard

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

AppProvider.tsx

Sao chép mã

Sao chép mã vào clipboard

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

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

AppProvider.tsx

Sao chép mã

Sao chép mã vào clipboard

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

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

app.config.ts

Sao chép mã

Sao chép mã vào clipboard

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

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

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

Sao chép mã

Sao chép mã vào clipboard

import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

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

Sao chép mã

Sao chép mã vào clipboard

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>");

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

Sao chép mã

Sao chép mã vào clipboard

import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

#### Thành phần

<HTMLRenderer />

vue

Sao chép mã

Sao chép mã vào clipboard

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

Thành phần `<HTMLRenderer />`

svelte

Sao chép mã

Sao chép mã vào clipboard

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

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

Hook `useHTMLRenderer()`

svelte

Sao chép mã

Sao chép mã vào clipboard

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

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

Tiện ích `renderHTML()`

svelte

Sao chép mã

Sao chép mã vào clipboard

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

#### Thành phần

<HTMLRenderer />

tsx

Sao chép mã

Sao chép mã vào clipboard

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

#### Hook

useHTMLRenderer()

tsx

Sao chép mã

Sao chép mã vào clipboard

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

#### Tiện ích

renderHTML()

tsx

Sao chép mã

Sao chép mã vào clipboard

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

#### Thành phần

<HTMLRenderer />

tsx

Sao chép mã

Sao chép mã vào clipboard

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

#### Hook

useHTMLRenderer()

tsx

Sao chép mã

Sao chép mã vào clipboard

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

#### Tiện ích

renderHTML()

tsx

Sao chép mã

Sao chép mã vào clipboard

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

 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

Sao chép mã

Sao chép mã vào clipboard

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(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.

Hiển thị tất cả nội dung bảng

Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng

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.

Markdown

Lấy hàm

Lịch sử phiên bản

Nội dung HTML / HTML trong Intlayer

Khai báo nội dung HTML

Node html()

Kết xuất HTML

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

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

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

Thành phần <HTMLRenderer />

Hook useHTMLRenderer()

Tiện ích renderHTML()

Tham chiếu Tùy chọn

Node `html()`

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

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

Thành phần `<HTMLRenderer />`

Hook `useHTMLRenderer()`

Tiện ích `renderHTML()`