تحديث علامات النصوص البرمجية المضمنة للقوالب وواجهة برمجة تطبيقات JavaScript

مطور
1

أصبح استخدام <script type='text/discourse-plugin'> أو <script type='text/x-handlebars'> في الثيمات الآن مُهملًا. يجب تحديث أي استخدام لهذه العلامات في الثيمات وفقًا للتعليمات أدناه.

لا يتأثر هذا التغيير بعلامات <script> العادية و <script type='text/javascript'>.

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

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

  • مايو 2025 - تمكين رسائل إهمال وحدة التحكم (console deprecation messages)

  • يوليو 2025 - تمكين لافتات التحذير للمسؤول (admin warning banners)

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

تحويل <script type='text/x-handlebars'>

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

للاحتفاظ بصيغة HBS، يمكن وضع قوالب الموصلات (connector templates) في:

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

ويمكن وضع قوالب المكونات (component templates) في:

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

:warning: اعتبارًا من مارس 2026، أصبحت ملفات .hbs مُهملة أيضًا. بعد إجراء هذا التحويل، انتقل إلى التعليمات الموجودة في Deprecating .hbs file extension in themes and plugins

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

تحويل <script type='text/discourse-plugin'>

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

إذا كنت تطور الثيم الخاص بك عبر واجهة لوحة الإدارة، فانسخ الشيفرة من علامة <script>، وانقلها إلى علامة تبويب 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)