মার্কডাউনে শর্টকোড ব্যবহার

শর্টকোড হলো সহজ স্নিপেট যা আপনাকে HTML বা জটিল কোড না লিখে মার্কডাউন ডকুমেন্টে জটিল ফাংশনালিটি এম্বেড করতে দেয়। এগুলি সাধারণত স্ট্যাটিক সাইট জেনারেটরে ব্যবহৃত হয়।

শর্টকোড কী?

শর্টকোড হলো প্লেসহোল্ডার যা বিল্ড প্রক্রিয়ার সময় রেন্ডার্ড কন্টেন্ট দিয়ে প্রতিস্থাপিত হয়। এগুলি সাধারণত এইরকম দেখায়:

{{< shortcode-name param1="value1" >}}

অথবা

{{% shortcode-name %}}
এখানে কন্টেন্ট
{{% /shortcode-name %}}

সাধারণ শর্টকোড সিনট্যাক্স ফরম্যাট

Hugo সিনট্যাক্স

<!-- সেলফ-ক্লোজিং -->
{{< youtube id="dQw4w9WgXcQ" >}}

<!-- কন্টেন্ট সহ -->
{{% note type="warning" %}}
এটি গুরুত্বপূর্ণ তথ্য!
{{% /note %}}

Jekyll/Liquid সিনট্যাক্স

{% youtube "dQw4w9WgXcQ" %}

{% highlight javascript %}
console.log("Hello World");
{% endhighlight %}

Gatsby/MDX কম্পোনেন্ট

<YouTube videoId="dQw4w9WgXcQ" />

<Note type="warning">
  এটি গুরুত্বপূর্ণ তথ্য!
</Note>

বিল্ট-ইন শর্টকোড

Hugo বিল্ট-ইন শর্টকোড

Figure/Image

{{< figure src="/images/sunset.jpg" 
           title="সুন্দর সূর্যাস্ত"
           caption="ক্যালিফোর্নিয়ায় তোলা"
           alt="মহাসাগরের উপর সূর্যাস্ত"
           width="800" >}}

YouTube

{{< youtube dQw4w9WgXcQ >}}

<!-- প্যারামিটার সহ -->
{{< youtube id="dQw4w9WgXcQ" autoplay="true" >}}

Twitter

{{< twitter user="github" id="1234567890" >}}

Instagram

{{< instagram BWNjjyYFxVx >}}

Gist

{{< gist username 0123456789abcdef >}}

Jekyll বিল্ট-ইন ট্যাগ

হাইলাইট কোড

{% highlight ruby linenos %}
def hello
  puts "Hello World"
end
{% endhighlight %}

ফাইল ইনক্লুড করুন

{% include header.html %}

{% include_relative ../shared/footer.html %}

পোস্টে লিঙ্ক

{% post_url 2024-01-15-my-post %}

{% link _posts/2024-01-15-my-post.md %}

কাস্টম শর্টকোড তৈরি

Hugo কাস্টম শর্টকোড

layouts/shortcodes/button.html এ একটি ফাইল তৈরি করুন:

<a href="&#123;&#123; .Get "url" &#125;&#125;" class="button &#123;&#123; .Get "style" &#125;&#125;">
  &#123;&#123; .Inner &#125;&#125;
</a>

ব্যবহার:

```markdown
&#123;&#123;< button url="/docs" style="primary" >&#125;&#125;
Read Documentation
&#123;&#123;< /button >&#125;&#125;

আরও জটিল উদাহরণ

layouts/shortcodes/callout.html:

{{ $type := .Get "type" | default "info" }}
<div class="callout callout-&#123;&#123; $type &#125;&#125;">
  <div class="callout-title">
    &#123;&#123; with .Get "title" &#125;&#125;&#123;&#123; . &#125;&#125;&#123;&#123; end &#125;&#125;
  </div>
  <div class="callout-content">
    &#123;&#123; .Inner | markdownify &#125;&#125;
  </div>
</div>

ব্যবহার:

```markdown
&#123;&#123;% callout type="warning" title="Important" %&#125;&#125;
This is a **warning** message with *Markdown* support.
&#123;&#123;% /callout %&#125;&#125;

Jekyll কাস্টম ট্যাগ

_plugins/custom_tag.rb এ একটি প্লাগিন তৈরি করুন:

module Jekyll
  class CustomTag < Liquid::Tag
    def initialize(tag_name, params, tokens)
      super
      @params = params
    end

    def render(context)
      "<div class='custom-tag'>#{@params}</div>"
    end
  end
end

Liquid::Template.register_tag('custom', Jekyll::CustomTag)

