मुख्य सामग्री पर जाएं

पुनः उपयोग योग्य स्निपेट्स

One of the core principles of software development is DRY (Don't Repeat Yourself). This is a principle that applies to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync.

कस्टम स्निपेट बनाना​

पूर्व-शर्त: आपको अपनी स्निपेट फ़ाइल snippets निर्देशिका में बनानी होगी।

जानकारी

snippets निर्देशिका में कोई भी पृष्ठ स्निपेट के रूप में माना जाएगा और स्वतंत्र पृष्ठ में रेंडर नहीं होगा। यदि आप स्निपेट से स्वतंत्र पृष्ठ बनाना चाहते हैं, तो स्निपेट को किसी अन्य फ़ाइल में इम्पोर्ट करें और इसे component के रूप में कॉल करें।

डिफ़ॉल्ट एक्सपोर्ट​

  1. अपनी स्निपेट फ़ाइल में वह सामग्री जोड़ें जिसे आप कई स्थानों पर पुनः उपयोग करना चाहते हैं। वैकल्पिक रूप से, आप वेरिएबल जोड़ सकते हैं जिन्हें props के माध्यम से भरा जा सकता है जब आप स्निपेट इम्पोर्ट करते हैं।
नमस्ते दुनिया! यह मेरी सामग्री है जिसे मैं पृष्ठों में पुनः उपयोग करना चाहता हूँ। आज का मेरा कीवर्ड {word} है।
warning

जिस सामग्री को आप पुनः उपयोग करना चाहते हैं वह snippets निर्देशिका के अंदर होनी चाहिए ताकि इम्पोर्ट काम करे।

  1. स्निपेट को अपनी गंतव्य फ़ाइल में इम्पोर्ट करें।
title: मेरा शीर्षक
description: मेरा विवरण

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## शीर्षक

Lorem ipsum dolor sit amet।

<MySnippet word="केले" />

पुनः उपयोग योग्य वेरिएबल​

  1. अपनी स्निपेट फ़ाइल से वेरिएबल एक्सपोर्ट करें:
export const myName = 'मेरा नाम';

export const myObject = { fruit: 'स्ट्रॉबेरी' };
  1. अपनी गंतव्य फ़ाइल से स्निपेट इम्पोर्ट करें और वेरिएबल का उपयोग करें:
title: मेरा शीर्षक
description: मेरा विवरण

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

नमस्ते, मेरा नाम {myName} है और मुझे {myObject.fruit} पसंद है।

पुनः उपयोग योग्य components​

  1. अपनी स्निपेट फ़ाइल के अंदर, arrow function के रूप में अपने component को एक्सपोर्ट करके props लेने वाला component बनाएँ।
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... स्निपेट सामग्री ...</p>
  </div>
);
warning

MDX arrow function के बॉडी के अंदर कंपाइल नहीं होता। जब तक संभव हो HTML सिंटैक्स का उपयोग करें या यदि आपको MDX का उपयोग करना है तो डिफ़ॉल्ट एक्सपोर्ट का उपयोग करें।

  1. स्निपेट को अपनी गंतव्य फ़ाइल में इम्पोर्ट करें और props पास करें
title: मेरा शीर्षक
description: मेरा विवरण

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet।

<MyComponent title={'कस्टम शीर्षक'} />