عرض محتوى مختلف ضمن موضوع بناءً على عضوية مجموعات المستخدم؟

أنا أعمل في استضافة discourse.org، لذا فإن الإضافات غير ممكنة بالنسبة لي في هذه الحالة. تخيل أن لدي موضوعًا منشورًا يمكن لأي شخص رؤيته.

إذا كان شخص ما في المجموعة “أ” فأريده أن يرى هذا المحتوى. إذا لم يكن كذلك، فأريده أن يرى هذا المحتوى الآخر. وبعض الموضوع يجب أن يراه الجميع. بشكل تخطيطي هكذا…

هذا محتوى يراه الجميع.

{تفكير أمني: فقط للأشخاص في المجموعة أ}
شكرًا لكونك في المجموعة الخاصة!
{/تفكير أمني}

{تفكير أمني: فقط للأشخاص الذين ليسوا في المجموعة أ}
مرحبًا، لدينا مجموعة خاصة يمكنك الانضمام إليها. [اقرأ المزيد عن ذلك](…)
{/تفكير أمني}

أنا واثق (لكنني نسيت بالضبط كيفية القيام بذلك) أنه يمكن القيام بذلك باستخدام مكون سمة لتعيين فئات CSS على المحتوى الذي أريد “تبديل” عرضه. سأفعل ذلك إذا كان هذا هو أفضل ما يمكنني اكتشافه.

لكن display: none في CSS ضعيف. أود إخفاء ما لا ينبغي لهم رؤيته من DOM. تم إخفاؤه من جانب الخادم إن أمكن، ولكني سأكتفي على الأقل بإخفائه من جانب المتصفح بناءً على جافاسكريبت. (يتطلب ذلك مستوى أعلى من الذكاء لتجاوزه مقارنة بـ display: none في CSS.)

إعجابَين (2)

bump! أحد؟ :~(

لماذا لا يمكننا الإشارة إلى @team :wink:

ليس لدي الكثير من الوقت للتعمق فيه الآن، ولكن قد تساعدك هذه المكونات الخاصة بالموضوع لأنها ستدرج جميع مجموعات المستخدم الحالي في، أعتقد، وسم body. بعد ذلك، يمكنك استخدام محددات CSS لإظهار/إخفاء بناءً على ما إذا كانت أسماء فئات مجموعات معينة موجودة في وسم body.

واجمع ذلك مع بعض المعلومات من هذا المنشور حول العناصر HTML التي يمكنك استخدامها في المنشئ وكيفية تغليف نص المنشئ في فئات، وقد ينجح الأمر:

نعم، لقد اختبرته للتو هنا ويجب أن يعمل إذا استخدمت هذا المكون مع شيء مثل:

<span data-group-a>نص للمجموعة أ فقط</span>
<span data-group-b>نص للمجموعة ب فقط</span>

ثم لديك محددات CSS تقوم بشيء مثل:

span[data-group-a] {display: none;}
body.group-a span[data-group-a] {display: block;}

أو شيء من هذا القبيل…

آسف على كل التعديلات. لقد اختبرته للتو على إحدى مثيلاتي ويعمل.

ولكن كما ذكرت، ربما هذا ليس ما كنت تريده :slight_smile:

قد يكون هذا ممكنًا باستخدام جافاسكريبت خاص بالموضوع، وإضافة شيء ما في قسم \u003chead\u003e لتحديد العناصر وإزالتها. قد لا يزال يتطلب التغليف كما هو مذكور أعلاه، ولكن إزالته من خلال ذلك.

3 إعجابات

حسنًا، أدركت أنني قد أحتاج هذا أيضًا، لذا تعمقت فيه أكثر :slight_smile:

هذا الكود لا يعمل بعد وليس جميلًا جدًا، لكن أعتقد أنه جيد بما يكفي ليتم وضعه في جزء < /head > من السمة، فقط يحتاج إلى الطريقة الصحيحة لتحديد العناصر باستخدام JS:

  <script type="text/discourse-plugin" version="0.8.42">

  api.decorateCookedElement(
    element => {
      var hasGroupA = document.body.classList.contains('group-a');

      const group_a_spans = element.querySelectorAll("span[data-group-a]");

      if (!group_a_spans.length) {
        return;
      }

      if (!hasGroupA) {
        group_a_spans.forEach(function (el) {
           el.innerHTML = "";
        });
      }

      },
      { id: "THEME-ID", onlyStream: true }
   );
  </script>

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

تعديل: تم إصلاحه بحيث تعمل محددات CSS. كرر الكود لعدد المجموعات التي تريد استخدامها. قم بتغيير THEME-ID إلى اسم فريد. أعتقد أن هذا يجب أن يعمل :slight_smile:

عفوًا، لم أحصل على هذا الجزء بعد:

3 إعجابات

أنا أقدر حقًا جهودك في هذا… ما زلت أفكر في هذا وأعتقد أنك بدأتني في حل قابل للتطبيق. لدي مكون قالب كتبته، مما يجعلني أعتقد أنني أستطيع جعل شيء كهذا يعمل…

لنفترض أنني أتخيل مكونًا “foobar”. يمكنني كتابة موضوع، مضيفًا بعض DIVs مثل هذا…

<div data-custom="foobar" data-foobar="<groupname>">
</div>
<div data-custom="foobar" data-foobar="!<groupname>">
</div>

يقوم المكون بعد ذلك بحذف أحد DIVs أو الآخر من DOM، بناءً على مجموعة المستخدم الذي يشاهد.

هذا يبدو لي أقوى من CSS display: none; وهو أمر تافه لإعادته عبر ميزات فحص DOM لأي متصفح ويب. لتجاوز هذا، سيحتاج شخص ما إلى تغيير جافا سكريبت الذي يتم تشغيله عند تحميل الصفحة - ممكن، ولكنه أصعب بكثير.

لماذا أريد هذا؟

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

هذا موضوع رائع حقًا. هذه الفقرة الأولى
مثيرة للاهتمام حقًا.

<div data-custom="foobar" data-foobar="<groupname>">
هنا بقية المحتوى.
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
مرحبًا، آسف للمقاطعة!
هناك المزيد من المحتوى هنا لأعضائنا الكرام...
هل ترغب في معرفة المزيد عن أن تصبح واحدًا؟
</div>

يرى الأشخاص في المجموعة ببساطة الموضوع بأكمله. لا توجد علامة على أي جدار دفع.

يرى الأشخاص خارج المجموعة الجزء الأولي، وليس في أي من DIVs أعلاه، وجدار دفع.

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

أخيرًا تم الانتهاء من تجميع هذا كـ، GitHub - Umbrella-CAST/discourse-umbrella-groupswitchdisplay: Discourse theme component for manipulating inline content based on group membership.. بسيط جدًا، يزيل فقط عنصر DIV المستهدف من DOM بناءً على ما إذا كان المستخدم الحالي في مجموعة باسم “foobar” أم لا في المجموعة عبر “!foobar”. هذا يسمح لي بالحصول على عرض تبديل بسيط للمحتوى مثل الصورة أدناه.

بالطبع، إذا تم تعطيل المكون، فسيتم عرض كل المحتوى (لأن DOM بدون المكون لا يتم تقليصه). لكن هذا جيد بما يكفي لما أريد القيام به.

4 إعجابات

لقد قمت بحل إحدى مشاكلي المماثلة جدًا.

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.