शॉर्टकोड और टेम्प्लेट
अवलोकन
शॉर्टकोड एक विशेष मार्कअप है जो स्टैटिक साइट जेनरेटर (SSG) में जटिल HTML को सरल सिंटैक्स से बदलने की अनुमति देता है।
Hugo शॉर्टकोड
Hugo में शॉर्टकोड HTML कोड के छोटे स्निपेट हैं जिन्हें मार्कडाउन फ़ाइलों में उपयोग किया जा सकता है।
सिंटैक्स
{{< shortcode_name parameter1="value1" parameter2="value2" >}}
Content here
{{< /shortcode_name >}}उदाहरण
{{< alert type="warning" role="alert" title="Warning" >}}
This is a warning message.
{{< /alert >}}Jekyll/ Liquid टेम्प्लेट
Jekyll में लिक्विड टेम्प्लेट का उपयोग किया जाता है।
सिंटैक्स
{% shortcode_name parameter1="value1" parameter2="value2" %}
Content here
{% endshortcode_name %}उदाहरण
{% alert type="warning" dismissible=true %}
This is a warning message.
{% endalert %}VuePress/VitePress कंपोनेंट
VuePress और VitePress में Vue कंपोनेंट का उपयोग किया जा सकता है।
सिंटैक्स
vue
<Alert type="warning">
This is a warning message.
</Alert>Eleventy शॉर्टकोड
Eleventy में JavaScript functions का उपयोग किया जाता है।
उदाहरण
javascript
eleventyConfig.addShortcode("alert", function(type, message) {
return `<div class="alert alert-${type}">${message}</div>`;
});उपयोग:
{% alert "warning", "This is a warning message." %}शॉर्टकोड के लाभ
- सरलीकरण: जटिल HTML को सरल सिंटैक्स से बदलें
- पुन: उपयोग: सामान्य तत्वों के लिए केंद्रीकृत परिभाषा
- अनुकूलन: थीम और डिज़ाइन के अनुसार आसानी से बदलें
- प्रदर्शन: कैशिंग और अनुकूलन के माध्यम से बेहतर प्रदर्शन
सर्वोत्तम प्रथाएँ
1. अर्थपूर्ण नाम
javascript
// अच्छा
{{< youtube id="dQw4w9WgXcQ" >}}
// खराब
{{< vid src="dQw4w9WgXcQ" >}}2. पैरामीटर मान्यकरण
हमेशा पैरामीटर मान्य करें और डिफ़ॉल्ट मान प्रदान करें।
3. प्रलेखन
प्रत्येक शॉर्टकोड के लिए उपयोग उदाहरण और पैरामीटर दस्तावेज़ीकरण प्रदान करें।