آمل أن تتمكن من إضافة وظيفة الدليل المخفي.
إضافات مخصصة
تم إنشاء هذا بالرجوع إلى إضافتك، مع إضافة زر واحد بشكل أساسي، ثم استخدام JavaScript للعرض الديناميكي.
discourse-----------------------hide-toc (1).zip (3.3 KB)
CSS / JavaScript
css
// عرض الأنماط المتعلقة بالدليل في المحرر
// تحديد الأنماط لعرض الدليل في معاينة المحرر
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// تعيين لون الخلفية إلى اللون الثالث للموضوع
background: var(--tertiary);
// تعيين لون النص إلى اللون الثاني للموضوع
color: var(--secondary);
// تعيين العنصر إلى موضع ثابت، بحيث يبقى في أعلى نافذة العرض عند التمرير
position: sticky;
// تعيين z-index إلى 1، لضمان ظهور هذا العنصر فوق العناصر الأخرى
z-index: 1;
// تعيين مسافة العنصر من أعلى نافذة العرض إلى 0
top: 0;
// تعيين ارتفاع العنصر إلى 30 بكسل
height: 30px;
// تعيين طريقة عرض العنصر كـ flexbox، لتسهيل محاذاة المحتوى
display: flex;
// محاذاة العناصر عمودياً في flexbox
align-items: center;
// محاذاة العناصر أفقياً في flexbox
justify-content: center;
// استخدام العنصر الزائف :before لإدراج محتوى قبل العنصر
&:before {
// تعيين المحتوى المدرج إلى قيمة المتغير $composer_toc_text
// content: "#{$composer_toc_text}";
content: "لن يعرض هذا المنشور دليلاً";
}
}
JavaScript
<script>
// تعريف دالة لتعيين نمط العنصر
function setStyle(selector, styles) {
// البحث عن العنصر المحدد بواسطة المحدد
const element = document.querySelector(selector);
// إذا تم العثور على العنصر، فقم بتطبيق النمط
if (element) {
Object.assign(element.style, styles);
}
}
// تعريف دالة للتحقق مما إذا كان محتوى الصفحة يحتوي على علامة TOC محددة
function checkForTOCMarkup() {
// التحقق مما إذا كان محتوى الصفحة يحتوي على سلسلة محددة
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// إخفاء عنصر الخط الزمني
setStyle('.with-timeline', { display: 'none' });
// تعديل نمط أعمدة حاوية المنشور إلى 100%
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// تعيين عرض محتوى الموضوع إلى 100%
setStyle('.topic-body', { width: '100%' });
// تعيين الحد الأقصى للعرض والمسافة البادئة اليسرى لخريطة الموضوع
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// إخفاء عنصر صورة رمز الموضوع
setStyle('.topic-avatar', { display: 'none' });
// تعيين الحد الأقصى للعرض والمسافة البادئة اليسرى لعنصر الفجوة
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// تعيين الحد الأقصى للعرض والمسافة البادئة اليسرى لأزرار تذييل الموضوع
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// تذكر عدم استخدام الكود الافتراضي قبل التعديل، لأنه سيؤثر على الهاتف المحمول، ودعه يتعامل مع النظام تلقائيًا
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // استعادة العرض الافتراضي
setStyle('.with-timeline', { display: '' }); // استعادة النمط الافتراضي
setStyle('.container.posts', { gridTemplateColumns: '' }); // استعادة نمط الأعمدة الافتراضي
setStyle('.topic-body', { width: '' }); // استعادة العرض الافتراضي
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // استعادة النمط الافتراضي
setStyle('.topic-avatar', { display: '' }); // استعادة العرض الافتراضي
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // استعادة النمط الافتراضي
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // استعادة النمط الافتراضي
}
}
// إنشاء مثيل مراقب لمراقبة تغييرات DOM
const observer = new MutationObserver(checkForTOCMarkup);
// تكوين خيارات المراقب، ومراقبة تغييرات العقد الفرعية وجميع العقد اللاحقة
const config = { childList: true, subtree: true };
// بدء مراقبة تغييرات المستند
observer.observe(document.body, config);
// إجراء فحص فوري عند تحميل الصفحة
checkForTOCMarkup();
</script>
