أحداث Discourse

تخصيص إضافة
, ,
592

لا تظهر أي أخطاء في وحدة التحكم. لكنني سجّلت فيديوً للرجوع إليه.
يحدث هذا في كروم وفايرفوكس وسفاري. أما في سفاري على الجوال فلا يحدث.

إعجاب واحد (1)
593

رابط الفيديو الخاص بك معطل!

594

عذراً، لم أفهم جيداً في الواقع، أنت محق فعلاً: عند النقر على تاريخ في التقويم، يُفتح نافذة إنشاء حدث، ولكن مع زر «هل تريد التخلي؟». نعم، في الواقع هناك خطأ صغير :sweat_smile:

إعجابَين (2)
595

للمعلومة، من جانبي، أضفت زرًا بعلامة «+» للمعلومات لمستخدمي الذين لا يفكرون في النقر على العنوان للوصول إلى الموضوع. استلهمت الفكرة من @nathank بشأن زر «إضافة إلى التقويم» الخاص به.

ضع السكربت في مكون السمة في القسم العام /head

<script>
(() => {
    const eventInfoSelector = ".event-header .event-info";
    const eventCardSelector = ".fc-popover, .event-preview, .discourse-post-event";
    // CSS محقون نظيف ومناسب لمواضيع Discourse (فاتح/داكن)
    const style = document.createElement("style");
    style.innerHTML = `
    .custom-topic-info-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40%; /* يأخذ العرض الكامل لمظهر نظيف تحت العنوان */
        box-sizing: border-box;
        margin: 12px 0 6px 0;
        padding: 10px 16px;
        
        /* استخدام متغيرات Discourse الأصلية */
        background-color: var(--tertiary) !important; /* لون مميز (مثل الأزرق) */
        color: var(--secondary) !important;          /* لون نص متباين */
        
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        transition: background-color 0.2s ease, transform 0.1s ease;
    }
    /* تأثير عند التمرير */
    .custom-topic-info-btn:hover {
        background-color: var(--tertiary-hover) !important;
        color: var(--secondary) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    /* تأثير عند النقر */
    .custom-topic-info-btn:active {
        transform: translateY(0);
    }
    /* تنسيق أيقونة SVG */
    .custom-topic-info-btn .btn-icon-svg {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
    `;
    document.head.appendChild(style);
    const findTopicLink = (container) => {
        if (!container) return null;
        const links = [...container.querySelectorAll('a[href*="/t/"]')];
        if (links.length) return links[0].href;
        return null;
    };
    const createTopicInfoButton = () => {
        const eventInfo = document.querySelector(eventInfoSelector);
        if (!eventInfo || eventInfo.querySelector(".custom-topic-info-btn")) return;
        const card = eventInfo.closest(eventCardSelector) || document;
        const topicUrl = findTopicLink(card);
        if (!topicUrl) return;
        const button = document.createElement("a");
        button.className = "btn custom-topic-info-btn";
        button.title = "عرض الموضوع الكامل";
        button.href = topicUrl;
        
        // إضافة أيقونة معلومات SVG متناسقة
        button.innerHTML = `
            <svg class="btn-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V240h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h40c13.3 0 24 10.7 24 24v120h24c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"/>
            </svg>
            <span class="d-button-label">مزيد من المعلومات</span>
        `;
        if (eventInfo.firstElementChild) {
            eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
        } else {
            eventInfo.appendChild(button);
        }
    };
    const observer = new MutationObserver(() => createTopicInfoButton());
    observer.observe(document.body, { childList: true, subtree: true });
    createTopicInfoButton();
})();
</script>

إليك المعاينة

image
image1017×617 60.5 KB

أو بدلاً من ذلك

هذا الكود

