محتوى Markdown / النصوص الغنية

كيفية عمل Markdown

يدعم Intlayer محتوى النصوص الغنية الذي يتم تعريفه باستخدام صيغة Markdown. يتم تحقيق ذلك من خلال وظيفة md، التي تحول سلسلة Markdown إلى صيغة يمكن إدارتها بواسطة Intlayer. باستخدام Markdown، يمكنك بسهولة كتابة وصيانة المحتوى بتنسيق غني، مثل المدونات، المقالات، والمزيد.

محرر Intlayer المرئي و نظام إدارة المحتوى Intlayer يدعمان إدارة محتوى Markdown.

عند التكامل مع تطبيق React، يمكنك استخدام مزود عرض Markdown (مثل markdown-to-jsx) لعرض محتوى Markdown كـ HTML. يتيح لك ذلك كتابة المحتوى بصيغة Markdown مع ضمان عرضه بشكل صحيح في تطبيقك.

إعداد محتوى Markdown

لإعداد محتوى Markdown في مشروع Intlayer الخاص بك، قم بتعريف قاموس محتوى يستخدم وظيفة md.

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

استيراد ملف .md (متعدد اللغات)

// هذا التصريح يسمح لـ TypeScript بالتعرف على ملفات Markdown (.md) واستيرادها كـ وحدات.// بدون هذا، سيقوم TypeScript بإظهار خطأ عند محاولة استيراد ملفات Markdown،// حيث أنه لا يدعم استيراد الملفات غير البرمجية بشكل افتراضي.declare module "*.md";

import { md, t, type Dictionary } from "intlayer";import { readFileSync } from "fs";import { resolve } from "path";import markdown_en from "./myMarkdown.en.md";import markdown_fr from "./myMarkdown.fr.md";import markdown_es from "./myMarkdown.es.md";const markdownDictionary = {  key: "app",  content: {    contentImport: t({      ar: md(markdown_ar),      en: md(markdown_en),      fr: md(markdown_fr),      es: md(markdown_es),    }),    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;

استخدام Markdown مع React Intlayer

لعرض محتوى Markdown في تطبيق React، يمكنك الاستفادة من الخطاف useIntlayer من حزمة react-intlayer مع مزود عرض Markdown. في هذا المثال، نستخدم حزمة markdown-to-jsx لتحويل Markdown إلى 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>);

في هذا التنفيذ:

• يقوم MarkdownProvider بتغليف التطبيق (أو الجزء ذي الصلة منه) ويقبل دالة renderMarkdown. تُستخدم هذه الدالة لتحويل النصوص المكتوبة بـ Markdown إلى JSX باستخدام حزمة markdown-to-jsx.
• يتم استخدام الخطاف useIntlayer لاسترداد محتوى Markdown (myMarkdownContent) من القاموس باستخدام المفتاح "app".
• يتم عرض محتوى Markdown مباشرة في المكون، ويتم التعامل مع عرض Markdown بواسطة المزود.

استخدام Markdown مع Next Intlayer

يشبه التنفيذ باستخدام حزمة next-intlayer التنفيذ أعلاه. الاختلاف الوحيد هو أن دالة renderMarkdown يجب أن تُمرر إلى مكون MarkdownProvider في مكون العميل.

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

موارد إضافية

• وثائق Intlayer CLI
• وثائق React Intlayer
• وثائق Next Intlayer
• markdown-to-jsx على npm

توفر هذه الموارد مزيدًا من المعلومات حول إعداد واستخدام Intlayer مع أنواع المحتوى المختلفة والأطر.