دمج التعليقات من Discourse في تطبيق الصفحة المفردة الخاص بك

ويكي المجتمع المسؤولون
,
1

عند محاولة تطبيق [1] في تطبيق الصفحة الواحدة (SPA) الخاص بك والذي لا يوفر صفحات يتم عرضها من جانب الخادم، ستواجه مشاكل في النهاية، انظر: [2]

لذلك، بعد قليل من التجريب، أود تقديم النهج التالي. المثال في Vue.js، ومع ذلك، يمكن تكييفه بسهولة مع أطر عمل/مكتبات أخرى.

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

1. المشاكل في [1]

1.1. javascripts/embed.js لا يمكنه العمل مع المحتوى المعروض من جانب العميل

إن مقتطف \u003cscript\u003e...\u003c/script\u003e الذي يُطلب منك في [1] إدراجه في HTML الخاص بك لن يكون جزءًا من التنفيذ الذي نتبعه هنا. سنستخدم بعض أجزاء javascripts/embed.js التي يوفرها مثيل Discourse الخاص بك كدوال داخل SPA الخاص بنا.

1.2. Discourse لا يمكنه كشط المحتوى المعروض من جانب العميل

يقوم Discourse تلقائيًا بإنشاء مواضيع لكل منشور مدونة ويحاول الوصول إلى عنوان URL الأصلي (لمنشور مدونة) لتحديد العنوان والمحتوى. يفشل هذا مع SPA، لأن Discourse سيحصل على الجزء غير JavaScript منه، على سبيل المثال، نعتذر ولكن هذا الموقع لا يعمل بشكل صحيح بدون تمكين JavaScript. يرجى تمكينه للمتابعة.

سنستخدم مكون RSS Polling لتوفير البيانات اللازمة وإنشاء المواضيع لنا.

2. التنفيذ

2.1 RSS Polling وتغذية RSS/Atom

قم بإنشاء نقطة نهاية على موقعك توفر تغذية RSS أو Atom لمكون RSS Polling. يمكن أن تكون نقطة النهاية هذه مجرد ملف بتنسيق XML ثابت أو دالة من جانب الخادم توفر المحتوى بتنسيق XML، مثال:

URL: https://mysite.com/blog.atom

المحتوى:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title>منشورات مدونة موقعي</title>
  <link href="https://mysite.com/blog/"/>
  <updated>2022-07-03T09:02:48.721Z</updated>
  <id>urn:uuid:790c1857-b968-49cc-9fbd-bf7afe3552c2</id>

  <entry>
    <title>مقال عن التكنولوجيا</title>
    <author>
      <name>اسمك هنا</name>
    </author>
    <link href="https://mysite.com/blog/an-article-about-technology"/>
    <id>urn:uuid:f6cc13e4-d2eb-4385-af28-c867a94f48dc</id>
    <published>2022-07-03T00:00:00Z</published>
    <updated>2022-07-03T00:00:00Z</updated>
    <summary>دعنا نناقش بعض التكنولوجيا في هذا المقال.</summary>
  </entry>

</feed>

قم بتثبيت مكون RSS Polling لـ Discourse وفقًا لـ [3] (Discourse المستضاف) أو [4] (المستضاف ذاتيًا)

الإعدادات الموصى بها لـ RSS Polling في المسؤول → الإعدادات → المكونات الإضافية:

المفتاح القيمة
rss polling enabled true
rss polling frequency 10 (أي 10 دقائق)

أضف تغذية جديدة في تكوين مكون RSS Polling في المسؤول → المكونات الإضافية → RSS Polling

قم بتكوينه وفقًا لـ [3]:

المفتاح القيمة
URL https://mysite.com/blog.atom
Category Filter <هذا اختياري>
Author <حدد مؤلف المواضيع التي تم إنشاؤها تلقائيًا>
Category <حدد الفئة/الفئات التي سيتم نشر المواضيع التي تم إنشاؤها تلقائيًا فيها>
Tags <هذا اختياري>

2.2 تكوين موجه SPA

يستخدم Discourse الجزء الأخير من مسار عنوان URL كمعرف لمنشور مدونة فردي.

أمثلة:

https://mysite.com/blog/an-article-about-technology
https://mysite.com/blog/another-article-about-cats

قم بتكوين موجه SPA الخاص بك وفقًا لذلك، بحيث تتوافق منشورات المدونة الفردية مع عناوين URL الفردية.

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