<script>
(() => {
    const eventCardSelector = ".fc-popover, .event-preview, .discourse-post-event";

    // CSS محقون لمظهر نظيف وعصري
    const style = document.createElement("style");
    style.innerHTML = `
    .custom-topic-info-wrapper {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--primary-low); /* خط فاصل خفيف */
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .custom-topic-info-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 16px;
        
        /* نمط Outline أنيق */
        background-color: transparent !important;
        color: var(--tertiary) !important;
        border: 1px solid var(--tertiary) !important;
        
        border-radius: 6px;
        font-weight: 600;
        text-decoration: none !important;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    /* تأثير التمرير: يمتلئ الزر */
    .custom-topic-info-btn:hover {
        background-color: var(--tertiary) !important;
        color: var(--secondary) !important;
        border-color: var(--tertiary) !important;
    }

    /* محاذاة شعار المعلومات */
    .custom-topic-info-btn .btn-icon-svg {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
    `;
    document.head.appendChild(style);

    const findTopicLink = (container) => {
        if (!container) return null;
        const links = [...container.querySelectorAll('a[href*="/t/"]')];
        if (links.length) return links[0].href;
        return null;
    };

    const createTopicInfoButton = () => {
        const cards = document.querySelectorAll(eventCardSelector);
        
        cards.forEach(card => {
            if (card.querySelector(".custom-topic-info-btn")) return;

            const topicUrl = findTopicLink(card);
            if (!topicUrl) return;

            const wrapper = document.createElement("div");
            wrapper.className = "custom-topic-info-wrapper";

            const button = document.createElement("a");
            button.className = "btn custom-topic-info-btn";
            button.title = "مراجعة الموضوع الكامل";
            button.href = topicUrl;
            
            // أيقونة "i" معلومات + نص جديد قابل للتنفيذ
            button.innerHTML = `
                <svg class="btn-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V240h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h40c13.3 0 24 10.7 24 24v120h24c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"/>
                </svg>
                <span class="d-button-label">مراجعة الموضوع</span>
            `;

            wrapper.appendChild(button);

            // التموضع فوق خيارات الرد (سأشارك، إلخ)
            const actionsContainer = card.querySelector(".status-and-options, .event-actions");
            const infoContainer = card.querySelector(".event-info");
            
            if (actionsContainer && actionsContainer.parentNode) {
                actionsContainer.parentNode.insertBefore(wrapper, actionsContainer);
            } else if (infoContainer) {
                infoContainer.appendChild(wrapper);
            } else {
                card.appendChild(wrapper);
            }
        });
    };

    const observer = new MutationObserver(() => createTopicInfoButton());
    observer.observe(document.body, { childList: true, subtree: true });

    createTopicInfoButton();
})();
</script>

معاينة النتيجة

image
image588×519 41.6 KB

لديك الخيار :rofl:

4 إعجابات
596

لقد حسّنتَ حقًا سهولة إنشاء حدث منذ آخر التحديثات :+1:

لكن، أودّ أن أعرف ما إذا كان هناك إعداد يمنع إنشاء حدث عند النقر على التقويم. ففي بعض الأحيان، بدلًا من النقر على الحدث نفسه، ينقر المستخدم بجانبه، مما يفتح نافذة منبثقة لإنشاء حدث :sweat_smile:

شكرًا لك

إعجابَين (2)
597

أعلم أنني مزعج، لكن لدي سؤال آخر أو اقتراح لتحسين الأحداث المنتهية. يمكن حذفها تلقائيًا لأنها لم تعد ذات فائدة، ويبدو أن إضافة «إيفنتس» كانت تفعل ذلك تلقائيًا.

حاليًا، أقوم بذلك يدويًا، لذا إذا كان هناك طريقة لتوفير الوقت :sweat_smile:

شكرًا للفريق

إعجاب واحد (1)
598

هل توجد أي طريقة لجعل الموقع في الحدث يقوم ببحث مشابه لما يُجرى في تقويم جوجل أو أحداث فيسبوك، وذلك: أ) لمساعدة المستخدم في اختيار الموقع، و ب) لجعل الموقع قابلاً للنقر لفتح تطبيق الخرائط؟

(لم أتمكن من العثور على أي حل عبر البحث، ولكن ربما لم تكن عبارات البحث التي استخدمتها جيدة)