ব্যবহার:

{% custom "আমার কাস্টম কন্টেন্ট" %}

ব্যবহারিক শর্টকোড উদাহরণ

অ্যালার্ট/নোটিশ বক্স

{{% alert type="info" %}}
ℹ️ This is an informational message.
{{% /alert %}}

{{% alert type="warning" %}}
⚠️ This is a warning message.
{{% /alert %}}

{{% alert type="danger" %}}
🚨 This is a danger message.
{{% /alert %}}

কোড ট্যাব

&#123;&#123;< tabs >&#125;&#125;
  &#123;&#123;< tab "JavaScript" >&#125;&#125;
  ```javascript
  console.log("Hello");

{{< /tab >}}

{{< tab "Python" >}}

print("Hello")

{{< /tab >}} {{< /tabs >}}

### এক্সপ্যান্ডেবল সেকশন

```markdown
&#123;&#123;< expand "Click to expand" >&#125;&#125;
This content is hidden by default and can be expanded.

It can contain **any Markdown** including:
- Lists
- Code blocks
- Images
&#123;&#123;< /expand >&#125;&#125;

এক্সটার্নাল কন্টেন্ট এম্বেড করুন

<!-- CodePen -->
&#123;&#123;< codepen user="username" id="abcdefg" >&#125;&#125;

<!-- JSFiddle -->
&#123;&#123;< jsfiddle url="https://jsfiddle.net/username/abc123" >&#125;&#125;

<!-- CodeSandbox -->
&#123;&#123;< codesandbox id="abc123" >&#125;&#125;

গ্যালারি/লাইটবক্স

&#123;&#123;< gallery >&#125;&#125;
  &#123;&#123;< img src="image1.jpg" caption="First image" >&#125;&#125;
  &#123;&#123;< img src="image2.jpg" caption="Second image" >&#125;&#125;
  &#123;&#123;< img src="image3.jpg" caption="Third image" >&#125;&#125;
&#123;&#123;< /gallery >&#125;&#125;

বিষয়বস্তু সূচি

&#123;&#123;< toc >&#125;&#125;

<!-- With options -->
&#123;&#123;< toc levels="2,3" >&#125;&#125;

Mermaid ডায়াগ্রাম

&#123;&#123;< mermaid >&#125;&#125;
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
&#123;&#123;< /mermaid >&#125;&#125;

উন্নত শর্টকোড প্যাটার্ন

প্যারামিটারাইজড শর্টকোড

<!-- Named parameters -->
&#123;&#123;< card title="My Title" 
         image="/images/card.jpg" 
         link="/read-more" 
         button="Learn More" >&#125;&#125;

<!-- Positional parameters -->
&#123;&#123;< youtube "dQw4w9WgXcQ" "16:9" >&#125;&#125;

নেস্টেড শর্টকোড

&#123;&#123;< columns >&#125;&#125;
  &#123;&#123;< column size="6" >&#125;&#125;
    Left column content
  &#123;&#123;< /column >&#125;&#125;
  
  &#123;&#123;< column size="6" >&#125;&#125;
    Right column content
  &#123;&#123;< /column >&#125;&#125;
&#123;&#123;< /columns >&#125;&#125;

কন্ডিশনাল রেন্ডারিং

Hugo উদাহরণ:

{{ if .Get "show" }}
<div class="optional-content">
  &#123;&#123; .Inner &#125;&#125;
</div>
&#123;&#123; end &#125;&#125;

পেজ ভেরিয়েবল অ্যাক্সেস

<!-- In shortcode template -->
<div class="page-info">
  <h3>&#123;&#123; .Page.Title &#125;&#125;</h3>
  <p>Last modified: &#123;&#123; .Page.Lastmod &#125;&#125;</p>
  <p>Reading time: &#123;&#123; .Page.ReadingTime &#125;&#125; minutes</p>
</div>

শর্টকোড সেরা অনুশীলন

1. সহজ রাখুন: শর্টকোড মনে রাখা এবং ব্যবহার করা সহজ হওয়া উচিত
2. স্পষ্ট নামকরণ: কার্যকারিতা নির্দেশ করে এমন বর্ণনামূলক নাম ব্যবহার করুন
3. ডকুমেন্টেশন: সমস্ত প্যারামিটার এবং ব্যবহারের উদাহরণ ডকুমেন্ট করুন
4. এরর হ্যান্ডলিং: সংবেদনশীল ডিফল্ট প্রদান করুন এবং অনুপস্থিত প্যারামিটার হ্যান্ডেল করুন
5. পারফরম্যান্স: ঘনঘন ব্যবহৃত শর্টকোডে জটিল গণনা এড়িয়ে চলুন
6. অ্যাক্সেসিবিলিটি: তৈরি করা HTML অ্যাক্সেসিবল কিনা তা নিশ্চিত করুন
7. মোবাইল ফ্রেন্ডলি: মোবাইল ডিভাইসে শর্টকোড পরীক্ষা করুন

