مع توفر التبديل التلقائي لنظام الألوان، أتساءل عما إذا كان هناك طريقة ما للتبديل بين وضعي Discourse الفاتح والداكن عند تضمينها كتعليقات في مدونة. تحديدًا، تحتوي مدونتي على Ghost زر تبديل يمكن للمستخدمين النقر عليه للتبديل يدويًا بين الوضع الفاتح والداكن. أعرف أن تنسيقات CSS الخاصة بمدونتي لا يمكنها التأثير على تنسيقات CSS داخل إطار iframe الخاص بـ Discourse، ولكن مع هذه الإضافة الجديدة، هل قد تكون هناك طريقة أخرى لتمكين زر التبديل من تغيير نظام ألوان Discourse أيضًا؟ يمكنك رؤية مثال على منشور يحتوي على تعليقات في أسفل هذا المنشور.
هذا ممكن نظريًا ولكنه معقد بعض الشيء. في الوقت الحالي، لم نضف التبديل التلقائي للوضع الداكن إلى نقطة نهاية التعليقات المضمنة. يمكننا إضافة هذه الميزة، وستعمل إذا كان موقع Ghost الخاص بك يتحول تلقائيًا إلى الوضع الداكن عند تحول المتصفح إلى الوضع الداكن. ولكن مما أستنتجه، فإن موقع Ghost الخاص بك يستخدم زرًا للوضع الداكن، وهذا لن يعمل مع تطبيق Discourse.
ما يمكنك فعله في حالتك الخاصة هو تبديل فئة (class) داخل إطار iframe المضمن للتعليقات في Discourse عند النقر على الزر، ثم استخدام هذه الفئة لتبديل الألوان في ملف التنسيقات المضمن الخاص بك.
يبدو ذلك جيدًا. بينما أعمل حاليًا على إعداد عدة قوالب (Ghost) تستفيد من الوضع المظلم لزملائي، وجميعها ستشارك مثيلًا واحدًا من Discourse، فإن ذلك لا يزال بعيدًا بعض الشيء.
للأسف، لا أفهم تمامًا ما تقترحه هنا. حاليًا، يتم مضاعفة تنسيقات CSS لأي عناصر أريد استخدام تنسيقات الوضع المظلم لها داخل مدونتي من خلال إضافة body.dark قبل هذه العناصر. مثل:
p {
color: #000;
}
body.dark p {
color: #FFF;
}
هل تقترح استخدام كود body.dark هذا لتغيير الأمور داخل إطار iframe الخاص بـ Discourse؟ لأنني جربت إدراج ما يلي في حقل CSS المدمج في Discourse، لكن للأسف لم يكن له أي تأثير:
.FF2F-discourse p {
color: #000;
}
body.dark .FF2F-discourse p {
color: #FFF;
}
بما أن الأمر كذلك، هل تقترح بدلاً من ذلك أن أكتب كود JavaScript منفصل بحيث يؤثر التبديل على تغيير منفصل من خلال استهداف فئة محددة داخل الإطار؟ لأنه كما ذكرت في تعليقي السابق، لم أكن أعتقد أن الكود الخارجي يمكن أن يؤثر على CSS داخل إطار iframe، ومن هنا جاء حيرتي. لكنني مجرد هاوٍ في HTML/CSS، لذا فلا شك أن لديك معرفة أفضل مني أو أنني أساءت فهم شيء آخر.
نعم، هذا ما أقترحه. لا يمكن لملفات التنسيقات (stylesheets) الخاصة بمدونتك أن تُطبَّق على الإطار المضمن، ولكن يمكنك استخدام JavaScript لتبديل فئة dark في عنصر html أو body داخل الإطار المضمن، ثم تحديث ملف تنسيقات Discourse المدمج وفقًا لذلك.
لقد وجدت صفحتين تشرحان كيفية التبديل بين الوضع الفاتح والداكن لتضمين Discourse، لكن المبرمج الذي يكتب كود JavaScript الخاص بي يتساءل عما إذا كانت الطريقة التي تقترحها تتضمن استخدام postMessage (كما تذكر الصفحتان اللتان وجدتهما) أم شيء آخر.
إليك صفحة تشرح كيفية تنفيذ المراسلة بين النوافذ باستخدام postMessage:
أما هذه الصفحة فهي في الواقع درس تعليمي حول كيفية تغيير CSS داخل iframe عبر postMessage، وتحديداً للتبديل بين الوضع الفاتح والداكن:
ليس لدينا حاليًا خطط لإضافة هذه الميزة. يمكن للمواقع إضافة أنماط الوضع المظلم إلى ورقة الأنماط المضمنة الخاصة بها كحل بديل (أو استخدام تقنية postMessage التي تمت مناقشتها أعلاه).
الكتلة البرمجية ① تضيف مستمع حدث في إطار Discourse المضمن والذي سيقوم بنشر رسالة إلى موقعي الإلكتروني الذي يحتوي على إطار Discourse المضمن بمجرد تحميل Discourse المضمن.
عندما يتلقى موقعي الإلكتروني رسالة من Discourse المضمن، سيقوم بإجراء تحقق، كما هو موضح في الكتلة البرمجية ②، وإذا نجح، يستدعي الدالة setIframeStyle لتعيين Discourse المضمن.
الدالة setIframeStyle، كما هو موضح في الكتلة البرمجية ③، تمرر وضع اللون، “داكن” أو “فاتح”، إلى الإطار عن طريق استدعاء postMessage. بالإضافة إلى ذلك، بمجرد تبديل الوضع الداكن، يمكن استدعاء الدالة للحفاظ على نفس وضع اللون لـ Discourse المضمن مع موقعي الإلكتروني.
الكتلة البرمجية ④ تسمح لـ Discourse المضمن بمعالجة رسالة وضع اللون المرسلة من موقعي الإلكتروني. هنا أقوم بتبديل وضع اللون عن طريق تبديل اسم الفئة إلى علامة الجسم.
بالإضافة إلى ذلك، تتم إضافة الكتلتين البرمجيتين ① و ④ من خلال صفحة مسؤول Discourse، كما يلي:
يمكنني التأكيد على أن الطريقة المذكورة أعلاه لا تزال تعمل، ولكن كان من الجيد عدم الاضطرار إلى كتابة التعليمات البرمجية من لقطة شاشة لذا، إليك هي، محدثة قليلاً:
الخطوات
ينتهي عرض إطار iframe الخاص بالتعليقات ويُرسل رسالة إلى نافذة المتصفح الرئيسية، لإعلامها بذلك.
يستعلم المتصفح عن إعداد الوضع الداكن/الفاتح ويرسل القيمة مرة أخرى إلى إطار iframe.
يستقبل إطار iframe الرسالة، ويضبط سمة بيانات (data-attribute) أو فئة (class) أو ما شابه، بناءً على إعداد الوضع الداكن/الفاتح.
التعليمات البرمجية
بمجرد تحميل إطار iframe، أرسل إشعارًا إلى النافذة الأصلية. يجب إدخال هذا على Discourse، ضمن Admin -> Customize -> (select theme) -> Edit CSS/HTML -> Embedded Header.
تعامل مع هذا المشغل الوارد في النافذة الرئيسية. تعيش هذه التعليمات البرمجية في موقع مدونتك:
const discourse_url = "https://your.discourse-instance.org";
// هنا، نحدد السمة، ونرسل رسالة إلى إطار iframe لإعلامه بالسمة
// انظر أدناه لكيفية ربط notifyFrameStyle
const notifyIFrameOfTheme = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
{
// قم بتعديل السطر أدناه للحصول على إعداد الوضع المظلم، اعتمادًا على كيفية تخزينه
theme: document.documentElement.getAttribute("data-theme")
},
discourse_url
);
}
};
// استدعاء setFrameStyle عند تلقي رسالة "iframe loaded"
const handleMessageListener = (event) => {
var origin = event.origin;
if ((origin === discourse_url) && (event.data == "iframe loaded")) {
notifyIFrameOfTheme();
}
};
في كتلة script من (1)، أضف مستمعًا لرسالة السمة التي أرسلتها notifyFrameStyle:
window.addEventListener("message", (event) => {
const payload = event.data;
if (payload.theme) {
// افعل شيئًا بإعداد السمة؛ لقد قمت بتعيين السمة `data-theme` على `html` الخاص بإطار iframe،
// ولكن قد ترغب في تعيين سمة فئة أو ما شابه
document.documentElement.setAttribute("data-theme", payload.theme);
}
}, false);
التصميم
ضمن Admin -> Customize -> (select theme) -> Edit CSS/HTML -> Embedded CSS، يمكنك الآن توفير CSS لكل وضع. على سبيل المثال، يمكنك تجاوز متغيرات تصميم Discourse:
لذا، إليك هي، محدثة قليلاً: