طلب ملاحظات على موقعي الجديد

نعم، فكرت بنفس الشيء بمجرد قراءته. سألقي نظرة على موقعك أيضًا! لقد بدأت بالفعل بموضوع Air، وقمت بتخصيصه بشكل كبير باستخدام CSS وما إلى ذلك، ولكن مع موضوعي الحالي مقارنة بموضوع Air الذي كان لدي، لا أعرف… يبدو الأمر بسيطًا جدًا، وهو أمر غريب بالنسبة لي لأقوله لأنني أحب البساطة بشكل عام، هاها.

عندما قال @Lilly و @bryce و @omarfilip إنه كان بطيئًا، كان ذلك في وقت محدد من الليل بالنسبة لي، ثم في نفس الوقت تقريبًا حيث يتم استضافة الخادم. هل سيكون من المزعج جدًا أن أطلب منك، @Heliosurge، و @daemon و @merefield التحقق من ذلك بعد 12 ساعة من الآن عندما قال الآخرون إنه كان بطيئًا، إذا لم تكن مشغولًا وكنت مستيقظًا، هاها؟ أتوق لمعرفة ما إذا كان الأمر يتعلق بالوقت من اليوم.

من الرائع حقًا سماع هذا! خاصة عبر العالم من مكان استضافة الخادم.

رائع!! هل لديك أي ملاحظات/توصيات أخرى؟

إعجاب واحد (1)

لقد جربتها للتو ويبدو أنها تُحمّل على الفور تقريبًا الآن. في البداية اعتقدت أنها تُحمّل من ذاكرة التخزين المؤقت، لكن يبدو أنها لا تفعل ذلك.

إعجابَين (2)

أوه، حسنًا. نعم، غريب. هذا يشير إلى مشكلة تتعلق بالوقت من اليوم. وهو ما منطقي بالنظر إلى الوقت المتأخر من الليل بالنسبة لمكان استضافة الخادم ومعظم الأشخاص المتصلين على الأرجح في تلك الساعة. ومع ذلك… الشركات التي تبلغ قيمتها ملايين/مليارات الدولارات ربما لا تواجه هذه المشكلة، أليس كذلك، بغض النظر عن الوقت من اليوم؟ أعني، لقد كنت على مواقع ويب رئيسية بدت بطيئة من قبل، لكن هذا نادر أكثر من أي شيء آخر.

لقد تم تحميله بسرعة كبيرة بالنسبة لي أيضًا، في نبراسكا مع خدمة 500 ميجابت في الثانية.

إعجاب واحد (1)

بالنسبة لي سيكون 3 صباحًا، وهو الوقت الذي أنام فيه عادةً. :wink:

إعجاب واحد (1)

تحميل سريع جداً الآن الساعة 8:30 صباحاً بتوقيت المحيط الهادئ.

إعجاب واحد (1)

الصفحة تُحمّل بسرعة بالنسبة لي. :+1: تبدو جيدة.

بخصوص ديسكورس، لست من أشد المعجبين بتصميم العلامات (مجرد رأيي):

  • إنها علامات؛ لا أتوقع أن تكون بعرض كامل هنا.
  • إنها بصريًا تجذب الكثير من انتباهك.
  • مشكلة التباين – ليست سهلة القراءة للغاية.

مثال عشوائي:

حظاً موفقاً!

إعجابَين (2)

شكراً على هذه الملاحظات!
في الواقع، جربت عرض العلامات ولكن لم أتمكن من معرفة كيفية توسيطها بعد تغيير حجمها. فيما يتعلق بالألوان، لم أتمكن من العثور على لون أفضل يتناسب مع الوضعين الفاتح والداكن. إذا جعلت المربع أفتح في الوضع الفاتح، فإنه يكون ساطعًا جدًا في الوضع الداكن ويسبب نفس المشكلة.

على سبيل المثال، إذا قمت بفحص العنصر وتغيير خاصية max width إلى 40%، فإنه يظهر بشكل أفضل بصريًا، ولكن بعد ذلك لا يمكنني معرفة كيفية توسيط الشيء بأكمله لأنه في كل مرة أحاول فيها، فإنه يحرك النص فقط، وليس المربع خلفه.

لتوسيط تلك العلامات، يمكنك استخدام خصائص flexbox. العلامات موجودة داخل حاوية رئيسية تم تعيينها بالفعل على display: flex.

يجعل Flexbox من السهل جدًا التحكم في كيفية ترتيب العناصر الفرعية داخل حاوية. هناك ميزة مفيدة في أدوات المطور حيث يمكنك النقر على الأيقونة الصغيرة بجوار display: flex وستظهر مجموعة من عناصر التحكم حتى تتمكن من رؤية أي منها ينتج التأثير المطلوب.

في هذه الحالة، justify-content: center يقوم بالمهمة:

لاحظ أنه يعمل أيضًا مع علامات متعددة:

هذا هو برنامج تعليمي كلاسيكي جيد حول flexbox إذا كنت ترغب في التعمق في مزيد من التفاصيل. إنها أداة مفيدة جدًا في صندوق أدوات CSS الخاص بك :grin:

