تضمين عنصر واجهة مستخدم ضمن نص في موضوع

الدعم
2

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

<html>
  <head>
    محتوى الرأس بما في ذلك السكربت الخاص بك
  </head>
  <body>
    <section id="main">
      محتوى الصفحة
    </section>
  </body>
</html>

عند التنقل إلى صفحة أخرى، فإن الشيء الوحيد الذي يتم إعادة تحميله هو المحتوى داخل

<section id="main">

لذلك، تغيرت بنية DOM، ولا يعمل السكربت المخصص مرة أخرى. إذا حاولت زيارة صفحة الموضوع مباشرة، فسترى أنها تُحمّل بشكل صحيح.

image
image1143×696 117 KB
.

إذن، السؤال الآن هو كيفية جعلها تعمل مع Discourse.

يحتوي plugin-api على طريقة يمكنك استخدامها لـ “تزيين” المنشورات.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L282-L318

يمكنك استخدام ذلك لتشغيل سكربتات جهات خارجية عند عرض منشور.

إليك الكود الذي ستحتاجه. أضف هذا إلى تبويب common > header في سمةك.

<script type="text/discourse-plugin" version="0.8">
const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";

const loadScript = require("discourse/lib/load-script").default;
const { iconHTML } = require("discourse-common/lib/icon-library");

const composerPreviewIcon = iconHTML(PREVIEW_ICON, {
  class: "woxo-preview-icon"
});

const previewMarkup = () => {
  const markup = `<div class="woxo-preview">${composerPreviewIcon}</div>`;
  return markup;
};

// إنشاء مُزيّن للمنشورات
api.decorateCookedElement(
  post => {
    const woxoWidgets = post.querySelectorAll("div[data-mc-src]");

    if (woxoWidgets.length) {
      woxoWidgets.forEach(woxoWidget => {
        if (post.classList.contains("d-editor-preview")) {
          woxoWidget.innerHTML = previewMarkup();
          return;
        }

        loadScript(WOXO_SCRIPT_SRC).then(() => {
          const script = document.head.querySelector(
            `script[src*="cdn2.woxo.tech"]`
          );
          script.dataset.usrc = "";
          window.MC.Loader.init();
        });
      });
    }
  },
  { id: "render-woxo-widgets" }
);
</script>

ثم ستحتاج إلى إضافة بعض النطاقات لـ CSP. أضف هذه إلى إعداد موقعك

content_security_policy_script_src

https://*.woxo.tech/
https://us-central1-core-period-259421.cloudfunctions.net/availableComponentTracks

أخيرًا، ستحتاج إلى إضافة قليل من CSS للعرض الثابت في المحرر

يذهب هذا إلى تبويب common > CSS في سمةك.

.woxo-preview {
  height: 400px;
  width: 100%;
  background: var(--primary-low);
  display: flex;
  align-items: center;
  justify-content: center;
  .woxo-preview-icon {
    font-size: var(--font-up-4);
    color: var(--primary-high);
  }
}

ثم يمكنك فقط إضافة

<div data-mc-src="f4b43a8f-c188-4f80-8206-36d9f7529f13#instagram"></div>

إلى أي منشور، وستتم تصيير الودجات وستعمل بكامل طاقتها.

image
image1150×1567 129 KB

إذا نظرت إلى JavaScript، فستلاحظ أن لديه خيارين في الأعلى تمامًا.

const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";

غيّر WOXO_SCRIPT_SRC إلى المصدر الذي يقدمه لك woxo. يجب أن يكون نفسه لجميع التضمينات التي تنشئها.

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

image
image2100×1413 89.4 KB

ستظهر الأيقونة التي تختارها في المنتصف.

إليك نسخة مُعلّقة من الكود إذا أردت متابعة ما يحدث

الكود المعلق 
<script type="text/discourse-plugin" version="0.8">
// الخيارات
const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";

// نستخدم مكتبة تحميل السكربت في Discourse لضمان تحميل السكربتات بشكل صحيح. لا تقلق، فهي ذكية بما يكفي لعدم تكرار السكربت إذا كان محمّلًا بالفعل
const loadScript = require("discourse/lib/load-script").default;

// نحمّل دالة HTML للأيقونة في Discourse للحصول على SVG للأيقونة التي نريد استخدامها في معاينة المحرر الثابتة
const { iconHTML } = require("discourse-common/lib/icon-library");

// إعداد أيقونة معاينة المحرر
const composerPreviewIcon = iconHTML(PREVIEW_ICON, {
  class: "woxo-preview-icon"
});

// إنشاء دالة مساعدة لمحتوى معاينة المحرر
const previewMarkup = () => {
  const markup = `<div class="woxo-preview">${composerPreviewIcon}</div>`;

  return markup;
};

// إنشاء مُزيّن للمنشورات
api.decorateCookedElement(
  post => {
    // هل يحتوي هذا المنشور على ودجات woxo؟
    const woxoWidgets = post.querySelectorAll("div[data-mc-src]");

    // نعم، إذن دعنا نقوم ببعض العمل.
    if (woxoWidgets.length) {
      // لكل ودجة woxo
      woxoWidgets.forEach(woxoWidget => {
        // إذا كانت ودجة في المحرر، استبدلها بمعاينة ثابتة واخرج مبكرًا
        if (post.classList.contains("d-editor-preview")) {
          woxoWidget.innerHTML = previewMarkup();
          return;
        }

        // إذا لم تكن في المحرر، حمّل سكربت woxo.
        loadScript(WOXO_SCRIPT_SRC).then(() => {
          // سكربت woxo غريب جدًا. لن يعمل إلا إذا كان وسم السكربت يحتوي على سمة data-usrc فارغة. لذا، دعنا نضيفها
          const script = document.head.querySelector(
            `script[src*="cdn2.woxo.tech"]`
          );
          script.dataset.usrc = "";

          // كل شيء جاهز، دعنا نستدعي دالة init في سكربت woxo
          window.MC.Loader.init();
        });
      });
    }
  },
  // أضف معرفًا للمُزيّن لتجنب تسرب الذاكرة
  { id: "render-woxo-widgets" }
);

</script>