ITDCXA 📕 لیول 3 - لیکچر 18: ایڈوانسڈ ٹمپلیٹ موڈیفیکیشنز - ٹمپلیٹ سنٹیکس

 📕 لیول 3 - لیکچر 18: Advanced Template Modifications - Template Syntax

📅 تاریخ اجراء: 31 مارچ 2026
🎯 لیول: 3 - Advanced Developer
⏰ تخمینی وقت: 50-65 منٹ

📝 تعارف
🎨 Advanced Template Modifications سے پہلی ملاقات!
XenForo کا ٹیمپلیٹ سسٹم نہایت طاقتور اور لچکدار ہے۔ اس لیکچر میں ہم ٹیمپلیٹ syntax کی گہرائی میں جائیں گے اور ایڈوانسڈ modifications سیکھیں گے۔

💡 Template System کی خصوصیات:

• جدید ٹیمپلیٹ syntax

• کنڈیشنل سٹیٹمنٹس

• لوپس اور اریٹریشن

• سٹائل پراپرٹی ایڈٹس

🎯 اس لیکچر کے اہم نکات
✅ ہم کیا سیکھیں گے:
ٹیمپلیٹ syntax کا مکمل تصور
کنڈیشنل سٹیٹمنٹس کی گہری سمجھ
لوپس اور ڈیٹا رینڈرنگ
سٹائل پراپرٹی میں ترمیم

🛠️ عملی کام:
ایڈوانسڈ ٹیمپلیٹ modification بنانا
کنڈیشنل سٹیٹمنٹس کا استعمال
سٹائل پراپرٹی ایڈٹ کرنا

---

📝 Template Syntax کا مکمل تصور

💡 Basic Syntax Elements:

Element	Syntax	مقصد
Variables	{$variable}	ڈیٹا دکھانا
Functions	{{ phrase('title') }}	بلٹ ان فنکشنز
Conditions	<xf:if>	کنڈیشنل ڈسپلے
Loops	<xf:foreach>	اری پر لوپ
Macros	<xf:macro>	ری یوزایبل کوڈ
Includes	<xf:include>	دوسرے ٹیمپلیٹس شامل کرنا

🔧 Variable Display:

html

<!-- سادہ ویری ایبل -->
<h1>{$forum.title}</h1>

<!-- آبجیکٹ پراپرٹی -->
<div class="user-info">
    {$user.Profile.location}
</div>

<!-- ڈاٹ نوٹیشن -->
<span class="post-date">
    {$post.Post.date|date_format}
</span>

🔧 Functions اور Helpers:

html

<!-- Phrase function -->
<h2>{{ phrase('welcome_to_xenforo') }}</h2>

<!-- Link function -->
<a href="{{ link('threads', $thread) }}">
    {$thread.title}
</a>

<!-- Date formatting -->
<div class="post-date">
    {{ $post.post_date|date('M d, Y') }}
</div>

<!-- Number formatting -->
<span class="post-count">
    {{ $user.message_count|number }}
</span>

---

⚡ Conditional Statements کی گہری سمجھ

💡 Condition کی اقسام:

Condition	Syntax	مثال
User-based	is="$xf.visitor.isMemberOf(2)"	گروپ چیک
Page-based	is="{$template} == 'forum_view'"	صفحہ چیک
Device-based	is="$xf.visitor.is_browsing_with('mobile')"	ڈیوائس چیک
Data-based	is="{$thread.reply_count} > 10"	ڈیٹا چیک

🔧 Basic Conditions:

html

<!-- صارف گروپ چیک -->
<xf:if is="$xf.visitor.isMemberOf([2, 3])">
    <div class="vip-content">
        یہ مواد صرف VIP ممبران دیکھ سکتے ہیں
    </div>
</xf:if>

<!-- ڈیٹا چیک -->
<xf:if is="{$thread.reply_count} > 50">
    <span class="hot-thread">🔥 ہاٹ تھریڈ</span>
</xf:if>

🔧 Advanced Conditions with Multiple Criteria:

html

<!-- AND condition -->
<xf:if is="{$xf.visitor.isMemberOf(2)} AND {$thread.reply_count} > 100">
    <div class="special-content">
        VIP ممبران کے لیے خاص مواد (100+ replies)
    </div>
</xf:if>

<!-- OR condition -->
<xf:if is="{$thread.is_sticky} OR {$thread.is_locked}">
    <div class="thread-status">
        <xf:if is="{$thread.is_sticky}">📌 چسپاں</xf:if>
        <xf:if is="{$thread.is_locked}">🔒 مقفل</xf:if>
    </div>
</xf:if>

<!-- Nested conditions -->
<xf:if is="{$xf.visitor.is_moderator}">
    <xf:if is="{$thread.forum_id} == 5">
        <a href="{{ link('moderate', $thread) }}" class="button">
            موڈریٹ کریں
        </a>
    </xf:if>
</xf:if>

🔧 Switch/Case-like Conditions:

html

<xf:if is="{$thread.reply_count} == 0">
    <span class="new-thread">🆕 نیا</span>
