المحتوى النصي الغني باستخدام Markdown

كيفية عمل Markdown

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

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

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

إعداد محتوى Markdown

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

مثال TypeScript

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

مثال JavaScript (ESM)

مثال CommonJS

مثال JSON

عند استخدام JSON، يتم تعريف محتوى Markdown من خلال تعيين nodeType (على سبيل المثال، "markdown") وتوفير نص Markdown. على سبيل المثال:

استخدام 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}</>;};const App: FC = () => (  <MarkdownProvider    renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>}  >    <AppContent />  </MarkdownProvider>);export default App;

في هذا التطبيق:

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

موارد إضافية

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

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