تحديث علامات النص البرمجي Inline للTemplates و JS API

مطور
21

لست متأكدًا مما إذا كنت أفوت شيئًا ما، ولكني لم أقم بتحرير سمة “الداكن” ولا يوجد رمز في علامات تبويب HTML لترحيله إلى علامة تبويب JS.

image
image1008×479 17.2 KB

22

هل يؤدي إزالة هذا الجزء إلى اختفاء الخطأ؟

إعجابَين (2)
23

أجل! شكرا

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

لدي هذا في السمة الخاصة بي، ماذا أحتاج أن أفعل لكي يختفي الخطأ؟


api.decorateWidget('post-meta-data:after', dec => {
  if (dec.attrs.post_number === 1) {
    const topic = dec.getModel().get('topic');
    return dec.rawHtml(`<div class="post-info topic-id">nbsp#${topic.get('id')}</div>`);
  }
});
25

سيتعين عليك نقل الجزء api.decorateWidget(); إلى علامة التبويب ‘JS’ ضمن ‘Edit CSS/HTML’ في سمة. ولكن لاحظ أن الأدوات المصغرة لم تعد مدعومة؛ سترغب في استخدام نقاط توصيل الإضافات.

إعجابَين (2)
26

لقد نقلته إلى JS على النحو التالي:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Your code here
  api.decorateWidget('post-meta-data:after', dec => {
  if (dec.attrs.post_number === 1) {
    const topic = dec.getModel().get('topic');
    return dec.rawHtml(`<div class="post-info topic-id">&nbsp#${topic.get('id')}</div>`);
  }
});

وتحذيري الوردي تحول إلى تحذير أحمر:
PNG image

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

27

إذا لم ينشر شخص ما هنا بسرعة كافية، فقد تفكر في Marketplace للعثور على شخص لمساعدتك.

28

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

29

هل يوجد خطأ في وحدة تحكم المتصفح؟

30

“إشعار إيقاف: إضافة رمز JS باستخدام <script type='text/discourse-plugin'> لم يعد مدعومًا. انقل هذا الرمز إلى ملف JavaScript مخصص. [معرف إيقاف: discourse.script-tag-discourse-plugin] [معلومات: Modernizing inline script tags for templates & JS API]”

“إشعار إيقاف: لم يعد الودجت post-meta-data مدعومًا ولم يعد api.decorateWidget تجاوزًا مدعومًا. [تم إيقافه منذ Discourse v3.5.0.beta1-dev] [معرف إيقاف: discourse.post-stream-widget-overrides] [معلومات: Upcoming post stream changes - How to prepare themes and plugins]”

31

أعتقد أنه يمكنك استبدال هذا بالمنافذ. أين في الموضوع تضيف هذا؟

32

إذا كنت تسأل عن مكان المخرجات في الإنتاج، فهي هنا.

post-number
post-number1568×436 53.9 KB

أفضل بكثير أن يكون لدي في مكان يمكن البحث فيه.

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

أود أن أضيف إلى هذا للأشخاص الذين يأتون من إضافة JS بسهولة إلى رؤوس مواقعهم على الويب:

  1. أن بالنسبة لي، فإن معظم جافاسكريبت “الفانيليا” تعمل، وليس جافاسكريبت العادية.

  2. لحل مشكلة تحميل إضافة الكود، ضعها داخل <script> document.addEventListener('DOMContentLoaded', function() { الكود هنا }); </script>؛ سيؤدي هذا إلى تجنب الأخطاء حيث تقوم بتحميل الكود بعد تحميل الصفحة.

34

نحن نستخدم

<script type="text/discourse-plugin" version="0.8.40">
    const LoginRoute = require("discourse/routes/login").default;
    
    LoginRoute.reopen({
        activate() {
            this.controllerFor('application').setProperties({
                showFooter: true
            });
        }
    });
</script>

لعرض تذييل في جميع الصفحات بسبب اللائحة العامة لحماية البيانات (سياسة الخصوصية والانطباع). بخلاف ذلك، لم نجرِ أي تغييرات. كيف يمكننا تحويل هذا بأفضل شكل؟

شكراً جزيلاً!

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

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

<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("my-widget", {
    html() {

        ...

        <<<javascript>>>

        ...

        api.onPageChange(() => {
            this.scheduleRerender();
        });
  
    }
});
</script>

<script type="text/x-handlebars" data-template-name="/connectors/top-notices/inject-widget">
  {{mount-widget widget="my-widget"}}
</script>
36

بصفتي مسؤولاً عن “poke and guess”، كنت قلقًا بعض الشيء عند قراءة هذا، ولكن عندما تحققت من السمة المخصصة الخاصة بي، رأيت برنامجًا نصيًا بسيطًا جدًا:

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

// icon substitutions for share buttons
api.replaceIcon('d-post-share', 'up-right-from-square');
api.replaceIcon('d-topic-share', 'up-right-from-square');


</script>

لذلك كان مجرد نسخ ما بين علامات النص البرمجي، والانتقال إلى علامة التبويب JS، وكان هناك مكان لوضعه. كان ذلك سهلاً!

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
	// icon substitutions for share buttons
	api.replaceIcon('d-post-share', 'up-right-from-square');
	api.replaceIcon('d-topic-share', 'up-right-from-square');
});
إعجاب واحد (1)
37

عذرًا على هذا الرفع، لكنني ما زلت مرتبكًا بشأن أي من الطرق الجديدة يجب استخدامها.

هل يمكن لأي شخص تأكيد ما إذا كانت هناك طريقة لتحقيق نفس الشيء المذكور أعلاه ولكن باستخدام واجهة لوحة الإدارة (إما علامة التبويب \u003chead\u003e أو علامة التبويب JS)؟

38

تعتبر عناصر الواجهة (Widgets) وعلامات النص البرمجي (script tags) مثل هذه مهملة. يمكنك نقل الكود إلى علامة التبويب JS، واستخدام شيء مثل:

import Component from "@glimmer/component";
// …

api.renderInOutlet(
  "top-notices",
  class MyBanner extends Component {
    get someGetter() {
      // بعض الكود هنا
    }

    <template>
      <!-- HTML هنا -->
      {{this.someGetter()}}
    </template>
  }
);

لوضع فئة مكون في منفذ top-notices.

3 إعجابات
40

لدي مكون سمة مهمل آخر يستخدم

api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;

مع return h("div.myimage", [… لإدراج بعض HTML (رابط href) بعد المنشور الأول.

إذا فهمت بشكل صحيح، فإن api.decorateWidget مهمل أيضًا، ولكن لا يمكنني معرفة كيفية القيام بذلك باستخدام Glimmer. تبدو هذه الطريقة قريبة من تحديد ما إذا كان هذا هو المنشور الأول…
https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727#p-139082-conditional-rendering-6
…ولكن لا يمكنني معرفة ما هي الطريقة الموصى بها الآن لإدراج HTML الذي أحتاجه.

41

هل يمكنك إرسال الكود الكامل أو رابط المستودع (إن وجد)؟ شكرًا!