<xf:elseif is="{$thread.reply_count} < 10" />
    <span class="active-thread">💬 فعال</span>
<xf:elseif is="{$thread.reply_count} < 50" />
    <span class="popular-thread">🔥 مقبول</span>
<xf:else />
    <span class="hot-thread">⭐ انتہائی مقبول</span>
</xf:if>

---

🔄 Loops اور ڈیٹا رینڈرنگ

💡 Loop کی اقسام:

Loop Type	Syntax	استعمال
Foreach	<xf:foreach loop="$items" value="$item">	Simple arrays
Key-Value	<xf:foreach loop="$items" key="$k" value="$v">	Associative arrays
Range	<xf:foreach loop="1..10" value="$i">	Number ranges

🔧 Basic Loops:

html

<!-- سادہ foreach -->
<xf:foreach loop="$forums" value="$forum">
    <div class="forum-item">
        <h3><a href="{{ link('forums', $forum) }}">{$forum.title}</a></h3>
        <p>{$forum.description}</p>
    </div>
</xf:foreach>

🔧 Advanced Loops with Key-Value:

html

<!-- Associative array loop -->
<xf:foreach loop="$stats" key="$key" value="$value">
    <tr>
        <td><strong>{$key|ucfirst}</strong></td>
        <td>{$value}</td>
    </tr>
</xf:foreach>

🔧 Loop with Conditions:

html

<!-- لوپ کے اندر کنڈیشن -->
<xf:foreach loop="$threads" value="$thread">
    <xf:if is="{$thread.is_sticky}">
        <div class="sticky-thread">
            <strong>📌 {$thread.title}</strong>
        </div>
    <xf:else />
        <div class="normal-thread">
            {$thread.title}
        </div>
    </xf:if>
</xf:foreach>

🔧 Loop with Counter:

html

<!-- لوپ کاؤنٹر -->
<xf:foreach loop="$items" value="$item" i="$i">
    <div class="item item-{$i}">
        <span class="number">{$i}.</span> {$item.title}
    </div>
</xf:foreach>

---

🎨 سٹائل پراپرٹی میں ترمیم

💡 Style Properties کی اقسام:

قسم	مقصد	مثال
Colors	رنگ سکیم	primary.less, palette.less
Typography	فونٹ سیٹنگز	typography.less
Layout	ڈھانچہ	layout.less
Components	اجزاء	components.less

🔧 Style Properties تک رسائی:

less

// extra.less میں کسٹم سٹائل
.custom-box {
    background-color: @xf-contentBg;
    border: 1px solid @xf-borderColor;
    padding: @xf-paddingMedium;
}

🔧 Dynamic Style Properties:

html

<!-- ٹیمپلیٹ میں سٹائل پراپرٹی کا استعمال -->
<div class="user-badge" style="background-color: {$user.customFields.badge_color};">
    {$user.username}
</div>

🔧 CSS Variables کا استعمال:

less

// extra.less میں CSS variables
:root {
    --primary-color: @xf-primaryColor;
    --secondary-color: @xf-secondaryColor;
    --accent-color: @xf-accentColor;
}

.custom-element {
    color: var(--primary-color);
    border-color: var(--accent-color);
}

---

⚙️ عملی مثال: مکمل Template Modification

🎯 مقصد: تھریڈ ویو پیج پر ایک کسٹم انفارمیشن باکس بنانا جو صارف کی سرگرمی دکھائے

🔸 سٹیپ 1: Template Hook کی شناخت

html

<!-- thread_view ٹیمپلیٹ میں -->
<xf:hook name="thread_view_before_messages">
    <!-- یہاں کسٹم باکس آئے گا -->
</xf:hook>

🔸 سٹیپ 2: کسٹم ٹیمپلیٹ بنانا

html

<!-- thread_view_custom_info TEMPLATE -->
<div class="thread-info-box custom-box">
    <xf:if is="{$thread.firstPost}">
        <xf:set var="$firstPost" value="{$thread.firstPost}" />
        
        <h3>{{ phrase('thread_information') }}</h3>
        
        <dl class="pairs">
            <dt>شروع کردہ:</dt>
            <dd>
                <a href="{{ link('members', $firstPost.User) }}">
                    {$firstPost.User.username}
                </a>
                <span class="muted">
                    ({{ $firstPost.post_date|date('M d, Y') }})
                </span>
            </dd>
        </dl>
        
        <xf:if is="{$thread.reply_count} > 0">
            <dl class="pairs">
                <dt>جوابات:</dt>
                <dd>{$thread.reply_count|number}</dd>
            </dl>
        </xf:if>
        
        <xf:if is="{$thread.view_count} > 0">
            <dl class="pairs">
                <dt>مناظر:</dt>
                <dd>{$thread.view_count|number}</dd>
            </dl>
        </xf:if>
        
        <xf:if is="{$thread.lastPost}">
            <xf:set var="$lastPost" value="{$thread.lastPost}" />
            <dl class="pairs">
                <dt>آخری جواب:</dt>
                <dd>
                    <a href="{{ link('members', $lastPost.User) }}">
                        {$lastPost.User.username}
                    </a>
                    <span class="muted">
                        ({{ $lastPost.post_date|date('M d, Y') }})
                    </span>
                </dd>
            </dl>
        </xf:if>
    </xf:if>
