مرحباً، هذه أول مرة أقوم فيها بالتطوير على Discourse، لذا أعتذر عن الأسئلة الساذجة.
أقوم ببناء مكون سمة لعرض PGNs (لوحة الشطرنج والمباريات).
المكون ليس صعبًا من الناحية النظرية، هناك مكون جافاسكريبت لهذا (PGNViewer.js) وتمكنت من ترجمة علامات [wrap] إلى \u003cscript\u003evar x='pgn here'; ...\u003c/script\u003e و \u003cdiv class='pgn-blahblah'\u003e\u003c/div\u003e المناسبة.
حتى الآن كل شيء جيد، ولكن الآن أحتاج إلى تحميل جافاسكريبت.
وجدت أنه يمكنني استخدام import loadScript from \"discourse/lib/load-script\"; و await loadScript(settings.theme_uploads_local.pgnviewer_js); لتحميله في وقت التهيئة من دليل /assets/.
ولكن لدي بعض المشاكل هنا.
على الرغم من أنني تمكنت من تحميل المكون على التثبيت التجريبي، إلا أنني لا أستطيع على خادمي الإنتاجي، لأنه يقول إن الأصل كبير جدًا. هل هناك طريقة لإصلاح هذا؟
ثانيًا، في التثبيت التجريبي، أرى تحذيرًا يفيد بأنه لم يتمكن من تحميل /theme-javascripts/dist.js.map. ليس لدي أي فكرة من أين يأتي. هل هناك شيء يجب أن أقدمه؟
بشكل عام، هل هذا النهج صحيح، أم سيكون من الأفضل تنفيذ إضافة بدلاً من ذلك؟
شكرًا
مع خالص التقدير
FF
مرحبًا بك في Meta، @happycactus 
نعم، ربما. السبب الوحيد الذي قد تحتاج فيه إلى إضافة هو إذا كنت تحاول تغيير واجهة برمجة التطبيقات (أي الواجهة الخلفية).
لقد واجهت مشكلة مماثلة في الماضي.
نعم، تحتاج إلى تغيير app.yml للسماح بمرور الملفات الكبيرة عبر الوكيل العكسي (nginx).
لحسن الحظ، هذا إعداد بسيط، upload_size:، هنا في السياق:
params:
## ما هو إصدار Git الذي يجب أن تستخدمه هذه الحاوية؟ (الافتراضي: tests-passed)
version: tests-passed
## الحد الأقصى لحجم التحميل (الافتراضي: 10m)
upload_size: 20m
بمجرد تغيير هذا، ستحتاج إلى إعادة البناء ليصبح ساري المفعول:
./launcher rebuild app
بالطبع، هذا يفترض أن لديك وصولاً مناسبًا إلى الخادم …
شكرا لك يا روبرت!
أنا في حيرة، ربما بسبب افتقاري للخبرة في مثل هذه المنصات.
حيرتي هي:
نهجي هو “تضمين” مقتطف صغير من جافاسكريبت اللازم لملء كتلة div بالمحتوى، ولكني أرى أنه ربما يمكنني تنفيذه من دالة “cookPgn”، كما هو الحال في مكون marmaid:
async function applyMermaid(element, key = "composer") {
const mermaids = element.querySelectorAll("pre[data-code-wrap=mermaid]");
...
await loadScript(settings.theme_uploads_local.mermaid_js);
...
mermaids.forEach((mermaid) => {
if (mermaid.dataset.processed) {
return;
}
const spinner = document.createElement("div");
spinner.classList.add("spinner");
...
mermaid.append(spinner);
});
بهذه الطريقة، إذا فهمت بشكل صحيح، لا أحتاج إلى تحميل البرنامج النصي من الصفحة (باستخدام loadScript ربما؟!) ولكني أستطيع استيراده ببساطة في سمة js؟ أو من المحتمل أن أكون مضللاً تمامًا!
أعني، ما الفرق بين loadScript والاستيراد البسيط؟
هل يمكنك توجيهي إلى بعض المصادر على الويب حيث يمكنني فهم هذا بشكل أفضل؟
أعتذر مرة أخرى إذا كانت الأسئلة تافهة أو غبية!
شيء آخر، الحد الافتراضي هو 10 ميجابايت، ولكن أصلي حوالي 300 كيلوبايت، والمجلد المضغوط بأكمله هو 337 كيلوبايت، ومع ذلك أثناء التحميل يقول إنه أكبر من 512 كيلوبايت.
شكرا،
FF
هل جربت استيراد؟ لا أعتقد أنه يمكنك استيراد نص خارجي.
Loadscript هو النهج الصحيح ويضمن تحميل النص بالكامل قبل أن يستمر الكود الخاص بك ويستخدمه (هذا هو السبب في أنه يُرجع وعدًا).
هل يمكنك مشاركة الخطأ بالضبط - هل هذا في وحدة تحكم المتصفح؟
مش
ألقِ نظرة على مكون Discourse Mermaid، الذي يقوم بتحميل مكتبة ويحدث أشياء للمنشورات.
شكرًا لك، @Falco، كان هذا أحد شكوكي.
بالتأكيد، ها هي: GitHub - studiofuga/discourse-pgn-component: A theme component for Discourse to display PGN blocks
يوجد أيضًا إصدار مكون إضافي، لكنني أعتقد أنني لن أتبع هذا النهج وسأبقى مع مكون السمة.
شكرًا @pfaffman، في الواقع استلهمت منه، ولاحظت أنه يفعل بالضبط ما أحتاجه وبالطريقة الصحيحة، دون حقن الكود كما هو مقترح أعلاه.
شكرًا للجميع، سأجرب اقتراحاتكم وسأعود بالنتائج. بالطبع، الكود الخاص بي مفتوح المصدر، لذا فإن أي مساهمة أو نقد مرحب به للغاية.
خطأي، لقد نسيت أنني قمت بتحديد حجم المرفق إلى 512 كيلوبايت، ورفعته إلى الإعداد الافتراضي (4096) وعمل بشكل جيد. شكرًا لك، وأعتذر عن سؤالي الغبي.
حسناً، لقد قمت بإصلاح كل شيء ويعمل المكون! لكن لدينا مشكلة، وهي “تقييم غير آمن” في المكتبة التي أستخدمها. أعتقد أنه يجب علي إصلاح المكتبة الأصلية، ليس لدي أي فكرة عن كيفية حزمها.
لمن يهتم، لقد دفعت كل تغييراتي في المستودع الخاص بي أعلاه، وهذه هي تفاصيل الخطأ.
والسطر هو هذا (في الوحدة النمطية الأصلية لجافاسكريبت)
let isBrowser=new Function("try {return this===window;}catch(e){ return false;}")
هنا.
يواجه البرنامج النصي الخاص بك مشكلة مع سياسة أمان المحتوى في بيئة الإنتاج.
تحتاج إلى إضافة 'unsafe-eval' كبند في إعداد الموقع: content security policy script src
شكراً لك، أنا أتصفح الوثائق لمعرفة كيفية القيام بذلك. 
أنا أتعلم الكثير، شكراً لك
حسنًا، لقد فعلت ذلك، فقط احتجت إلى استخدام ’ … هههه … على أي حال، لقد نجح برنامجي النصي تقريبًا، لقد دفعت كل شيء إلى الواجهة الرئيسية ونجح الأمر بطريقة ما، يبدو أن لدي مشكلة في التصيير ولكن على الأقل تم استدعاء المكون الرئيسي (أشك في أن المشكلة تكمن هناك).
شكرًا للجميع… سأعود قريبًا بمزيد من الأسئلة هههه. شكرًا!
مع الأخذ في الاعتبار أن إضافة unsafe-eval إلى سياسة أمان المحتوى (CSP) الخاصة بك تزيل بشكل أساسي الغرض الكامل من CSP وتجعل موقعك أقل أمانًا نتيجة لذلك.
يعد استخدام eval رائحة كود، ويجب إصلاحه في المنبع كما أشرت أعلاه.
نعم، بالتأكيد. أنا غير قادر على إصلاحه في الوقت الحالي، لكن خطتي هي إصلاح المكون الخاص بي أولاً، ثم إصلاح المكتبة الأصلية وإزالة تجاوز CSP.\nشكراً على النصيحة!
أنا على وشك الانتهاء. تمكنت من عرض “شيء ما” ولكنه يعمل بشكل عشوائي.
تعمل مكتبة جافا سكريبت التي أستخدمها بهذه الطريقة:
أولاً، نحتاج إلى تعريف كتلة <div id='board'> بمعرف فريد. ثم نحتاج إلى تشغيل دالة لملء div، شيء مثل هذا. PGNV.pgnBoard('board', {});. يتطلب البرنامج النصي نفس المعرف لملئه.
إذا فهمت بشكل صحيح، لا يمكنني القيام بذلك أثناء تزيين الكتلة المطبوخة، لأن المستند لم يتم ملؤه بعد ويكون كائن PGNV غير قادر على العثور على الكتلة. لذلك استخدمت أولاً أداة (لا تعمل، لأن دالة HTML يجب أن تُرجع الكتلة، وليس لديّ)، ثم تحولت إلى دالة مُخفّضة: debounceFunction(this, renderPgn, attrs, 200);.
لكنه يعمل “أحيانًا”.
ما الذي أفوت؟
شكرا
debounceFunction يؤخر استدعاء الطريقة المستهدفة حتى تنتهي فترة إلغاء الازدواجية دون أي استدعاءات إضافية لإلغاء الازدواجية، قد لا تعمل أحيانًا وقد لا تزال بسبب
قد لا يكون debounce هو الحل في حالة الاستخدام الخاصة بك
جرب استخدام خيارات afterAdopt
مرحباً هاون، شكراً لك على تلميحك!
يبدو أنه بالضبط ما كنت أبحث عنه. لقد جربت نهجين مختلفين:
- أولاً، استخدم “decorateCooked” العادي لتحليل وإرفاق كتلة div ثم استخدم afterAdopt للعرض عن طريق استدعاء
PGNV.pgnviewer()أو - استخدم خيار afterAdopt فقط لإرفاق وعرض كليهما
لم ينجح أي منهما بعد، بسبب مشكلة أخرى لم أتمكن من فهمها بالكامل، يبدو أن المكتبة الداخلية تتعطل بخطأ، وغير قادرة على العثور على السمة className على ما يبدو في عنصر DOM. أنا ضائع قليلاً . لقد رأيت أن شخصًا ما استخدم loadScript، لكنني قمت فقط باستيراد المكتبة واستخدام وظيفة debounce نجحت. ما الفرق بين الطريقتين؟
شكراً!
مرحباً @hawm، لقد وجدت سبب عدم عمله وأنا عالق.
بالطبع أنا جديد تمامًا في Ember وفي JavaScript الحديث بشكل عام. لذلك درست قليلاً واكتشفت السبب.
يتوقع PgnViewerJs العمل على DOM الحقيقي، وليس على DOM الافتراضي. لذلك حتى بعد اعتماد العنصر المطبوخ، فإنه غير موجود في DOM الحقيقي، ويبحث PGNV عن المعرفات باستخدام document.getElementById.
لقد درست كل ما استطعت العثور عليه: تبدو مكونات Ember مناسبة لاحتياجاتي، لكنني لست متأكدًا من كيفية التعامل معها.
أو ربما API.onAppEvent؟
شكراً.
لقد استخدمت later() من Ember وعلى الرغم من أنه حل غير أنيق، إلا أنه يعمل.
هل هناك حل أفضل؟
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.