كيف تعمل `@import` مع SCSS؟

مرحباً، لم أكن أرغب في إزعاج المنتديات بمواضيع متعددة، لذا لدي 4 أسئلة رئيسية هنا كمستخدم/عضو جديد في منتديات Discourse:

<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://forums.mysite.me/uploads/default/original/1X/9c81453y45yh45ha81cedd21d3cf20.png" />
<meta name="twitter:url" content="https://forums.mysite.me/" />
<meta name="twitter:title" content="SiteTitle" />
<meta name="twitter:description" content="Site Description Is Here" />

تم طرحه مرة أخرى في Remove All Traces of Social Media On My Website?

2) كيف تعمل @import مع SCSS؟ أثناء تخصيص قالب Air، لاحظت على صفحة GitHub أن هناك CSS لسطح المكتب وهو:

@import "showcased-categories";
@import "chat-desktop";
@import "sidebar-desktop";

لذا، حاولت إنشاء قَالَب خاص بي وتضمين ذلك في قسم CSS/HTML الخاص بقالبي - > سطح المكتب، ولكن عندما حاولت حفظ هذا الإدخال، حصلت على:

css1018×283 12.2 KB

3) كيف يمكنني جعل المنتديات تعيد التشغيل تلقائيًا إذا أعيد تشغيل خادم VPS الخاص بي؟ الخادم هو Ubuntu 22.04. أثناء البحث، وجدت هذا الرد في هذه المنتديات هنا، ولكنني فعلت ما يقوله ويجب أن أكون أعمى لأنني لا أرى تعليمات حول كيفية القيام بذلك في صفحة التثبيت كما يقترح هذا التعليق.

4) كيف يمكنني تحريك المنتدى بأكمله لأسفل قليلاً؟ يبدو الأمر جيدًا على سطح المكتب، ولكن على الهاتف المحمول، يبدو كما هو في الأعلى، في التعليق أسفل هذا المنشور (نظرًا لأنه لا يمكن للمستخدمين الجدد إضافة سوى لقطة شاشة واحدة لكل منشور على ما يبدو)، مع حواف مستديرة تلامس الشريط العلوي…

image400×200 19.9 KB

لقد حاولت إضافة وسم فاصل (<br>) في قسم Head الخاص بـ CSS الخاص بالقالب، ولكن هذا حرك كل شيء لأسفل، بما في ذلك شريط التنقل العلوي، والذي أريد أن يبقى في الأعلى.

أعتقد أن هذا كل ما لدي من أسئلة في الوقت الحالي. شكراً لكم.

فيما يتعلق بالبند رقم 4 أعلاه، هذه هي لقطة الشاشة التي كنت أشير إليها:

Screenshot_20240325-160753_Firefox400×200 19.9 KB

مرحباً، أهلاً بك في Meta

1. ليس لدي إجابة لسؤالك. ومع ذلك، قد أكون مخطئًا. لا أعتقد أن هذه البيانات الوصفية لـ OpenGraph و facebook_app_id تمثل مشكلات تتعلق بالخصوصية هنا. نأمل أن يتمكن شخص آخر من تقديم رؤية أفضل حول هذا الأمر.

2. لم تنشئ سمة بعيدة. إنها موجودة في مستودع GitHub. يمكنك إنشاء ملفاتك، مثل تقسيم CSS الخاص بك إلى ملفات متعددة في دليل scss. بعد ذلك، سيشير @import تلقائيًا إلى هذا الدليل.

لا يمكنك فعل ذلك عند إنشاء سمة يدويًا في لوحة الإدارة.

إذا كنت ترغب في تخصيص سمة بعيدة، يمكنك إنشاء مكون سمة (Theme Component)، وإرفاقه بسمة Air Theme، وإضافة أي CSS تريده. هذا ليس ضروريًا لاستيراد هذه الملفات. ومع ذلك، قد تحتاج إلى نسخ أي وظائف/مزيجات SCSS إذا كنت بحاجة إليها لتخصيصاتك (على سبيل المثال، discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub)