</div>

🔸 سٹیپ 3: Style Properties شامل کرنا

less

// extra.less میں
.thread-info-box {
    margin: 10px 0;
    padding: 15px;
    background-color: @xf-contentLight;
    border: 1px solid @xf-borderColorLight;
    border-radius: @xf-borderRadiusMedium;
    
    h3 {
        margin-top: 0;
        color: @xf-primaryColor;
        border-bottom: 1px solid @xf-borderColor;
        padding-bottom: 5px;
    }
    
    .pairs {
        margin: 5px 0;
        
        dt {
            display: inline-block;
            width: 100px;
            font-weight: bold;
            color: @xf-textColorMuted;
        }
        
        dd {
            display: inline-block;
            margin: 0;
        }
    }
}

🔸 سٹیپ 4: Template Hook میں شامل کرنا

html

<!-- thread_view ٹیمپلیٹ میں -->
<xf:hook name="thread_view_before_messages">
    <xf:include template="thread_view_custom_info" />
</xf:hook>

---

📋 اسائنمنٹ
🎯 مقصد:
اپنے فورم کے لیے ایک ایڈوانسڈ ٹیمپلیٹ modification بنائیں جو کم از کم 3 مختلف کنڈیشنز اور 2 لوپس استعمال کرے۔

✅ کامیابی کے معیار:

• 3 مختلف کنڈیشنل سٹیٹمنٹس کا استعمال

• 2 لوپس کا استعمال

• سٹائل پراپرٹیز کا استعمال

• ٹیمپلیٹ hook کا استعمال

🛠️ مطلوبہ کام:

1. ایک نیا ٹیمپلیٹ بنائیں جو صارف کی سرگرمی دکھائے

2. مختلف کنڈیشنز استعمال کریں (گروپ، ڈیٹا، ڈیوائس)

3. لوپ کا استعمال کرتے ہوئے ڈیٹا دکھائیں

4. سٹائل پراپرٹیز کا استعمال کریں

5. کسی صفحے پر hook کے ذریعے شامل کریں

📝 رپورٹ کا مواد:

1. ٹیمپلیٹ modification کا مکمل کوڈ

2. استعمال شدہ کنڈیشنز کی وضاحت

3. لوپس کی تفصیل

4. سٹائل پراپرٹیز کی فہرست

5. اسکرین شاٹ (اختیاری)

---

⚠️ عام مسائل اور حل

❌ مسئلہ: "Template modification نظر نہیں آ رہی"

text

حل:
1. Template name درست کریں
2. Hook کی موجودگی چیک کریں
3. Cache clear کریں
4. Permissions چیک کریں

❌ مسئلہ: "Condition کام نہیں کر رہی"

text

حل:
1. Variable name درست کریں
2. Data type چیک کریں
3. Syntax درست کریں
4. Debug میں print_r استعمال کریں

❌ مسئلہ: "Style apply نہیں ہو رہی"

text

حل:
1. extra.less چیک کریں
2. CSS specificity چیک کریں
3. Variable names درست کریں
4. Browser cache clear کریں

---

💡 بہترین مشقیں

🎯 Template Development تجاویز:

• Clean and readable code لکھیں

• Comments شامل کریں

• Reusable macros بنائیں

• Performance کو مدنظر رکھیں

🔧 تکنیکی تجاویز:

• Development mode استعمال کریں

• Browser developer tools استعمال کریں

• Test on multiple devices

• Version control استعمال کریں

---

🎊 اختتامیہ

مبارک ہو! اب آپ XenForo ٹیمپلیٹ سسٹم کے ماہر بن گئے ہیں۔ آپ نے سیکھا ہے:

✅ ٹیمپلیٹ syntax کا مکمل تصور
✅ کنڈیشنل سٹیٹمنٹس کی گہری سمجھ
✅ لوپس اور ڈیٹا رینڈرنگ
✅ سٹائل پراپرٹی میں ترمیم

اگلے لیکچر میں ہم سیکھیں گے:

• Basic ایڈآن ڈویلپمنٹ

• ایڈآن structure

• PHP for XenForo

📢 یاد رکھیں: "اچھا ٹیمپلیٹ ڈیزائن بہترین یوزر ایکسپیریئنس دیتا ہے!"

---

🏷️ ہیش ٹیگز

text

#TemplateModifications #TemplateSyntax #لیول3 #لیکچر18
#XenForoTemplates #ITDarasgahسرٹیفائیڈ
#ConditionalStatements #XenForoDeveloper

🔔 اگلا لیکچر: "Basic ایڈآن ڈویلپمنٹ - ایڈآن Structure"
📅 اگلی تاریخ: 14 اپریل 2026

"خوبصورتی تفصیلات میں پوشیدہ ہے"

• لڈوگ مِس وین ڈیر روہے

🎯 اب عملی کام شروع کریں اور اپنے ٹیمپلیٹ modifications بنائیں!