إضافة شريط تحليلات المشاركة الاحترافي

[كود جيفري]

يحب كثير من القراء أن يعرفوا قبل البدء في قراءة موضوع ما حجمه والوقت الذي سيستغرقه، تمامًا كما تفعل المدونات والمواقع الحديثة. هذا الكود يضيف شريط تحليلات أنيقًا للمشاركات، يعرض عدد الكلمات ووقت القراءة المقدر، ويحصي الروابط والصور الموجودة داخل المشاركة، فيمنح المنتدى لمسة عصرية ويساعد القارئ على اتخاذ قرار القراءة بسرعة. والكود يعمل على النسخة الأخيرة AwesomeBB، ويمكن تجربته على بقية النسخ باتباع خطوة تعديل قالب الموضوع.

مثال على الكود​

شرح تركيب الكود​

الخطوة الأولى: أكواد الهيدر
لوحة الإدارة ← مظهر المنتدى ← التومبلايتات والقوالب ← إدارة عامة، ثم عدّل قالب overall_header وابحث عن:

{CSS}
    <meta name="theme-color" content="{GG_THEME_COLOR}" />

وضع بعده الكود التالي:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">

الخطوة الثانية: قالب الموضوع
من نفس المكان عدّل قالب viewtopic_body وابحث عن:

{postrow.displayed.EDITED_MESSAGE}

واستبدله بالسطر التالي:

<span class="edit-notice">{postrow.displayed.EDITED_MESSAGE}</span>

ثم ابحث عن التالي:

 <!-- BEGIN switch_signature -->
 <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>

وأضف بعده مباشرة السطر التالي:

<div class="stats-bar-placeholder"></div>

الخطوة الثالثة: ورقة تصميم CSS
لوحة الإدارة ← مظهر المنتدى ← ألوان المنتدى ← ورقة تصميم CSS، وضع الكود التالي:

:root {
    --stats-font-family: 'Cairo', sans-serif;
    --stats-bg-color: #ffffff;
    --stats-border-color: #eef2f7;
    --stats-shadow-color: rgba(101, 119, 134, 0.1);
    --stats-title-color: #2c3e50;
    --stats-item-bg-color: #f8f9fa;
    --stats-item-bg-hover: #e9ecef;
    --stats-item-text-color: #566573;
    --stats-item-icon-color: #8899a6;
}

.post-stats-bar {
    background-color: var(--stats-bg-color);
    padding: 20px 25px;
    margin-top: 30px;
    border: 1px solid var(--stats-border-color);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0 4px 12px var(--stats-shadow-color);
    -moz-box-shadow: 0 4px 12px var(--stats-shadow-color);
    box-shadow: 0 4px 12px var(--stats-shadow-color);
    font-family: var(--stats-font-family);
    text-align: right;
    overflow: hidden;
}

.stats-bar-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.25em;
    font-weight: 700;
    color: var(--stats-title-color);
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--stats-border-color);
}

.stats-bar-title::before {
    content: 'analytics';
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 26px;
    line-height: 1;
    display: inline-block;
    color: var(--stats-title-color);
    margin-left: 12px;
    opacity: 0.8;
}

.stats-items-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    gap: 12px;
}

.stat-item {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    background-color: var(--stats-item-bg-color);
    color: var(--stats-item-text-color);
    padding: 8px 14px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 400;
    -webkit-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    cursor: help;
    border: 1px solid transparent;
}

.stat-item:hover {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
    background-color: var(--stats-item-bg-hover);
    -webkit-box-shadow: 0 2px 6px var(--stats-shadow-color);
    -moz-box-shadow: 0 2px 6px var(--stats-shadow-color);
    box-shadow: 0 2px 6px var(--stats-shadow-color);
}

.stat-item .material-icons {
    font-size: 18px;
    color: var(--stats-item-icon-color);
}

