تقسيم ثيم Javascript إلى ملفات متعددة

يمكن تقسيم سمات جافاسكريبت (javascript) المعقدة إلى ملفات متعددة، للحفاظ على تنظيم جيد.

لاستخدام هذه الوظيفة، ما عليك سوى إضافة ملفات إلى المجلد /javascripts في دليل السمة الخاص بك. لا يمكن تعديل هذه الملفات من واجهة مستخدم Discourse، لذا يجب عليك استخدام Theme CLI أو source the theme from git (استيراد السمة من git).

يتم التعامل مع ملفات جافاسكريبت تمامًا كما يتم التعامل معها في النواة/الإضافات (core/plugins)، لذا يجب عليك اتباع نفس هيكل الملف/المجلد. يتم تحميل ملفات السمة بعد النواة/الإضافات، لذا إذا تطابقت أسماء الملفات، فستكون نسخة السمة هي السائدة.


على سبيل المثال، يمكنك الآن تحقيق https://meta.discourse.org/t/adding-to-plugin-outlets-using-a-theme/32727 عن طريق إضافة ملف واحد إلى السمة الخاصة بك:

/javascripts/my-theme/connectors/discovery-list-container-top/add-header-message.gjs

import Component from "@glimmer/component"; import { service } from
"@ember/service"; export default class HeaderMessage extends Component {
@service currentUser;

	<template>
  Welcome
  {{this.currentUser.username}}
	</template>
}

لاستخدام واجهة برمجة تطبيقات جافاسكريبت (JS API)، قم بإنشاء مُهيئ (initializer):

/javascripts/discourse/api-initializers/init-theme.gjs

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

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

إذا كنت بحاجة إلى أصل .js مختلف تمامًا (على سبيل المثال، لعامل ويب - web worker)، فتحقق من هذا الموضوع.


يتم التحكم في إصدار هذا المستند - اقترح تغييرات على github.

27 إعجابًا

لنفترض أنني لا أعرف شيئًا عن التسلسلات الهرمية لملفات core/plugins، لأنني جئت هنا فقط لإنشاء مكون سمة جديد. أين يمكنني البحث لمعرفة ذلك؟ ما هي اصطلاحات التسمية للمجلدات والملفات بداخلها؟

بمجرد النظر إلى سمات/مكونات مختلفة متداولة، هناك جميع أنواع مخططات التداخل المختلفة والأدلة الفرعية العائمة. لم أتمكن من اكتشاف نمط، أو العثور على أي وثائق. (على سبيل المثال، ما هو الفرق بين /initializers و /api-initializers و /pre-initializers؟ :crying_cat_face:)

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

الملفات هنا تستخدم واجهة برمجة التطبيقات. لقد تساءلت عن هذا الأمر لفترة طويلة أيضًا، لماذا لا يمكنني وضع ملفات api-initializers في initializers؟

نعم. من الصعب فهم ذلك. أفضل عدم التفكير في عدد المرات التي قضيت فيها 3 ساعات في شيء ما فقط لأكتشف أنني سميت شيئًا بشكل خاطئ أو وضعته في المكان الخطأ، أو في بعض الأحيان، نسيت تضمينه بإحدى الطرق العديدة التي يبدو أنها موجودة للقيام بذلك (في plugin.rb، في تضمين في ملف js - أي مسار؟ هل أحتاج إلى امتداد؟)

الأفضل هو استخدام تثبيت تطبيق وحدة تحكم Discourse Theme CLI للمساعدة في بناء الثيمات وجعله ينشئ هيكل ثيم لك. وهو يجعل التصحيح سهلاً للغاية لأنه يقوم بتحميله تلقائيًا إلى الخادم الخاص بك (خادم إنتاج عادي) ويقوم (عادةً) بإعادة تحميل متصفحك تلقائيًا.

لا فكرة لدي عما إذا كان هناك فرق (لا أعتقد ذلك؟ لكن ليس لدي فكرة كبيرة). سأستخدم ما هو موجود في هيكل الثيم.

يوجد مستودع يسمى all-the-themes. يمكنك الحصول عليه والبحث فيه عن أمثلة. واستخدم دائمًا ما تم تغييره مؤخرًا.

3 إعجابات

يعتمد الكثير من EmberJS (و Rails) على الاصطلاح. هذا رائع في معظم الأوقات، ولكنه قد يكون محبطًا للغاية عندما تخطئ في شيء بسيط، مثل التسمية.

3 إعجابات

على أي حال، وجدت شرحًا لـ api-initializers/ هنا:

(وهذا يربطها بمستندات Ember، وبعد ذلك تبدأ الأمور في الظهور.)

لا يزال من الجيد وجود تعداد أساسي / شرح لاحتمالات بنية الدليل في مستند واحد. (على سبيل المثال، أعرف أن connectors/ شيء موجود… هل هناك المزيد؟)

أيضًا، على أي حال: يسحب تطبيق Theme CLI الهيكل من:

يذكر فقط api-initializers/.

(أنا في الواقع أستخدم تطبيق Theme CLI، لكنني بدأت في استخدامه بعد أن كان لدي بالفعل بداية لمكون سمة، لذلك تخطيت خطوة الهيكل.)

إعجابَين (2)