تحسين عرض الاقتباسات بـ jQuery وتصميم CSS مخصص

[كود جيفري]

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

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

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

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

$(function() {
    var collapsedHeight = 168;
    var animationSpeed = 200;
    var scrollTopOffset = 80;

    var sCSS = '<style>' +
        'blockquote.awesome-quote {' +
        '    background-color: #2D2A2E !important;' +
        '    border: 1px solid #413D42 !important;' +
        '    border-left: 4px solid #FFD866 !important;' +
        '    border-radius: 6px;' +
        '    margin: 1em auto;' +
        '    box-shadow: 0 4px 15px rgba(0,0,0,0.2);' +
        '    padding: 0;' +
        '    overflow: hidden;' +
        '}' +
        '.quote-content-wrapper {' +
        '    color: #FCFCFA;' +
        '    font-family: "Fira Code", "Source Code Pro", Consolas, monospace !important;' +
        '    font-size: 14px !important;' +
        '    line-height: 1.7 !important;' +
        '    padding: 15px 20px;' +
        '}' +
        '.quote-content-wrapper.collapsed {' +
        '    max-height: ' + collapsedHeight + 'px;' +
        '    overflow: hidden;' +
        '    position: relative;' +
        '    padding-bottom: 0;' +
        '}' +
        '.quote-content-wrapper.collapsed::after {' +
        '    content: "";' +
        '    position: absolute;' +
        '    bottom: 0; left: 0; right: 0; height: 50px;' +
        '    background: linear-gradient(to top, #2D2A2E, transparent);' +
        '    pointer-events: none;' +
        '}' +
        '.quote-line {' +
        '    display: block;' +
        '    padding: 2px 0 !important;' +
        '}' +
        '.quote-line:nth-child(even) {' +
        '    background-color: #312F32;' +
        '    margin: 0 -20px;' +
        '    padding-left: 20px !important;' +
        '    padding-right: 20px !important;' +
        '}' +
        '.quote-controls {' +
        '    text-align: center;' +
        '    padding: 12px 0;' +
        '    background-color: #2D2A2E;' +
        '    border-top: 1px solid #413D42;' +
        '}' +
        '.show-more-btn {' +
        '    background-color: #413D42 !important;' +
        '    color: #FCFCFA !important;' +
        '    border: none !important;' +
        '    border-bottom: 2px solid #FC9867 !important;' +
        '    border-radius: 4px;' +
        '    padding: 8px 22px;' +
        '    font-size: 12px;' +
        '    font-weight: 600;' +
        '    cursor: pointer;' +
        '    transition: all 0.2s ease;' +
        '    width: 120px;' +
        '    text-align: center;' +
        '}' +
        '.show-more-btn:hover {' +
        '    transform: translateY(-2px);' +
        '    border-bottom-width: 4px;' +
        '    color: #ffffff !important;' +
        '}' +
        '</style>';

    $('head').append(sCSS);

    $('blockquote').each(function() {
        var $quote = $(this);
        var originalContent = $quote.html();
        
        var lines = originalContent.replace(/<p[^>]*>/g, '').replace(/<\/p>/g, '<br>').split(/<br\s*\/?>/i);
        var newContent = '';
        for (var i = 0; i < lines.length; i++) {
            var lineText = $.trim(lines[i]);
            if (lineText !== '') {
                newContent += '<span class="quote-line">' + lineText + '</span>';
            }
        }
        
        $quote.addClass('awesome-quote').empty();
        
        var $contentWrapper = $('<div class="quote-content-wrapper">' + newContent + '</div>');
        $quote.append($contentWrapper);

        if ($contentWrapper[0].scrollHeight > collapsedHeight + 20) {
            
            $contentWrapper.addClass('collapsed');
            
            var $controls = $('<div class="quote-controls"></div>');
            var $button = $('<button class="show-more-btn">عرض المزيد...</button>');
            $controls.append($button);
            $quote.append($controls);

            $button.on('click', function() {
                var $currentButton = $(this);
                var $content = $currentButton.closest('.awesome-quote').find('.quote-content-wrapper');

                if ($content.hasClass('collapsed')) {
                    $content.animate({ maxHeight: $content[0].scrollHeight + 20 }, animationSpeed, function() {
                        $content.removeClass('collapsed').css('max-height', '');
                    });
                    $currentButton.text('طي الاقتباس');
                } else {
                    $('html, body').animate({ scrollTop: $content.closest('.awesome-quote').offset().top - scrollTopOffset }, animationSpeed);
                    $content.animate({ maxHeight: collapsedHeight }, animationSpeed, function() {
                        $content.addClass('collapsed');
                    });
                    $currentButton.text('عرض المزيد...');
                }
            });
        }
    });
});

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

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

صاحب الكود: Lufy