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

كيفية عمل Markdown

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

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

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

إعداد محتوى Markdown

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

markdownDictionary.content.ts

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

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

md.d.ts

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

markdownDictionary.content.ts

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.

App.tsx

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

module.exports = { AppProvider, };

في هذا التنفيذ: - يقوم `MarkdownProvider` بتغليف التطبيق (أو الجزء ذي الصلة منه) ويقبل دالة `renderMarkdown`. تُستخدم هذه الدالة لتحويل النصوص المكتوبة بـ Markdown إلى JSX باستخدام حزمة `markdown-to-jsx`. - يتم استخدام الخطاف `useIntlayer` لاسترداد محتوى Markdown (`myMarkdownContent`) من القاموس باستخدام المفتاح `"app"`. - يتم عرض محتوى Markdown مباشرة في المكون، ويتم التعامل مع عرض Markdown بواسطة المزود. ### استخدام Markdown مع Next Intlayer يشبه التنفيذ باستخدام حزمة `next-intlayer` التنفيذ أعلاه. الاختلاف الوحيد هو أن دالة `renderMarkdown` يجب أن تُمرر إلى مكون `MarkdownProvider` في مكون العميل. ```tsx title="src/providers/IntlayerMarkdownProvider.tsx" codeFormat="typescript" "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 مع أنواع المحتوى المختلفة والأطر.

إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

رابط GitHub للتوثيق

تداخل استرداد الوظيفة