ما الجديد
مرحبا بك زائرنا الكريم في موقع شقاوي للتصميم والبرمجة اذا كانت هذه زيارتك اﻻولى فنتشرف بانضمامك لنا وان كنت احد كوكبة اعضائنا فأهلا بعودتك مرة أخرى

XF2.3 تحويل عنوان الموضوع الى هاشتاغات

يقدم هذا الكود حلًا تقنيًا مبتكرًا يهدف إلى تحسين تجربة المستخدمين في المنتديات الإلكترونية من خلال تحويل كلمات العنوان إلى هاشتاجات قابلة للبحث. تم تصميم...

شروحات ودروس زين فورو الجيل الثالث

Mc Nabulsy

عضو جديد
إنضم
22 ديسمبر 2024
المشاركات
18
مستوى التفاعل
13
النقاط
3
الإقامة
فلسطين
الموقع الالكتروني
يقدم هذا الكود حلًا تقنيًا مبتكرًا يهدف إلى تحسين تجربة المستخدمين في المنتديات الإلكترونية من خلال تحويل كلمات العنوان إلى هاشتاجات قابلة للبحث. تم تصميم الكود وتطويره بواسطة شركة انكور التطويرية. جاءت فكرة الكود استجابة لطلب تم طرحه في منتدى شقاوي، حيث كان الهدف الأساسي هو تسهيل عملية البحث عن المواضيع ذات الصلة باستخدام الكلمات المفتاحية بشكل ديناميكي. يعمل الكود على استخراج الكلمات الرئيسية من عناوين المواضيع، وتحويلها إلى روابط بحث فعّالة تُمكّن المستخدمين من العثور على المحتوى المرتبط بتلك الكلمات بسهولة وسرعة.

يتميز هذا الكود بمجموعة من الفوائد التي تعزز من تحسين محركات البحث (SEO) للمواقع التي يتم تطبيقه عليها. أولاً، يساهم في زيادة الترابط الداخلي بين الصفحات من خلال إنشاء روابط داخلية قائمة على الكلمات المفتاحية، مما يساعد محركات البحث على فهم هيكل الموقع بشكل أفضل. ثانيًا، يعزز الكود من تجربة المستخدم عبر تقليل الوقت اللازم للوصول إلى المحتوى المطلوب، مما يؤدي إلى تحسين معدلات البقاء على الموقع وتقليل معدلات الارتداد. وأخيرًا، من خلال استخدام الهاشتاجات كروابط بحث، يتم تعزيز ظهور الكلمات المفتاحية في نتائج البحث، مما يزيد من فرص جذب زيارات جديدة وتحقيق تصنيفات أعلى في محركات البحث.

طبعا انا اقوم بعمل اكواد بدلًا من الاضافات، لان الاضافات في الزين فورو كما لاحظت انها تحتاج تعديل وتغيير بتغير النسخ ومتابعة مستمرة على عكس الاكواد التي تبقى تعمل مهما تغيرت النسخ، الا في حالات قليلة ربما يصيبها عطل بتغيير النسخ. وتمت تجربة الكود على المنتدى الخاص بي نسخة 2.3.​

معاينة الكود​

Screenshot 2025-03-20 145810.png
Screenshot 2025-03-20 145817.png

تركيب الكود​

توجه نحو لوحة الادارة - المظهر - القوالب - ابحث عن القالب Thread_view وضع الكود التالي في بدايته او نهايته
JavaScript:
<script>
    // كود تحويل عنوان الموضوع الى هاشتاغات من تطوير منتدى انكور التطويري
