آه، فهمت الآن. كنت أعتقد أن الغرض من `embedMaxHeight` هو عرض التعليقات بأسلوب أكثر أصالة، مع تقليل التمرير قدر الإمكان (باستثناء النقاشات الطويلة التي ستظل تتطلب التمرير). ولهذا السبب قمت بضبطه على 15000 بكسل. سأقوم بتقليله قليلاً.
في هذه الحالة، أعتقد أن `embedMinHeight` قد لا يعمل كما هو مقصود. حتى مع ضبطه على 400 بكسل، لا يزال التضمين يحتوي على ارتفاع لا يقل عن 600 بكسل، مع بقاء فراغ صغير في النهاية.
مرحباً!
نموذج التعليقات المُعاد تصميمه حديثاً متفوق بشكل كبير، لا سيما في تجربة الهاتف المحمول! ومع ذلك، لقد حددت مشكلتين بسيطتين:
بالضبط! قام @keegan ببنائه مع وضع ذلك كحالة استخدام أساسية، ويسعدنا أنك أعجب بك. لقد قمنا بدمجه منذ بضع ساعات فقط، لذا لا زلنا نعمل على المتابعات، مثل كسر عرض شريط الأدوات وسلوك الإرسال عند الضغط على Enter.
أتساءل ما إذا كان من الجيد عرض هذا النموذج مباشرةً في الموضوع (على Discourse) أيضًا. فتح النموذج عادةً ما يكون أكثر جاذبية وسهولة في الاستخدام للجمهور غير التقني. ربما يستحق الأمر إجراء اختبار لمعرفة ما إذا كان ذلك يعزز التفاعل؟
كان هذا بالفعل خطأً، تم إصلاحه للتو في
تم إصلاح هذه المشكلة الآن، يرجى التحديث!
لاحظت مشكلة أخرى في موقعك. أرى أنك قمت بدمج نظام الوضع الداكن/الفاتح الخاص بمدونتك مع تضمين Discourse الجديد بحيث يؤدي تغيير وضع المدونة إلى تغيير وضع التضمين تلقائيًا. ومع ذلك، بينما يعمل الدمج بشكل جيد في Firefox وChrome، إلا أنه لا يعمل مع Safari. أعتقد أن هذه مشكلة في Discourse، لأن نافذة “السماح بالوصول” المنبثقة خاصة بـ Safari فقط، كما أن مشكلة أخرى تتعلق بعدم عمل شريط التمرير بشكل صحيح تؤثر أيضًا على Safari فقط.
بصرف النظر عن ذلك إلى حد ما، أنا مهتم بكيفية عمل دمج الوضع الداكن/الفاتح. بدأت منشورًا عن الوضع الداكن التلقائي للتعليقات المضمنة قبل عدة سنوات، ومن ذلك استطعت أن يجعل شخص ما يكتب نصًا برمجيًا باستخدام postMessage لجعل النظامين يعملان معًا. ولكن مع نظام التضمين الكامل للتعليقات الجديد في Discourse، يبدو أن النص البرمجي قد توقف عن العمل (مع كون الوضع الافتراضي غريبًا وهو الوضع الداكن لـ Discourse). لذا فإن سؤالي هو: هل كان لديك نص برمجي postMessage مكتوب مسبقًا، قمت بتحديثه لنظام التضمين الجديد في Discourse؟ وإذا كان الأمر كذلك (ورغم أنك تستخدم WordPress وأنا أستخدم Ghost)، هل تمانع في مشاركة الكود الخاص بك؟ ربما يمكنني مقارنة الكود الخاص بك بما لديّ لمحاولة جعل الأمور تعمل مع Ghost وإعداد الوضع الداكن الخاص بمدونتي.
إذا كان كل من مدونتك و Discourse يستخدمان وضع الظلام التلقائي تبعاً للنظام، فسيبقى الاثنان متزامنين.
أضفنا وضع الظلام التلقائي إلى Discourse في Automatic Dark Mode color scheme switching
نعم، ولكن إذا فهمت وتذكرت بشكل صحيح، فإن ذلك يمكّن Discourse من اكتشاف ما إذا كان نظام التشغيل يستخدم الوضع الداكن، ثم يضبط نفسه وفقًا لذلك. المنشور الذي بدأتُه، والذي كان ردًا على المنشور الذي ربطتَ إليه (والذي ربط أيضًا به)، كان يتعلق بمفتاح/زر التبديل في المدونة الذي يبدّل يدويًا بين الوضعين الفاتح والداكن للمدونة (بغض النظر عن وضع نظام التشغيل). هل يبدو هذا صحيحًا (وبالتالي يجعل سؤالي السابق ذا صلة)؟
لتوضيح الأمر، هذا هو النص البرمجي الذي طلبتُ من شخص ما كتابته لاستخدامه في مدونتي، والذي أعتقد الآن أنه يحتاج إلى بعض التعديلات (ربما يحتاج فقط إلى تغيير بعض الفئات، لست متأكدًا).
<style>:root.dark{background: #1D2224}</style>
<script>
const discourseUrl = 'https://ff2f.discourse.group';
const clearDarkModeThrottle = () => window.darkThrottled = false;
window.isDark = false;
window.discourseLoaded = false;
window.setDarkMode = state => {
window.isDark = state;
window.darkThrottled = true;
localStorage.setItem('darkmode-enabled', state);
Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
document.documentElement.classList[state ? 'add' : 'remove']('dark');
setTimeout(clearDarkModeThrottle, 250);
window.discourseLoaded && setIframeStyle();
};
let sub = () => {};
if (localStorage.getItem('darkmode-enabled') === "true") {
document.documentElement.classList.add('dark');
// تحديث العناصر بعد domContentLoaded
sub = () => window.setDarkMode(true);
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('darkmode-toggle'))
.forEach(element => element.onchange = darkmodeToggled);
function darkmodeToggled() {
const input = this.querySelector('input');
window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
}
sub();
sub = null;
});
const handleMessageListener = (event) => {
var origin = event.origin;
if (origin === discourseUrl) {
setIframeStyle();
window.discourseLoaded = true;
}
};
const setIframeStyle = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
window.isDark ? "dark" : "light",
discourseUrl
);
}
};
window.addEventListener("message", handleMessageListener);
</script>
لقد قمت للتو بتحديث Discourse إلى أحدث إصدار، لكنني ألاحظ مشكلتين:
بالتأكيد،
هذا هو كود CSS الذي أستخدمه في Discourse
header a.button {
color: #fff;
padding: 6px 8px;
background-color: var(--tertiary);
display: inline-block;
}
.username a.staff {
padding: 2px 5px;
border-radius: 4px;
color: var(--tertiary-hover);
// text-shadow: 0px 0px 14px var(--tertiary-400);
background-color: var(--tertiary-400);
}
@media (prefers-color-scheme: light) {
/* الخلفية الرئيسية للإطار */
html, body {
font-family: 'Inter', sans-serif;
}
}
@media (prefers-color-scheme: dark) {
/* الخلفية الرئيسية للإطار */
html, body {
background-color: #1e2021 !important; /* متغير --bg الخاص بك */
color: #f7f7f7 !important; /* متغير --body-color الخاص بك */
font-family: 'Inter', sans-serif;
}
header.discourse {
border-bottom: 3px solid rgb(50.82, 50.82, 50.82);
}
article.post {
border-bottom: 1px solid rgb(50.82, 50.82, 50.82);
}
/* لون النص الرئيسي */
.embedded-posts,
.embedded-posts p,
.embedded-posts h1,
.embedded-posts h2,
.embedded-posts h3 {
color: #f7f7f7 !important;
}
/* خلفية الكتل، مثل تذييل التضمين (خيارات الرد) */
.embedded-footer {
background: #27292b !important; /* متغير --bg-2 الخاص بك */
border-top: 1px solid #27292b !important;
}
/* لون الحدود (لمنع ظهور الحدود الفاتحة) */
.embedded-posts, .embedded-footer {
border-color: #27292b !important;
}
/* يضمن أن الروابط والأزرار لها اللون الصحيح */
// a:link, a:visited, .topic-post .post-action-list button {
// color: #35bcf1 !important; /* متغير --link-color الخاص بك */
// }
}
في هذه الحالة، أعتقد أن النهج الصحيح هو تشغيل حدث المراقبة دون تشغيل العلامة بأكملها. التشكّل الحالي يشوّه تحليلاتنا لأنه يحفّز حدث page_view، مما يؤدي إلى تضخيم إحصائيات الموقع بشكل مصطنع.
خلال الليل، ارتفعت عدد صفحاتنا بشكل حاد، لكن هذه الأرقام مصطنعة—فهي لا تحمل أي معنى تجاري.
دون أن نذكر أننا نكرر حاليًا تحميل ومعالجة النصوص.
في حالة GTM (مدير علامات Google)، الوضع أسوأ: يتم حقن كل نص آخر في الحساب مرتين، بما في ذلك بكسلات إعلانات Google وMeta، ونصوص شبكات الإعلانات الخارجية، وغيرها.
بالنسبة لتحليلات Discourse الأصلية، أقترح تعديلًا إضافيًا: تقسيم حركة مرور التضمين إلى فئة خاصة بها. هذا سيسمح لنا بمراجعة حركة مرور المجتمع وحركة مرور التضمين بشكل منفصل.
أشكرك جزيلاً على ذلك، أقدر مساعدتك حقاً. ومع ذلك، أثار ذلك بعض الارتباك لدي. عندما كنت أحاول جعل زر التبديل للوضع الداكن يعمل مع تضمين Discourse في مدونتي التي تعمل على منصة Ghost (حيث لم يكن يعمل بشكل افتراضي)، أخبرت في النهاية بأنني مضطر لتنفيذ بعض الكود الذي يستخدم postMessage (وهو ما طلبت من شخص ما برمجته، وقد نجح الأمر). لكن الكود الذي قدمته لا يتضمن أي كود JavaScript على الإطلاق، وهذا لا يبدو منطقياً بالنسبة لي، ولا أستطيع فهم السبب الذي يجعل كل شيء يعمل تلقائياً بمجرد استخدام WordPress. على أي حال، شكراً لك على كل حال.
مرحبًا جميعًا، أتابع معكم فقط لمعرفة ما إذا كان أحدكم قد وجد فرصة للنظر في هذه المشكلة حتى الآن؟
يبلغ مستخدمونا عن عدم قدرتهم على استخدام النموذج على الإطلاق بسبب مشكلة حقل النص، لذا أصبحت هذه المشكلة عقبة حقيقية أمام مجتمعنا.
LucasMiller: واجهة التعليقات أسفل المقالات تحتوي على خطأ؛ لا يمكنني كتابة أي شيء لنشر التعليق (تم الاختبار على كل من iPhone وAndroid/Xiaomi). عند النقر على حقل النص للكتابة، لا يتم تسجيل أي إدخال. يرجى مراجعة الأمر عندما تجدون الوقت!
يحدث هذا فقط في المقالات التي يكون فيها هذا أول تعليق.
LucasMiller: تمكنت من النشر فقط عن طريق إنشاء اقتباس دون إضافة أي نص. وبعد أن أعد التوجيه إلى واجهة المجتمع (بدلاً من البقاء أسفل المقال) فقط، أصبحت قادرًا على إضافة تعليقي فعليًا.
تساعد حيلة Markdown، لكنها ليست مثالية للمستخدم العادي. أي رؤى أو حلول مؤقتة ستكون محل تقدير كبير! شكرًا مرة أخرى على المساعدة.
cc @Falco
يجب أن يصلح هذا الأمر، وسيتم دمجه لاحقًا اليوم
شكرًا لك @renato
شكراً لك @renato، تم إصلاحه!
ملاحظة سريعة: لا يزال التمرير الأفقي يظهر على الهواتف المحمولة، عندما يكون لديك وقت للنظر في الأمر
يحدث ذلك معي في جميع المقالات. ربما يكون الأمر خاصًا بنظام iOS فقط؟ إليك بعض لقطات الشاشة من سفاري وكروم.
