इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंमार्कडाउन / रिच टेक्स्ट सामग्री
मार्कडाउन कैसे काम करता है
Intlayer मार्कडाउन सिंटैक्स का उपयोग करके परिभाषित रिच टेक्स्ट सामग्री का समर्थन करता है। यह md फ़ंक्शन के माध्यम से प्राप्त किया जाता है, जो एक मार्कडाउन स्ट्रिंग को एक प्रारूप में परिवर्तित करता है जिसे Intlayer द्वारा प्रबंधित किया जा सकता है। मार्कडाउन का उपयोग करके, आप आसानी से ब्लॉग, लेख और अन्य सामग्री को रिच फॉर्मेटिंग के साथ लिख और प्रबंधित कर सकते हैं।
Intlayer विज़ुअल एडिटर और Intlayer CMS दोनों मार्कडाउन सामग्री प्रबंधन का समर्थन करते हैं।
React एप्लिकेशन के साथ एकीकृत होने पर, आप मार्कडाउन सामग्री को HTML में रेंडर करने के लिए एक मार्कडाउन रेंडरिंग प्रोवाइडर (जैसे markdown-to-jsx) का उपयोग कर सकते हैं। यह आपको मार्कडाउन में सामग्री लिखने की अनुमति देता है जबकि यह सुनिश्चित करता है कि यह आपके ऐप में सही ढंग से प्रदर्शित हो।
मार्कडाउन सामग्री सेट करना
अपने 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({ hi: md(markdown_en), 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;React Intlayer के साथ मार्कडाउन का उपयोग करना
React एप्लिकेशन में मार्कडाउन सामग्री को रेंडर करने के लिए, आप react-intlayer पैकेज से useIntlayer हुक और एक मार्कडाउन रेंडरिंग प्रोवाइडर का उपयोग कर सकते हैं। इस उदाहरण में, हम मार्कडाउन को HTML में परिवर्तित करने के लिए markdown-to-jsx पैकेज का उपयोग करते हैं।
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-to-jsx` पैकेज का उपयोग करके Markdown स्ट्रिंग्स को JSX में बदलने के लिए किया जाता है। - `useIntlayer` हुक का उपयोग डिक्शनरी से कुंजी `"app"` के साथ Markdown सामग्री (`myMarkdownContent`) प्राप्त करने के लिए किया जाता है। - Markdown सामग्री को सीधे घटक में प्रस्तुत किया जाता है, और Markdown रेंडरिंग को प्रोवाइडर द्वारा संभाला जाता है। ### Next Intlayer के साथ Markdown का उपयोग करना `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 लिंक