2.3 مكون المقال

كما ذكرنا سابقًا، لا يمكننا استخدام النهج مع \u003cscript\u003e\u003c/script\u003e من [1]. لذلك نقوم بتنفيذ iframe وبعض الدوال من javascripts/embed.js في مكوننا:

Article.vue

أشياء يجب عليك تعديلها:

العنصر الوصف
#YOUR-DISCOURSE-URL# عنوان URL لمثيل Discourse الخاص بك، على سبيل المثال discourse.mysite.com)
#YOUR-SITE-URL# عنوان URL لموقعك، على سبيل المثال mysite.com ربما أيضًا %2Fblog%2F إذا كان مسار منشورات مدونتك ليس /blog/ 
<template>
  <div id="article">

    <!-- مقالك المنسق هنا -->

    <iframe
      v-if="slug"
      v-bind:src="`https://#YOUR-DISCOURSE-URL#/embed/comments?embed_url=https%3A%2F%2F#YOUR-SITE-URL#%2Fblog%2F${slug}%2F`"
      id="discourse-embed-frame"
      width="100%"
      v-bind:height="`${iframeHeight}px`"
      frameborder="0"
      scrolling="no"
      referrerpolicy="no-referrer-when-downgrade"
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    slug: null,     // الـ slug لمنشور المدونة، على سبيل المثال "an-article-about-technology" بينما المسار هو "https://mysite.com/blog/an-article-about-technology"
    iframeHeight: 0 // سيخبرنا Discourse بارتفاع iframe الدقيق (انظر: طريقة receiveMessage)
  }),

  methods: {
    // اتصال iframe
    receiveMessage(event) {
      if (!event) {
        return;
      }
      if (!(event.origin || "").includes("#YOUR-DISCOURSE-URL#")) {
        return;
      }

      if (event.data) {
        if (event.data.type === "discourse-resize" && event.data.height) {
          this.iframeHeight = +event.data.height;
        }

        if (event.data.type === "discourse-scroll" && event.data.top) {
          // البحث عن إزاحة iframe
          const destY = this.findPosY(this.$refs["discourse-embed-frame"]) + event.data.top;
          window.scrollTo(0, destY);
        }
      }
    },

    // شكرًا http://amendsoft-javascript.blogspot.ca/2010/04/find-x-and-y-coordinate-of-html-control.html
    findPosY(obj) {
      var top = 0;
      if (obj.offsetParent) {
        while (1) {
          top += obj.offsetTop;
          if (!obj.offsetParent) break;
          obj = obj.offsetParent;
        }
      } else if (obj.y) {
        top += obj.y;
      }
      return top;
    }
  },

  async created() {
    this.slug = this.$router.currentRoute.path.split("/")[2];
  },

  mounted() {
    window.addEventListener("message", this.receiveMessage);
  },
  beforeDestroy() {
    window.removeEventListener("message", this.receiveMessage);
  }
}
</script>

2.4 تكوين تضمين Discourse

الآن مع تفعيل RSS/Atom Feed polling والتنفيذ على موقعك، يمكننا أخيرًا تكوين التضمين على مثيل Discourse.

انتقل إلى المسؤول → تخصيص → تضمين وأضف مضيفًا:

المفتاح القيمة
Allowed Hosts عنوان URL الأساسي لموقعك > على سبيل المثال “mysite.com”
Class Name اسم فئة اختياري للتصميم
Path Allowlist على سبيل المثال “/blog/.*”
Post to Category نفس الفئة كما هو محدد في فئة RSS Polling

3. ملاحظات ختامية

سيقوم RSS/Atom feed polling وكذلك Discourse نفسه بإنشاء موضوع جديد إذا لم يكن موجودًا لمنشور المدونة الفردي. تأكد من أن RSS/Atom feed polling يأتي أولاً (أي انتظر حتى يتم إنشاء الموضوع قبل زيارة منشور المدونة على موقعك).

السبب: لا يمكن لـ Discourse كشط العنوان والملخص، لذلك سيكون الموضوع mysite.com والملخص سيكون نعتذر، ولكن هذا الموقع لا يعمل بدون جافاسكريبت. :wink:

إذا حدث أن جاء Discourse أولاً لسبب ما، يمكنك فقط حذف الموضوع والانتظار حتى يتم تشغيل RSS/Atom feed.

تحياتي
– MK2k

إعجابَين (2)