هل المكونات اللامعة مدعومة حاليًا في المسارات؟
أفترض أن الإجابة هي “لا” لـ Discourse، ولكن سيسعدني معرفة خلاف ذلك.
نعم، يمكنك استخدام ملفات .gjs لقوالب المسارات في Discourse الآن. في الواقع، لقد قمنا للتو بتحويل مجموعة كبيرة منها اليوم في النواة! تحقق من \u003chttps://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates\u003e للحصول على أمثلة.
“شخص ما” هو Discourse - لقد رعينا تطوير ember-route-template، وهو موجود في مؤسستنا على GitHub 
نحن لسنا على أحدث إصدار من Ember 6.x حتى الآن، لكننا نستخدم هذه الإضافة لتمكين الوظائف.
رائع! شكراً على الرد السريع!
هاها، لم ألاحظ حتى أنه في مستودع Discourse على GitHub. نقطة جيدة. 
إن إضافة مسار جديد إلى التطبيق كان أمرًا غير بديهي على الإطلاق. سأوثق هنا للآخرين.
أردت إضافة مسار /print في الجذر.
الكود النهائي الذي نجح معي كان على النحو التالي. county-fence هو اسم المكون الإضافي الخاص بي، لذا استبدله باسمك الخاص.
assets/javascripts/discourse/routes/county-fence-route-map.js.es6
export default function() {
this.route('print', { path: '/print' });
}
assets/javascripts/discourse/routes/print.js
import Route from "@ember/routing/route";
export default class PrintRoute extends Route {
model() {
return { message: "This is a custom print page!" };
}
}
assets/javascripts/discourse/templates/print.gjs
import RouteTemplate from "ember-route-template";
import ...;
export default RouteTemplate(
<template>
...
</template>
)
plugin.rb
after_initialize do
require_relative "app/controllers/print_controller"
end
app/controllers/print_controller.rb
# frozen_string_literal: true
# HTTP Status codes: https://github.com/discourse/discourse/blob/main/lib/discourse.rb
class ::CountyFence::PrintController < ::ApplicationController
requires_plugin CountyFence::PLUGIN_NAME
def save_print
end
def list_prints
render json: { name: "donut", description: "delicious!" }
end
def get_print
end
end
Discourse::Application.routes.append do
post "/print" => "county_fence/print#save_print"
get "/print" => "county_fence/print#list_prints"
get "/print/:id" => "county_fence/print#get_print"
end
هل هناك طريقة للحصول على صفحة فارغة بدون تخطيط أو أشرطة تنقل أو أي CSS للموقع؟ أريد استخدام مكون Glimmer، ولكن لا توجد أنماط الموقع مفيدة فيما يتعلق بإنتاج صفحة طباعة.
إذا كان الأمر يتعلق فقط بالتصميم لصفحة مطبوعة بالفعل، ولا تمانع في شريط التنقل والأشياء الإضافية عند عرض الصفحة، يمكنك استخدام محدد CSS @media print لتغيير التصميم عند الطباعة. يخفي Discourse بالفعل الكثير من الأشياء أثناء الطباعة (discourse/app/assets/stylesheets/common/printer-friendly.scss at main · discourse/discourse · GitHub). يمكنك معاينة الصفحة باستخدام وضع print media simulation في وضع الفحص الخاص بـ Firefox. يجب أن تكون هناك ميزة مماثلة في وضع الفحص الخاص بـ Chrome.
إذا كنت بحاجة إلى لوحة فارغة تمامًا للعمل بها، ليس فقط في وضع الطباعة ولكن أيضًا في التصفح العادي للويب، يمكنك استخدام خدعة CSS.
لنفترض أن مكون Glimmer الخاص بك يحتوي على div جذر بمعرف id=\"print-component__root\"، يمكننا السماح لـ CSS بالتحقق من وجوده باستخدام محدد :has() (أو ببساطة إضافة/إزالة فئة إلى الجسم من دورة حياة مكون Glimmer)، وتطبيق التصميم بشكل انتقائي.
body:has(#print-component__root) {
header,
.avatar,
.sidebar-wrapper,
... {
all: unset !important; // all: unset قد يكون عدوانيًا بعض الشيء
display: none !important;
}
}
#print-component__root {
// التصميم العادي
}
قد تكون هناك طريقة أفضل وأنظف تزيل عناصر DOM فعليًا، ولكن CSS هو حل بديل جيد لإعادة تعيين كل شيء.
لم يتم تحميل ملف SCSS الخاص بي. أي أفكار؟ لقد قمت بإعداد ملفاتي وفقًا لمكون الدردشة الإضافي في core.
لدي في plugins.rb:
register_asset "stylesheets/common/index.scss"
في assets/stylesheets/common/index.scss:
@import "common";
في assets/stylesheets/common/common.scss:
body:has(#print-root) {
header,
.avatar,
.sidebar-wrapper {
all: unset; // all: unset might be a bit too aggressive
display: none !important;
}
}
فقط للتأكد من أن المشكلة تتعلق بتحميل SCSS وليست مشكلة في قاعدة النمط التي قدمتها لك، حاول إضافة نمط بدون المحدد :has(). شيء مثل:
.sidebar-wrapper {
outline: 5px solid red;
}
أود أيضًا أن تجرب إعادة تشغيل خادم Rails الخاص بك. لقد واجهت مشاكل في الماضي حيث كان إضافة/إزالة استدعاءات register_asset يتطلب مني إعادة تشغيل كامل للحاوية docker.
:has().index.scss للتحقق من أنه ليس عبارة @import.d/rake assets:clobber tmp:clear و d/rails s.لا شيء حتى الآن يؤدي إلى تحميله.
معظم الملفات الأخرى تسبب إعادة تحميل تلقائي في المتصفح. هذا الملف لا يفعل ذلك. لذلك أعتقد أن register_asset قد يكون هو المشكلة. أعتقد أن register asset يبحث تلقائيًا في مجلد الأصول؟ كل الأمثلة التي أبحث فيها تشير إلى أن هذا هو الحال.
d/rails c و DiscoursePluginRegistry.stylesheets يكشفان:
`“county-fence”=>#<Set: {“/src/plugins/county-fence/assets/stylesheets/common/index.scss”}>
إذن شيئ ما يحدث. ^^
لقد وجدت في سجلات d/rails s: No such file or directory @ rb_sysopen - /src/app/assets/stylesheets/plugin-cf.scss.
لذلك، على الرغم من أن المكون الإضافي مرتبط رمزيًا في مجلد /plugins باسم county-fence، واسم المكون الإضافي الخاص بي هو county-fence صراحةً في plugins.rb، فإن بعض التعليمات البرمجية تقرأ اسم الدليل الأساسي plugin-cf وتضع افتراضات حول ما سيكون عليه اسم CSS المترجم للمكون الإضافي الخاص بي.
هل هذا خطأ أم ميزة؟ 
أعتقد أن الدرس المستفاد من هذه القصة هو عدم تسمية دليل المكون الإضافي الخاص بك بأي شيء بخلاف الاسم المطابق للمكون الإضافي الخاص بك تحت أي ظرف من الظروف. الرابط الرمزي المسمى بشكل صحيح ليس كافيًا.
تحرير: أيضًا register_asset \"stylesheets/common/index.scss\", plugin: \"county-fence\" هو حل بديل يجبر اسم المكون الإضافي على التعيين بشكل صحيح.
أواجه مشاكل في تطبيق القواعد الموجودة ضمن body:has(). يبدو أنها لا يتم تحديثها في خط أنابيب تجميع الأصول. أقوم بتشغيل d/rake assets:clobber tmp:clear وأعيد تشغيل الخادم باستخدام d/rails s ولا تزال لا يتم تحديثها.
على سبيل المثال، يمكنني وضع body { background-color: red !important; } في قسم body:has() ولا تظهر على الإطلاق في أنماط عنصر الجسم. الأمر لا يتعلق فقط بأنها تُستبدل - بل إنها ببساطة غير موجودة على الإطلاق في “الأنماط” في أدوات المطور.
عندما أضع نفس سطر CSS خارج body:has()، فإنه يتم عرضه بشكل جيد.
document.querySelector("body:has(#print-root)") !== null في وحدة تحكم المتصفح تُرجع true. و بعض القواعد من body:has() يتم تطبيقها.
أتساءل عما إذا كان يمكن أن تكون هناك قواعد في خط أنابيب إنشاء الأصول تمنع هذه التغييرات من الظهور.
أعتقد أن طريقتي المفضلة لهذا هي تضمين الأنماط مباشرة في مكون Glimmer للصفحة. هذا هو الشيء الوحيد الذي جربته ويعمل باستمرار. وبعد ذلك لا يتعين علي التعامل مع قواعد CSS الشرطية.
لقد تسببت خطوط أنابيب تجميع CSS في الكثير من المشاكل - أجد أنها غير متسقة حقًا في التحديث وتطبيق القواعد… تختفي الأشياء ولا أعرف السبب. لا أعرف ما إذا كان هذا له علاقة بالتشغيل في حاوية Docker؟ لقد تخلصت الآن تمامًا من الرابط الرمزي الخاص بي إلى مجلد الإضافات - أعتقد أن هذا كان يسبب مشاكل مع تحميل وحدة تخزين Docker ومشاهدة الملفات / إعادة التجميع. يمكنني ربما إنشاء مستودع صغير لتكرار هذه المشاكل… سأرى ما إذا كان بإمكاني فعل ذلك ونشره في الأيام القليلة القادمة.
متابعة لهذا الأمر…
إن إطار iframe الذي يتم عرضه من Stripe يتسبب الآن في عرض صفحة فارغة في أسفل تخطيط الطباعة الخاص بي. تم ترميز iframe بشكل ثابت باستخدام display: block !important مباشرة على العنصر.
أعتقد أنني سأتجاوز هذه المشكلة المحددة عن طريق حذف iframe عند تحميل هذا المسار… (بالمناسبة، Stripe يعرض div بعرض صفحة يكتشف جميع أحداث النقر - وهو ما يبدو وكأنه انتهاك كبير للخصوصية… أعتقد أن هذا من إضافة الاشتراكات.)
لكنني أتطلع إلى المستقبل وأتوقع طريقًا طويلاً من استكشاف الأخطاء وإصلاحها في صفحة الطباعة. أي شيء في المستقبل يقدم عنصرًا جديدًا في التخطيط، حتى لو لم يكن مرئيًا بشكل ملحوظ، يمكن أن يتسبب في تعطل المطبوعات.
إنه ليس سيناريو مثاليًا بالنسبة لي أن أرث تخطيط الموقع لهذا المسار. هل هناك أي طريقة يمكنني من خلالها إلغاء الاشتراك، أو تعيين التخطيط الخاص بي؟