সাধারণ ব্যবহারের ক্ষেত্র

ডকুমেন্টেশন

<!-- API endpoint documentation -->
&#123;&#123;< api method="GET" path="/api/users" >&#125;&#125;
Returns a list of all users.
&#123;&#123;< /api >&#125;&#125;

<!-- Parameter documentation -->
&#123;&#123;< param name="userId" type="string" required="true" >&#125;&#125;
The unique identifier for the user.
&#123;&#123;< /param >&#125;&#125;

ই-লার্নিং

<!-- Quiz questions -->
&#123;&#123;< quiz >&#125;&#125;
  &#123;&#123;< question "What is 2+2?" >&#125;&#125;
    &#123;&#123;< answer correct="true" >&#125;&#125;4&#123;&#123;< /answer >&#125;&#125;
    &#123;&#123;< answer >&#125;&#125;3&#123;&#123;< /answer >&#125;&#125;
    &#123;&#123;< answer >&#125;&#125;5&#123;&#123;< /answer >&#125;&#125;
  &#123;&#123;< /question >&#125;&#125;
&#123;&#123;< /quiz >&#125;&#125;

প্রোডাক্ট শোকেস

&#123;&#123;< product-card
     name="Premium Widget"
     price="$99.99"
     image="/products/widget.jpg"
     rating="4.5"
     reviews="245" >&#125;&#125;

শর্টকোড বনাম কম্পোনেন্ট

ফিচার	শর্টকোড	React কম্পোনেন্ট
বিল্ড টাইম	✅ বিল্ডে রেন্ডার্ড	❌ রানটাইম
ইন্টারঅ্যাক্টিভিটি	❌ স্ট্যাটিক	✅ ডাইনামিক
লার্নিং কার্ভ	✅ সহজ	⚠️ মাঝারি
ফ্লেক্সিবিলিটি	⚠️ সীমিত	✅ উচ্চ
পারফরম্যান্স	✅ দ্রুত	⚠️ বান্ডেলের উপর নির্ভরশীল

HTML থেকে শর্টকোডে মাইগ্রেশন

আগে (Raw HTML)

<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">Warning!</h4>
  <p>This is a warning message.</p>
</div>

### পরে (শর্টকোড)

```markdown
&#123;&#123;% alert type="warning" title="Warning!" %&#125;&#125;
This is a warning message.
&#123;&#123;% /alert %&#125;&#125;

শর্টকোড ডিবাগিং

Hugo ডিবাগ

<!-- In shortcode template -->
&#123;&#123; printf "%#v" . &#125;&#125;

<!-- Print all params -->
&#123;&#123; range $key, $value := .Params &#125;&#125;
  &#123;&#123; $key &#125;&#125;: &#123;&#123; $value &#125;&#125;
&#123;&#123; end &#125;&#125;

Jekyll ডিবাগ

def render(context)
  puts "Debug: #{@params.inspect}"
  # ... rest of code
end

পারফরম্যান্স বিবেচনা

1. ক্যাশিং: ব্যয়বহুল গণনা ক্যাশ করুন
2. লেজি লোডিং: নন-ক্রিটিক্যাল কন্টেন্ট স্থগিত করুন
3. API কল কমান: সম্ভব হলে রিকোয়েস্ট ব্যাচ করুন
4. ইমেজ অপ্টিমাইজ: উপযুক্ত সাইজ এবং ফরম্যাট ব্যবহার করুন
5. কোড স্প্লিটিং: প্রয়োজন হলে JavaScript লোড করুন

উপসংহার

শর্টকোড কন্টেন্ট ফাইল পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য রাখার সময় কাস্টম ফাংশনালিটি দিয়ে মার্কডাউন এক্সটেন্ড করার একটি শক্তিশালী উপায় প্রদান করে। আধুনিক স্ট্যাটিক সাইট এবং ডকুমেন্টেশন সিস্টেম তৈরির জন্য এগুলি অপরিহার্য টুল।

অতিরিক্ত রিসোর্স

• Hugo শর্টকোড ডকুমেন্টেশন
• Jekyll Liquid ট্যাগ
• MDX কম্পোনেন্ট
• Eleventy শর্টকোড