3 إعجابات

يا إلهي، شكراً جزيلاً لك على هذا! نعم، وجود علامتين تظهران يبدو أقل غرابة من علامة واحدة في المنتصف، لكنني لا أرى الكثير من الأشخاص يستخدمون علامات متعددة لمعظم المنشورات، بصراحة. هممم… قد أحتاج إلى إيجاد طريقة لإظهار العلامة هناك ثم قطعة أخرى من الموضوع/المنشور بطريقة ما باستخدام CSS أو شيء من هذا القبيل حتى يكون هناك شيئان. أو إخفائها تمامًا ربما، ولكن مهلاً.

أو الأفضل من ذلك، هل يمكنني استبدال الفئة بها؟

أشجعك على استخدام متغيرات CSS الخاصة بـ Discourse حول اللون لأنه سيعمل بشكل أفضل مع الوضع المظلم. (يمكنك فحص أي شيء والتمرير لأسفل)


للتوسيط: تعديل: برايس أجاب على هذا بالفعل!

.discourse-tags {
    justify-content: center;
}
color: var(--secondary-low) !important;
background: var(--blend-primary-secondary-5) !important;


يمكنك أيضًا استخدام الدالة dark-light-choose(<lightcolor>, <darkcolor>) لتحديد الألوان الفاتحة والمظلمة حتى يتم استخدام اللون الصحيح عند ضبط الوضع المظلم أو عدم ضبطه.

4 إعجابات

هممم، هل فعلت هذا بشكل خاطئ؟ عندما قمت بلصق هذا في “Inspect Element”، أحصل على:

background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

إعجاب واحد (1)

هذه وظيفة SCSS متاحة في Discourse core. تحتاج إلى استخدامها في CSS الخاص بالمظهر الخاص بك حتى تتم معالجتها. لن تعمل إذا استخدمتها مباشرة في متصفحك.

إعجاب واحد (1)

لا يزال موقعك يتم تحميله بسرعة. أراه لفترة وجيزة جداً.

إن إضافة المكونات حسب الطلب رائعة. أنت متقدم عليّ حيث ما زلت أتعلم جانب البرمجة. قبل discourse منذ فترة طويلة، كنت ألعب فقط بـ basic؛ qbasic و old turbo Pascal. لكنني أتقدم.

إعجاب واحد (1)

حسناً، في ملف .scss الخاص بي، لدي:

.discourse-tags {
        display: flex;
        margin: 1em 0 0 0;
        /* justify-content: center; */
        a {
          display: inherit;
          flex: 1 0 auto;
          justify-content: center;
          max-width: 35%;
          //line-height: var(--line-height-small);
          line-height: 1.1rem;
          border: 0.5em solid transparent;
          /* color: #000000 !important; */
          color: var(--secondary-low) !important;
          background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

مع التركيز على السطرين الأخيرين. يبدو أنه بالنسبة للوضع الفاتح والوضع المظلم، فإنه يبقى على اللون #f0f2f5 بدلاً من التبديل إلى اللون 3a3b3c في الوضع المظلم. هل لديك أي فكرة عن السبب؟

في عنصر الفحص (Inspect Element)، تظل الخاصية:
background: #f0f2f5 !important;
لقد جربت حتى الرابط الذي أشرت إليه أعلاه وحاولت جعلهما $tagbglight و $tagbgdark وتعريفهما، وما إلى ذلك، ولكن لا يزال بدون جدوى.

dark-light-choose('#f0f2f5', '#3a3b3c') يعطيني هذا:

وهو نفس النتيجة التي حصلت عليها سابقًا.
ملاحظة: يظهر عنصر الفحص علامات اقتباس مزدوجة. في الكود، استخدمت علامات اقتباس فردية كما فعلت.

حسنًا، بما أنك تحصل على علامات اقتباس في النتيجة النهائية، فربما تجرب هذا:

dark-light-choose(unquote("#f0f2f5"), unquote("#3a3b3c"))

لست متأكدًا مما إذا كان سيساعد في اختيار اللون الصحيح، على الرغم من ذلك!

هذا يزيل علامات الاقتباس، ولكنه لا يزال يطبق هذا اللون فقط كخلفية عند التبديل بين الأوضاع: #f0f2f5

هذا غريب. يبدو أن الدالة نفسها تقارن سطوع الألوان الأساسية والثانوية. لست متأكدًا لماذا لا تعمل. :thinking:

@function dark-light-choose($light-theme-result, $dark-theme-result) {
  @if is-light-color-scheme() {
    @return $light-theme-result;
  } @else {
    @return $dark-theme-result;
  }
}

@function is-light-color-scheme() {
  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
    @return true;
  } @else {
    @return false;
  }
}

أعتقد أنك بحاجة إلى تعريف متغير CSS في color_definitions.scss.

على سبيل المثال:

:root {
    --bg-custom: dark-light-choose(#f0f2f5, #3a3b3c);
}

ثم يمكنك استخدام:

background: var(--bg-custom) !important;