(function() {
    function getThreadTitle() {
        const h1Element = document.querySelector('h1');
        if (h1Element) {
            return h1Element.textContent.trim();
        }
        
        const pageTitle = document.title;
        if (pageTitle) {
            const parts = pageTitle.split('|');
            if (parts.length > 0) {
                return parts[0].trim();
            }
            return pageTitle.trim();
        }
        
        return '';
    }
    
    function convertToHashtags(text) {
        if (!text) return [];
        
        const words = text.split(/\s+/);
        
        return words
            .filter(word => word.length >= 3)
            .map(word => {
                word = word.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
                if (word.length >= 3) {
                    return word;
                }
                return null;
            })
            .filter(tag => tag !== null);
    }
    
    function addHashtagsToPost(hashtags) {
        if (hashtags.length === 0) return;
        const messageBody = document.querySelector('.message-body');
        if (messageBody) {
            const bbWrapper = messageBody.querySelector('.bbWrapper');
            if (bbWrapper) {
                const hashtagsDiv = document.createElement('div');
                hashtagsDiv.className = 'message-hashtags';
                hashtagsDiv.style.marginTop = '20px';
                hashtagsDiv.style.paddingTop = '10px';
                hashtagsDiv.style.borderTop = '1px solid #eaeaea';
                hashtags.forEach(tag => {
                    const hashtagLink = document.createElement('a');
                    hashtagLink.href = `javascript:void(0);`;
                    hashtagLink.textContent = `#${tag}`;
                    hashtagLink.style.marginRight = '8px';
                    hashtagLink.style.textDecoration = 'none';
                    hashtagLink.style.fontWeight = 'bold';
                    hashtagLink.style.color = '#0066cc';
                    hashtagLink.addEventListener('click', () => {
                        performSearch(`#${tag}`);
                    });
                    
                    hashtagsDiv.appendChild(hashtagLink);
                });
                
                bbWrapper.appendChild(hashtagsDiv);
            }
        }
    }

    function performSearch(query) {
        const searchInput = document.querySelector('input[name="keywords"]');
        if (searchInput) {
            searchInput.value = query;
            const event = new Event('input', { bubbles: true });
            searchInput.dispatchEvent(event);
            const searchButton = document.querySelector('button[type="submit"], input[type="submit"]');
            if (searchButton) {
                searchButton.click();
            }
        } else {
            console.error("Search input not found!");
        }
    }
    
    function main() {
        const title = getThreadTitle();
        const hashtags = convertToHashtags(title);
        
        if (hashtags.length > 0) {
            addHashtagsToPost(hashtags);
        }
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', main);
    } else {
        main();
    }
})();
</script>

ان شاء الله الكود يعجبكم واي استفسار انا موجود
بالتوفيق للجميع
والسلام ختام
 
بارك الله فيك اخوي @Mc Nabulsy على هذا الكود الرائع والذي تم تجربته وهو يعمل بشكل فعال

وايضا افضل مافيه انه عباره عن كود جافا سكربت بدون استخدام اي مكتبة اي Vanilla JavaScript وهذا يعني ان الكود يمكن استخدامه لسنوات مقبلة حتى مع النسخ القادمة

لكن ان سمحت لي يالغالي اود اضافة نقطة بسيطة للكود تبعك وهو مجرد تنظيم للكود فانا افضل دائما ً ان ﻻ يتم زرع الاكواد مباشرة داخل القوالب كما هي

فالافضل ان يتم انشاء قالب جديد وليكن باسم hashtag_title ويتم وضع كود الجافا الذي قمت بارفاقه في هذا القالب

بعدها يتم استدعاء القالب في قالب thread_view بهذه الطريقة

HTML:
<xf:include template="hashtag_title" />

ومثل ما تفضلت يمكن وضع الكود باي مكان تحب

اكرر شكري وتقديري واحترامي لك
اخوك
شقاوي
 
فالافضل ان يتم انشاء قالب جديد وليكن باسم hashtag_title ويتم وضع كود الجافا الذي قمت بارفاقه في هذا القالب
انا هذه الطريقة لا اعرفها في الزينفورو ف انا حديث في استخدام هذا السكربت
ومنكم نستفيد اخي العزيز
 
بارك الله فيك يالغالي كلنا اخوان في هذا الموقع نفيد ونستفيد من بعض 🙏
 
عودة
أعلى