لمزيد من المعلومات حول السمات: Developing Discourse Themes & Theme Components

3. كما قال Falco، افتراضيًا، إذا اتبعت التثبيت القياسي، يبدأ Docker دائمًا عند إعادة التشغيل. لا توجد تعليمات للعثور عليها لأن هذا هو السلوك الافتراضي. هل يمكنك تأكيد أن منتداك لم يبدأ عند إعادة التشغيل؟

4. أولاً، هل يتم عرض كل شيء بشكل صحيح مع تمكين الوضع الآمن؟ فقط للتأكد من أن هذا لا يتعلق بأي تخصيصات. سيكون هذا هو الخطوة الأولى في تحديد المشكلة.

شكراً على الرد. بالنسبة للرقم 4، أفترض أنها مشكلة CSS أو شيء من هذا القبيل، ولهذا السبب لست متأكداً من كيفية إضافة فجوة حتى لا يبدو الموقع للجوال سيئاً. مع تشغيل الوضع الآمن، لا يزال يحدث (مع إلغاء تحديد الخيار الأول).

فيما يتعلق بالرقم 1، قد لا تكون “مشاكل خصوصية” بالمعنى الحرفي، لكنني ببساطة لا أريد أي ذكر لوسائل التواصل الاجتماعي في أي مكان عليها.

#2: آه، حسناً، مثير للاهتمام… لقد فعلت ذلك باستخدام مكون كنت أقوم بتحريره قبل حوالي 5 ساعات، لكنني لم أكن أعرف أن هذا هو ما يحدث مع السمات. سأجرب ذلك بسرعة.

هممم… لم يبدأ Docker الخاص بي تلقائياً بمجرد تشغيل VPS الخاص بي، غريب.

هممم. إذا اتبع المزيد من الأشخاص هذا المسار، فسيتم إزعاج المنتدى بعناوين مواضيع غير قابلة للاستخدام.

سيكون من الأفضل @Question42 إذا كان بإمكانك إنشاء موضوع واحد لكل مشكلة. لا يجعل هذا فقط عناوين الموضوعات أكثر صلة، بل يجعل الموضوعات أسهل بكثير للأشخاص للمشاركة فيها وأكثر وضوحًا لأي شخص يبحث عن مواضيع مماثلة في المستقبل.

2nd comment on the #2 point real quick:
So, I forked the Air theme, made my own changes, uploaded it to my own repository, installed it with the GitHub link in my themes section of Admin panel…but now I can’t access CSS/HTML since it is a non-local theme now. How do I work around this? Or do I have to do the component thing you mentioned?

There’s no way to edit local CSS/HTML with an imported GitHub theme? Because at least locally, I could easily edit the CSS/HTML in the Admin panel, but just couldn’t do the @import stuff. But now I did the remote thing you mentioned and can’t edit the theme to add the @import codes, which was the point of this.

التعليق الثاني على النقطة رقم 2 بسرعة:
لذا، قمت بعمل نسخة من سمة Air، وأجريت تغييراتي الخاصة، وقمت بتحميلها إلى مستودعي الخاص، وقمت بتثبيتها باستخدام رابط GitHub في قسم السمات في لوحة الإدارة… ولكن الآن لا يمكنني الوصول إلى CSS/HTML نظرًا لأنها أصبحت سمة غير محلية الآن. كيف يمكنني تجاوز هذا؟ أم هل يجب عليّ القيام بشيء المكون الذي ذكرته؟

لا توجد طريقة لتعديل CSS/HTML المحلي بسمة مستوردة من GitHub؟ لأنه على الأقل محليًا، كان بإمكاني تعديل CSS/HTML بسهولة في لوحة الإدارة، ولكن لم أتمكن من القيام بأشياء @import. ولكن الآن قمت بالشيء البعيد الذي ذكرته ولا يمكنني تعديل السمة لإضافة رموز @import، وهو ما كان الهدف منه.