إعجابَين (2)
599

يحتوي الرابط Locations Plugin 🌍 على هذا النوع من الوظائف، لكنه يتكامل فقط مع البديل Events Plugin 📅.

قد يكون المطور (@merefield) منفتحًا لدمجه مع الإضافة الرسمية، لكنني أتخيل أن ذلك سيتطلب جهدًا كبيرًا للإعداد والصيانة — لذا ستحتاج بالتأكيد إلى رعاية العمل لكي يحدث ذلك.

3 إعجابات
600

لقد حاولت البحث في إضافة الأحداث، لكنني تعثرت عند

لأن الموقع متوقف منذ أشهر.

إعجاب واحد (1)
601

قد يكون من الجدير تقديم طلب ميزة رسمي في قناة Contribute > Feature (الموسومة بـ calendar-and-events) للنظر فيه. أتخيل أن الأمر ممكن التحقيق - كما أنه يحمل إمكانات عالية القيمة للكثيرين.

لاحقًا…
قام @lou بذلك بالفعل هنا:

3 إعجابات
602

تم دمج منشور في موضوع موجود: دعم خريطة موقع الحدث

604

أخطط إلى تصدير الأحداث العامة إلى موقع ووردبريس باستخدام أحد إضافات ووردبريس التي تعرف كيفية قراءة تغذية ملف ICS من /discourse-post-event/events.ics. كل شيء يسير على ما يرام حتى الآن.

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

كنت آمل أن أتمكن من تصنيف الأحداث باستخدام علامة مرتبطة بكل صفحة بحيث تظهر في سطر CATEGORIES في ملف ICS للسماح بالتصفية حسب الوجهة، لكن يبدو أن هذا لا يحدث.

أكون مستعداً لاستخدام ?tag=[tag] في الرابط وجعل الصفحات المختلفة تستخدم روابط مختلفة أيضاً، رغم أنني لم أجد أن هذه ميزة من خلال قراءة ما تمكنت من العثور عليه.

هل هناك شيء ما لا آخذه في الاعتبار؟

605

لا، لا تفوتك أي شيء (حسب علمي).

إمكانية تصفية تغذية التقويم بصيغة .ics حسب الفئة و/أو الوسم ستكون طلب ميزة Contribute > Feature جديراً بالاهتمام!

إعجاب واحد (1)
606

لقد انتهى بي الأمر إلى بناء فلتر الوسوم الخاص بي، لكنني أعتقد أنني تعلمت أن الأحداث “منتهية الصلاحية” لا يتم تنزيلها عبر /discourse-post-event/events.ics. كما لا أرى أي طريقة للتحكم في الوقت الذي تصبح فيه الأحداث “منتهية الصلاحية”. قد يتعين عليّ اللجوء إلى استخدام استعلام في Data Explorer بدلاً من استخدام /…/events.ics

[على الرغم من أنني أعتقد أنني وجدت طريقة أفضل للقيام بذلك باستخدام /discourse-post-event/event ]

إعجاب واحد (1)
608

مرحبًا، أبحث عن ملاحظات حول جانب من جوانب دمج الأحداث مع الصوت والبث المباشر. انظر الرد الأخير هنا → https://meta.discourse.org/t/discourse-desktop-mac-app/406912/10?u=nicolsdennis

609

هل نجح أي شخص في دمج VDO.Ninja في البث المباشر للفعاليات؟ أرى تكامل زوم (Zoom) وأفكر أنه قد يكون هناك طريقة للتكيف معه بدلاً من استخدام زوم :thinking:

610

تم تقسيم 3 مشاركات إلى موضوع جديد: أسئلة حول تكامل بث Zoom المباشر

611

يبدو أن مسارات الأحداث القادمة في تقويم/أحداث Discourse تستبعد جميع بيانات Open Graph وTwitter-card من استجابة HTML المُصَدَّرة من الخادم في البداية.