@media (max-width: 768px) {
    .post-stats-bar {
        padding: 15px;
        text-align: center;
    }

    .stats-bar-title {
        font-size: 1.15em;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    
    .stats-items-container {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

الخطوة الرابعة: كود الجافا سكريبت
لوحة الإدارة ← عناصر إضافية ← إدارة أكواد Javascript، وأنشئ كودًا جديدًا:
العنوان: اكتب ما تريد
أضف الكود إلى: المواضيع

(function($) {
    $(document).ready(function() {
        const lang = {
            statsBarTitle: "تحليلات المشاركة",
            wordCount: "عدد الكلمات",
            word: "كلمة",
            words: "كلمات",
            word_singular_after_10: "كلمة",
            readingTime: "وقت القراءة التقديري",
            readingTimeMinutes: "دقائق",
            readingTimeMinute: "دقيقة واحدة",
            readingTimeLessThanAMinute: "أقل من دقيقة",
            links: "عدد الروابط",
            link: "رابط",
            links_plural: "روابط",
            images: "عدد الصور",
            image: "صورة",
            images_plural: "صور"
        };

        const config = {
            showTitle: true,
            showWordCount: true,
            showReadingTime: true,
            showLinkCount: true,
            showImageCount: true,
            averageReadingSpeed: 200
        };

        function getArabicPlural(number, single, dual, plural) {
            const absNumber = Math.abs(number);
            if (absNumber === 1) return single;
            if (absNumber === 2) return dual;
            if (absNumber >= 3 && absNumber <= 10) return plural;
            return single;
        }

        $('.post-wrap').each(function() {
            try {
                const postContainer = $(this);
                const postContentElement = postContainer.find('.post-content');
                const placeholder = postContainer.find('.stats-bar-placeholder');

                if (postContentElement.length === 0 || placeholder.length === 0) return;

                const contentToAnalyze = postContentElement.clone();
                contentToAnalyze.find('.post-signature, .post-stats-bar, .code, .edit-notice').remove();
                contentToAnalyze.find('a').each(function() {
                    const link = $(this);
                    const linkText = link.text().trim();
                    const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
                    if (urlRegex.test(linkText)) {
                        link.remove();
                    }
                });

                const postText = contentToAnalyze.text().trim();
                let statsHTML = '';

                if (config.showWordCount) {
                    const wordMatches = postText.match(/[\p{L}\p{N}']+/gu) || [];
                    if (wordMatches.length > 0) {
                        statsHTML += `<span class="stat-item" title="${lang.wordCount}"><i class="material-icons">subject</i>${wordMatches.length} ${getArabicPlural(wordMatches.length, lang.word_singular_after_10, lang.word, lang.words)}</span>`;
                    }
                }

                if (config.showReadingTime) {
                    const wordMatchesForTime = postText.match(/[\p{L}\p{N}']+/gu) || [];
                    if (wordMatchesForTime.length > 0) {
                        const readingTime = Math.ceil(wordMatchesForTime.length / config.averageReadingSpeed);
                        let readingTimeText = (readingTime < 1) ? lang.readingTimeLessThanAMinute : (readingTime === 1) ? lang.readingTimeMinute : `${readingTime} ${lang.readingTimeMinutes}`;
                        statsHTML += `<span class="stat-item" title="${lang.readingTime}"><i class="material-icons">hourglass_empty</i>${readingTimeText}</span>`;
                    }
                }

                if (config.showLinkCount) {
                    const linkCount = postContentElement.find('a').length;
                    if (linkCount > 0) {
                        statsHTML += `<span class="stat-item" title="${lang.links}"><i class="material-icons">link</i>${linkCount} ${getArabicPlural(linkCount, lang.link, lang.link, lang.links_plural)}</span>`;
                    }
                }

                if (config.showImageCount) {
                    const imageCount = postContentElement.find('img:not(.emoji, .smiley, [data-emoji])').length;
                    if (imageCount > 0) {
                        statsHTML += `<span class="stat-item" title="${lang.images}"><i class="material-icons">image</i>${imageCount} ${getArabicPlural(imageCount, lang.image, lang.image, lang.images_plural)}</span>`;
                    }
                }

                if (statsHTML) {
                    const titleHTML = config.showTitle ? `<h4 class="stats-bar-title">${lang.statsBarTitle}</h4>` : '';
                    const finalBarHTML = `<div class="post-stats-bar">${titleHTML}<div class="stats-items-container">${statsHTML}</div></div>`;
                    placeholder.html(finalBarHTML);
                }
            } catch (e) {
                console.error("Stats Bar Error:", e);
            }
        });
    });
})(jQuery);

ثم اضغط على زر قدم.

إضافة تمنح مواضيعك طابع المواقع الاحترافية وتساعد القراء على تنظيم وقتهم. مع الشكر للعضو كونان2000 على ملاحظاته في تحسين الكود.

صاحب الكود: Lufy