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

مطور
1

استخدام \u003cscript type='text/discourse-plugin\u003e أو \u003cscript type='text/x-handlebars'\u003e في السمات أصبح مهجورًا. يجب تحديث أي استخدام لهذه العلامات في السمات وفقًا للتعليمات أدناه.

علامات \u003cscript\u003e و \u003cscript type='text/javascript'\u003e العادية غير متأثرة بهذا التغيير.

الجدول الزمني

هذه تقديرات تقريبية، قابلة للتغيير

  • مايو 2025 - تمكين رسائل التحذير في وحدة التحكم

  • يوليو 2025 - تمكين لافتات التحذير للمسؤولين

  • أواخر سبتمبر 2025 - إزالة الميزة

تحويل \u003cscript type='text/x-handlebars'\u003e

يجب نقل القوالب التي تم تقديمها باستخدام هذه الطريقة إلى ملفات .hbs مخصصة، أو إعادة هيكلتها إلى ملفات gjs.

للاحتفاظ بها كـ HBS، يمكن وضع قوالب الموصلات في:

{theme}/javascripts/discourse/connectors/{outlet-name}/{connector-name}.hbs

ويمكن وضع قوالب المكونات في:

{theme}/javascripts/discourse/components/{component-name}.hbs

لبناء الموصلات والمكونات بتنسيق .gjs الحديث، تحقق من هذا الفصل من دليل مطور السمات:

تحويل \u003cscript type='text/discourse-plugin'\u003e

يمكن ترحيل التعليمات البرمجية داخل هذه العلامات إلى ملف JavaScript مخصص.

