كود لتكامل منتدى Ghost-Discourse منسق بشكل صحيح؟

مرحباً بالجميع –

المشكلة: هكذا يظهر منشوري في Ghost كموضوع على منتدياتي في Discourse…

(رابط مباشر هنا https://noobish.me/t/test-for-discourse-embedding/48)

بالطبع، هذا ما أريده أن يبدو عليه التضمين الفعلي في منشور المنتدى (أريده أن يبدو مثل المنشور الذي يظهر في صفحة المدونة)…

(رابط مباشر هنا https://jen.studio/test-for-discourse-embedding/)

هذا هو مصدر post.hbs الخاص بي حيث لدي كود تضمين Discourse:

{{!
< default}}
{{#post}}
    <div class="tagShare">
        <div class="shareIcon icon-share"><!-- --></div>
        <div class="share">
            <a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
                    onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"></a>
            <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
                    onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"></a>
        </div>
    </div>  
    <article id="postMain" class="{{post_class}}">
    
      <section class="postContent doubleColumn">
      
        <h1 class="postTitle">{{{title}}}</h1>
        <div class="tags" style="color: #ef6752">#{{tags separator="#"}}</div>
        <time class="dateStamp" datetime="{{date format='YYYY-MM-DD'}}">
            <span>&mdash;&ensp;</span>
            <i>Published {{date format="DD MMM"}} by {{authors}}</i>
            <span>&ensp;&mdash;</span>
        </time>
        
        <center><p><i>{{{custom_excerpt}}}</i></p></center>
        {{#if prev}}
          <link rel="previous" href="{{page_url prev}}"></link>
        {{/if}}
        {{#if next}}
          <link rel="next" href="{{page_url next}}"></link>
        {{/if}}

        {{#if feature_image}}
        <figure class="article-image heroImage showHeroImage">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
                srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(min-width: 1400px) 1400px, 92vw"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />
        </figure>
        {{/if}}
        
        {{content}}

      </section>
      
            <div id='discourse-comments'></div>
            <script type="text/javascript">
              DiscourseEmbed = { discourseUrl: 'https://noobish.me/',
                                 discourseEmbedUrl: '{{url absolute="true"}}' };
            
              (function() {
                var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
                d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
              })();
            </script>

    </article>

{{/post}}

لقد اتبعت التعليمات هنا…

لقد قمت بحل هذا جزئيًا.

في إعدادات مسؤول منتدى Discourse على https://noobish.me/admin/customize/embeddingsettings

هناك تحت Crawler Settings

أضفت المحدد CSS المحدد فقط حيث (للموضوع المحدد الذي أعمل عليه) يقع المحتوى الرئيسي للمنشور…

ما زلت أود أن أعرف ما إذا كانت هناك طريقة لإحضار صورة واحدة أو أكثر من تدوينة إلى إدخال المنتدى.

يمكنك التحقق من ذلك ومحاولة القيام بنفس الشيء باستخدام بيانات العلامات الوصفية الخاصة بك وبعض البرمجة بلغة جافاسكريبت: GitHub - discourse/onebox: (DEPRECATED) A gem for turning URLs into website previews