التفاعل بين مكون السمة وجافاسكريبت السمة و"المعاينة"

[craigconstantine]

j/s

لدي بعض كود j/s المخصص في سُمّتي. (هذا هو حلي لـ: Interactive SVG using <object>? - #9 by craigconstantine ) في نهاية المطاف، سأنتقل بكود j/s إلى مستودع Git، وأثبته كعنصر سمة رسمي. إلى أن يحدث ذلك، قمت فقط بلصق كود j/s في رأس السمة الخاص بي. أعتقد أن هذه المشكلة قد تختفي إذا قمت بتثبيت هذا الكود كعنصر رسمي، لكنني لا أشعر أن الأمر كذلك.

كود j/s الخاص بي يحرر DOM قبل إرساله إلى المتصفح…

api.decorateCooked(
    $elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
    { id: 'umbdv' }
);

أثناء التنفيذ…

يقوم باختيار عناصر \u003cdiv data-custom="… المناسبة، ثم يضيف عناصر جديدة. على سبيل المثال، في لقطة الشاشة التالية، كل ما هو أسفل الأسهم يتم إدراجه بواسطة كود j/s. (يمكنك رؤيته يعمل هنا: https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160 )

ما ألاحظه…

أنا أستخدم مكون معاينات قائمة المواضيع ( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub ) ويبدو أن كود j/s الخاص بي لا يتم استدعاؤه.

في لقطة الشاشة هذه، النص /vmm/gibberish… هو محتوى \u003cdiv data-custom="… العاري الذي يظهر لأن كود j/s الخاص بي لا يصل إليه عبر api.decorateCooked(….

يحدث الشيء نفسه في رسائل البريد الإلكتروني التي تُرسل…

ما أريده…

في الواقع، لا أريد استبدال المحتوى بالكامل. قصة طويلة. أود فقط توسيع كود j/s الخاص بي ليقوم بوضع نص ثابت هناك، بدلاً من النص العشوائي العاري من كتلة \u003cdiv data-custom="… الخاصة بي.

هل هناك طريقة api. أخرى يمكنني الارتباط بها؟

[david (David Taylor)]

للأسف، لا توجد واجهة برمجة تطبيقات (API) بلغة JavaScript لتعديل ‘الاقتطاعات’ (excerpts) للمواضيع في قائمة المواضيع. كما أن مكونات السمات (theme components) لا تملك أي وصول إلى المحتوى المُصاغ من جانب الخادم (مثل رسائل البريد الإلكتروني) لأسباب أمنية. إذا أردت تعديل رسائل البريد الإلكتروني، فستحتاج إلى استخدام إضافة (plugin).

ومع ذلك، أتساءل عما إذا كان بإمكاننا حل هذه المشكلة بطريقة مختلفة. حاليًا، تقوم بلصق شيء من هذا القبيل في محرر الكتابة:

<div data-custom="umbdv">/vmm/longstringhere</div>

بدلاً من ذلك، يمكنك فعل شيء من هذا القبيل:

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  محتوى احتياطي لرسائل البريد الإلكتروني/الاقتطاعات
</div>

أو إذا كنت تشعر بالرغبة في الإبداع، فيمكنك استخدام غلاف BBCode العام للقيام بذلك:

[wrap=umbdv longstring="/vmm/longstringhere"]
المحتوى الاحتياطي
[/wrap]

سيؤدي ذلك تلقائيًا إلى إنشاء div من الشكل التالي:

<div class="d-wrap" data-wrap="umbdv" data-longstring="/vmm/longstringhere" dir="ltr">
<p dir="ltr">المحتوى الاحتياطي</p>
</div>

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

[craigconstantine]

…آه، هذا سيُحلّ الأمر. سأقوم ببعض التعديلات وأُبلغك بالنتيجة.

[craigconstantine]

…نعم، يعمل بشكل مثالي @david، شكرًا لك!

[pfaffman (Jay Pfaffman)]

في بعض الأحيان، لا يكفي مجرد . هذا إجابة رائعة، وأنا قريب جدًا من فهم JavaScript وCSS بما يكفي لـ d-wrap ذهني حولهما.