إذا كنت تطور السمة الخاصة بك عبر واجهة لوحة المسؤول، فانسخ التعليمات البرمجية من \u003cscript\u003e، وانقلها إلى علامة التبويب JS (حيث مكتوب // your code here).

إذا كنت تطور السمة الخاصة بك محليًا، فأنشئ ملفًا جديدًا في

{theme}/javascripts/discourse/api-initializers/init-theme.js

ثم أضف هذا الغلاف، وضع التعليمات البرمجية الخاصة بك في المكان المحدد:

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

export default apiInitializer((api) => {
  // Your code here
});

في علامات النص البرمجي، كانت الطريقة الوحيدة لاستيراد وحدات JS أخرى هي استخدام صيغة require(). بينما سيظل هذا يعمل في ملف .js، إلا أنه سيتم إهماله قريبًا، لذا سيكون هذا وقتًا جيدًا لتحويله إلى استيرادات ES6 الحديثة. على سبيل المثال:

- const I18n = require("discourse-i18n").default;
+ import I18n from "discourse-i18n";

- const { h } = require("virtual-dom");
+ import { h } from "virtual-dom";

لمزيد من المعلومات حول تهيئة JS:

19 إعجابًا
2

ربما يكون سؤالًا غبيًا جدًا، ولكن لدي مكون سمة بسيط جدًا وضعته مباشرة في لوحة تحكم المسؤول ضمن <head>:

<script type="text/x-handlebars" data-template-name="/connectors/top-notices/whos-online-below-site-header">
{{whos-online}}
</script>

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

آمل بالتأكيد لا، لأنه سيكسر معظم مكونات السمات البسيطة الخاصة بي :grimacing:

3

الآن يوجد تبويب JS، لذا يمكنك على الأرجح استخدام api.renderInOutlet.

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

آه، لم أر أن هذا ممكن مع الموصلات/المكونات أيضًا، ولكن في المقالة المرتبطة وجدت هذا:

ربما أسهل مما كنت أعتقد، شكرًا لك!

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

شكرا لك على هذا المنشور!
قد يكون سؤالًا أساسيًا جدًا أعتقد:
نظرًا لعدم وجود بيئة اختبار لدينا، أحتاج إلى التأكد قبل المتابعة.
يجب عليّ تحديث سمة متأثرة، فهل أنا على صواب إذا قلت إن كل التعليمات البرمجية المتعلقة بـ “Script” من علامة التبويب “head” يجب نقلها إلى علامة التبويب JS كما هو موضح أدناه:

Screenshot 2025-07-14 at 1.15.15 pm
Screenshot 2025-07-14 at 1.15.15 pm1334×1077 121 KB

6

تقريبًا، ولكن ليس تمامًا. سترغب في إزالة علامات النص البرمجي، وتغيير الاستيرادات إلى شيء مثل:

import { ajax } from "discourse/lib/ajax";

ثم، الصق كل هذا في علامة التبويب JS، داخل:

7

يُنتج موقع Discourse الخاص بنا (المستضاف بواسطة Discourse) حاليًا شريط الخطأ التالي (وهو ما قادني إلى هذا الموضوع):

Screenshot 2025-07-14 at 10.40.31 AM
Screenshot 2025-07-14 at 10.40.31 AM2162×148 26.8 KB

لست على علم بأننا قمنا بأي تخصيص لسمة “Light” الخاصة بنا، وبالنظر إلى صفحة الإدارة الخاصة بها، لا أرى أي شيء يشير إلى أن هذا أكثر من الإعداد الافتراضي الذي توفره النظام (ولكن قد أكون أفتقد شيئًا ما بسهولة).

بالنسبة لموقع مستضاف مثل موقعنا، هل من المرجح أن يتم حل هذا تلقائيًا بمرور الوقت، أم أنه يتطلب بعض الإجراء من جانبنا؟

شكرا،

  • براد
8

ستحتاج إلى اتخاذ إجراء لحل هذا - لن يختفي من تلقاء نفسه.
ألقيت نظرة سريعة على موقعك في أدوات مطوري Chrome، ويبدو أن الكود ذي الصلة يتعلق بإضافة لغة “chapel” إلى highlightjs.

SCR-20250714-qmbq
SCR-20250714-qmbq1564×998 122 KB

إذا قمت بزيارة سمة “Light” الخاصة بك، وضغطت على “edit code”، فيجب أن تكون قادرًا على العثور على هذا ضمن إحدى علامات تبويب HTML. ثم يمكنك اتباع التعليمات الموجودة في المنشور الأصلي لهذا الموضوع لنقله إلى علامة تبويب “JS”.

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

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

  • براد
إعجاب واحد (1)
10

لدي ملف .html بسيط:

<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/oprs-top-container'>
    <div id='WW_T_D_1' class='oprs-top-leaderboard'></div>
</script>

أنا مرتبك بعض الشيء بشأن الطرق المختلفة للقيام بهذا الترحيل. أقدر لو شرح لي أحدهم ما يجب فعله. شكرًا

11

فقط renderInOutlet إلى الموصل

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

export default apiInitializer((api) => {
  api.renderInOutlet("below-site-header", <template>
    <div id='WW_T_D_1' class='oprs-top-leaderboard'></div>
  </template>);
});
إعجابَين (2)
12

شكرا لك. لقد حاولت ولم ينجح الأمر :confused:

هذا هو هيكلي وهذه هي

below-site-header.js


export function test() {
    let test2 = document.querySelector('.test');
    console.log('test ', test2);
}

و below-siteheader-connectors.hbs


<div></div>

أنا جديد في هذا لذا فإن أي مساعدة ستكون موضع تقدير. لقد أخذت هذا المستودع من مطور سابق.

image
image742×484 34.6 KB

13

مرحباً، هل يمكنك مشاركة رابط مستودع Github الخاص بك؟ شكراً!

14

لقد قمت بلصق نصي البرمجي الصغير “تكبير الصورة الرمزية” في علامة تبويب JS (من سطح المكتب - head)، وهذا يعمل ببساطة، ولكن هل هناك طريقة سريعة وبسيطة للحفاظ على تطبيقه فقط في سطح المكتب؟ صور الأفاتار الخاصة بي على الهاتف المحمول كبيرة أيضًا ويبدو كل شيء سخيفًا.

الكود المرجعي هو:

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

export default apiInitializer((api) => {
  api.changeWidgetSetting('post-avatar', 'size', '70');
});
15

هممم… ربما يمكن تعديل هذا باستخدام CSS؟

3 إعجابات
16

لقد نجح الأمر بشكل مثالي، شكراً لك!

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

تذكير ودي: changeWidgetSetting على post-avatar هي واجهة برمجة تطبيقات مهملة وسيتم إزالتها قريبًا.

ربما يجب عليك تغيير الكود الخاص بك إلى هذا

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

export default apiInitializer((api) => {
  const site = api.container.lookup("service:site");
  if (!site.mobileView) {
    api.modifyClass("component:post/avatar", (SuperClass) => class extends SuperClass {
      get size() { return "70"; }
    });
  }
});
5 إعجابات
18

أعتقد أن هناك أيضًا مكون سمة official لهذا الغرض؟ Avatar Size and Shape

لست متأكدًا مما إذا كان يناسب حالة الاستخدام المحددة، ولكنه يبدو كذلك (مع المكافأة المضافة بأن شخصًا ما سيصلحه إذا احتاج إلى تحديث :slight_smile:)

7 إعجابات
19

لقد قمت بالترقية من طريقة سريعة وغير رسمية إلى طريقة مدعومة رسميًا، شكرًا للجميع!

4 إعجابات
20

ملاحظة للأشخاص الذين لديهم مكونات قديمة (يستخدمون معالجة منفصلة لسطح المكتب/الجوال) أن علامة تبويب JS متاحة فقط في القسم المشترك - نأمل أن يوفر هذا على شخص آخر بعض عمليات البحث :slight_smile:

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