Markdown / Nội dung Văn bản Đa dạng

Cách Markdown Hoạt động

Intlayer hỗ trợ nội dung văn bản đa dạng được định nghĩa bằng cú pháp Markdown. Điều này được thực hiện thông qua hàm md, hàm này chuyển đổi một chuỗi Markdown thành định dạng có thể được quản lý bởi Intlayer. Bằng cách sử dụng Markdown, bạn có thể dễ dàng viết và duy trì nội dung với định dạng phong phú, chẳng hạn như blog, bài viết, và nhiều hơn nữa.

Công cụ chỉnh sửa trực quan Intlayer và Intlayer CMS đều hỗ trợ quản lý nội dung Markdown.

Khi tích hợp với một ứng dụng React, bạn có thể sử dụng một nhà cung cấp kết xuất Markdown (chẳng hạn như markdown-to-jsx) để kết xuất nội dung Markdown thành HTML. Điều này cho phép bạn viết nội dung bằng Markdown trong khi đảm bảo nó hiển thị đúng trong ứng dụng của bạn.

Thiết lập Nội dung Markdown

Để thiết lập nội dung Markdown trong dự án Intlayer của bạn, hãy định nghĩa một từ điển nội dung sử dụng hàm md.

import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## My title \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

Nhập file .md (đa ngôn ngữ)

Nếu file Markdown của bạn là file .md, bạn có thể nhập nó bằng các định dạng import khác nhau do JavaScript hoặc Intlayer cung cấp.

Khuyến nghị ưu tiên nhập thông qua file function, vì nó cho phép Intlayer quản lý đúng các đường dẫn tương đối với vị trí file và đảm bảo tích hợp file này với Visual Editor / CMS.

// Khai báo này cho phép TypeScript nhận diện và nhập các file Markdown (.md) như các module.// Nếu không có đoạn này, TypeScript sẽ báo lỗi khi cố gắng nhập các file Markdown,// vì nó không hỗ trợ nhập file không phải mã nguồn một cách nguyên bản.declare module "*.md";

import { md, file, t, type Dictionary } from "intlayer";import { readFileSync } from "fs";import { resolve } from "path";import markdown from "./myMarkdown.md";const markdownDictionary = {  key: "app",  content: {    contentMultilingualFile: t({      en: md(file("./myMarkdown.en.md")),      fr: md(file("./myMarkdown.fr.md")),      es: md(file("./myMarkdown.es.md")),    }),    contentImport: md(markdown),    contentRequire: md(require("./myMarkdown.md")),    contentAsyncImport: md(      import("./myMarkdown.md").then((module) => module.default)    ),    contentFetch: md(fetch("https://example.com").then((res) => res.text())),    contentFS: md(() => {      const filePath = resolve(process.cwd(), "doc/test.md");      return readFileSync(filePath, "utf8");    }),  },} satisfies Dictionary;export default markdownDictionary;

Sử dụng Markdown với React Intlayer

Để hiển thị nội dung Markdown trong ứng dụng React, bạn có thể tận dụng hook useIntlayer từ gói react-intlayer cùng với một provider để render Markdown. Trong ví dụ này, chúng tôi sử dụng gói markdown-to-jsx để chuyển đổi Markdown thành HTML.

import type { FC } from "react";import { useIntlayer, MarkdownProvider } from "react-intlayer";import Markdown from "markdown-to-jsx";const AppContent: FC = () => {  const { myMarkdownContent } = useIntlayer("app");  return <>{myMarkdownContent}</>;};export const AppProvider: FC = () => (  <MarkdownProvider    renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>}  >    <AppContent />  </MarkdownProvider>);

Trong triển khai này:

• MarkdownProvider bao bọc ứng dụng (hoặc phần liên quan của nó) và chấp nhận một hàm renderMarkdown. Hàm này được sử dụng để chuyển đổi chuỗi Markdown thành JSX bằng cách sử dụng gói markdown-to-jsx.
• Hook useIntlayer được sử dụng để lấy nội dung Markdown (myMarkdownContent) từ dictionary với khóa "app".
• Nội dung Markdown được render trực tiếp trong component, và việc render Markdown được xử lý bởi provider.

Sử dụng Markdown với Next Intlayer

Việc triển khai sử dụng package next-intlayer tương tự như trên. Điểm khác duy nhất là hàm renderMarkdown nên được truyền vào component MarkdownProvider trong một client component.

"use client";import type { FC, PropsWithChildren } from "react";import { MarkdownProvider } from "next-intlayer";const renderMarkdown = (markdown: string) => (  <span style={{ color: "red" }}>{markdown}</span>);export const IntlayerMarkdownProvider: FC<PropsWithChildren> = ({  children,}) => (  <MarkdownProvider renderMarkdown={renderMarkdown}>    {children}  </MarkdownProvider>);

Tài Nguyên Bổ Sung

• Tài liệu CLI của Intlayer
• Tài liệu React Intlayer
• Tài liệu Next Intlayer
• markdown-to-jsx trên npm

Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về cách thiết lập và sử dụng Intlayer với các loại nội dung và framework khác nhau.