يمكن تكرار هذه المشكلة على موقع Discourse مُستضاف، حيث تصدر الصفحات العادية بيانات اجتماعية صحيحة، ويتم تكوين صورة OpenGraph صالحة للموقع.

مثال على المسار المتأثر:

https://www.mbacommons.com/upcoming-events/month/2026/8/1

خطوات التكرار

  1. قم بتكوين صورة OpenGraph صالحة للموقع.
  2. تأكد من أن الصفحة الرئيسية أو موضوعًا عاديًا يصدر بيانات Open Graph العادية في كود HTML الخام.
  3. افتح /upcoming-events/month/2026/8/1.
  4. افحص كود view-source: الخام/استجابة الخادم الأولية، وليس DOM بعد تنفيذ JavaScript.

النتيجة الفعلية

يعيد مسار “الأحداث القادمة” حالة HTTP 200، لكن كود HTML الخام يحتوي على:

  • لا يوجد og:image
  • لا يوجد og:title
  • لا يوجد og:description
  • لا يوجد og:url
  • لا يوجد twitter:card
  • لا يوجد twitter:image

كما قمت باختبار استخدام LinkedInBot/1.0؛ وكانت النتيجة متطابقة.

أظهرت مراجعة إنتاجية لكود HTML الخام على نفس الموقع ما يلي:

  • الصفحة الرئيسية: 11 علامة بيانات اجتماعية
  • موضوع عادي: 14
  • الأحداث القادمة: 0

تستخدم الصفحة الرئيسية والمواضيع العادية صورة OpenGraph المُكوَّنة للموقع بشكل صحيح، لذا فإن تكوين العلامة التجارية على مستوى الموقع يعمل بشكل سليم.

النتيجة المتوقعة

يجب أن تصدر مسارات “الأحداث القادمة” بيانات اجتماعية قابلة للرؤية من قبل الزاحفات (crawlers) ومُصدَّرة من الخادم، بما في ذلك على الأقل:

  • og:title
  • og:description
  • og:url
  • og:image، مع اللجوء إلى صورة OpenGraph المُكوَّنة للموقع في حال عدم توفرها
  • بيانات Twitter-card المقابلة

يجب أن تكون هذه البيانات موجودة في كود HTML الأولي لأن زاحفات LinkedIn والمنصات الاجتماعية المماثلة لا يمكنها الاعتماد على JavaScript الخاص بالسمة (theme) في جانب العميل.

يبلغ مُفتّش منشورات LinkedIn حاليًا:

أضف علامة og:image إلى الصفحة للتحكم في صورة المحتوى على LinkedIn.

لا يبدو أن حقن head_tag في السمة العامة حلًا مناسبًا، لأن الصفحات العادية تحتوي بالفعل على بيانات صحيحة، وقد يؤدي ذلك إلى إنشاء علامات مكررة أو متضاربة. يبدو أن هذا يتطلب معالجة من جانب الخادم مدركة للمسارات (route-aware) لـ “الأحداث القادمة” أو استخدام مسار عرض بيانات Discourse الاجتماعية القياسي.

إعجابَين (2)
612

بث Peertube المباشر مع تقويم وأحداث Discourse

كان هذا يعمل بشكل جيد مع Peertube في الصيف الماضي (2025)، حيث كان يوفر واجهة الدردشة مع الموضوع (باستخدام رابط الفيديو /embed/xxx لعرض الفيديو المباشر، مع مراعاة التأخير البالغ حوالي 30 ثانية بسبب تقنية P2P في Peertube) عند وضع علامة #livestream.

لكنني حاولت مرة أخرى اليوم، ولا يبدو أن الدردشة مضمنة في التخطيط كما كانت من قبل (على الأقل من ذاكرتي). كما لا يوجد زر “بث مباشر” في واجهة الحدث. هل هذا أمر طبيعي؟

إعجابَين (2)
613

هل لاحظت التعليمات المحدّثة مؤخرًا؟ أعتقد أن واجهة المستخدم ربما تغيّرت بعض الشيء عندما تم دمج كل شيء في هذا الإضافة.

إعجاب واحد (1)