بخصوص #4:
يمكنك محاولة إضافة هامش علوي لفئة .list-controls.

// في CSS للجوال
.list-controls {
  margin-top: 1rem;
}

image332×387 13 KB

إذًا، الإشارة الوحيدة إلى .list-controls في ملف mobile.scss لدي هي:

.categories-list .list-controls {
  background: var(--secondary);
  padding: 0.5em;
  border-radius: 8px;
}

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }

في أي منها يجب أن أضع الكود الخاص بك؟

يمكنك وضعه داخل المحدد الأول.
أو خيار آخر هو أن هذا الجزء:

.list-controls .nav-pills {
  li.navigation-toggle {
    border-radius: 8px;
    border: none;
    background-color: var(--secondary);
    a:hover,
    a:focus {
      color: var(--primary);
      background-color: var(--secondary);
    }
  }
}

يمكن إعادة كتابته على النحو التالي:

.list-controls {
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }
}

بعد ذلك، يمكنك وضع إعلانات جديدة تؤثر فقط على .list-controls قبل جزء .nav-pills.

إذًا يمكنني إضافة

.list-controls {
  margin-top: 1rem;
}

لجعل كل شيء يبدو هكذا:

.list-controls {
  margin-top: 1rem;
  
  .nav-pills {
    li.navigation-toggle {
      border-radius: 8px;
      border: none;
      background-color: var(--secondary);
      a:hover,
      a:focus {
        color: var(--primary);
        background-color: var(--secondary);
      }
    }
  }

؟

هذا صحيح! على الرغم من أنه يبدو أنه يحتاج إلى } أخرى في النهاية.

إذًا، هذه هي النتيجة التي أحصل عليها على الهاتف المحمول:

Screenshot_20240325-184747_Firefox1073×793 87 KB

للأسف، جعل هذا شريط/منطقة “الأعلى/الرد/النشاط” لا تلامس المشاركات بعد الآن وأصبحت علامة التبويب “الأحدث” تلامس الجزء العلوي. هل يمكننا بطريقة ما جعل منطقة “الأعلى/الرد/النشاط” لا تزال تلامس منطقة المشاركات ولكن صندوق القائمة المنسدلة “الأحدث” لا يلامس الشريط العلوي؟

على الرغم من أنها كانت بسبب الفوضى، إلا أن منطقة “الأحدث” بدت جيدة عند دمجها مع منطقة الموضوع كما هو موضح في لقطة الشاشة الأصلية:

98e4a9a087bd8bd4155fcf5fcf4ecfb4aa778378400×200 19.9 KB

تعديل: يا إلهي… طلب صديق التحقق من الموقع على هاتفه (iPhone 13) وبدا الموقع مدمرًا الآن على هاتفه، هههه… أوه لكنه يبدو “جيدًا” على هاتفي (لقطة الشاشة أعلاه، باستثناء الإصلاحات التي أريدها). يبدو أن عرض الهاتف المحمول العادي جيد على هاتفه ولكن وضع سطح المكتب على الهاتف يجعله فوضويًا.

حسنًا، من الصعب معرفة الأنماط الأخرى التي تؤثر على نسقك. أوصي بالاطلاع على هذا الدليل إذا لم تكن قد اطلعت عليه بالفعل، وخاصة الأجزاء التي توضح كيفية استخدام مدقق المتصفح (في أدوات المطور – يتم الوصول إليها باستخدام F12 في Chrome). يتيح لك هذا رؤية الأنماط التي يتم تطبيقها على كل عنصر وتشغيلها وإيقافها لمعرفة الفرق في الوقت الفعلي.

نظرًا لأنه يتعلق بالعرض على الهاتف المحمول، يمكنك محاكاة الهاتف المحمول على سطح المكتب الخاص بك من معظم المتصفحات. إليك كيف يبدو الزر في Chrome:

image310×123 6.24 KB

هذا متوقع، أليس كذلك؟ وضع سطح المكتب ليس مخصصًا حقًا للأجهزة المحمولة.