كيفية تجاوز متغير اللون لنمط واحد فقط؟

[Queth (Q)]

(عذراً، لم أستطع العثور على المكان الأنسب لهذا الموضوع، لذا اخترت قسم المطورين)

لدي ثلاثة سِمات. في إحدى السمات، ينتج حساب $primary_low لوناً ذا تباين ضعيف جداً مع لون الخلفية. حاولت تعديل اللون الأساسي (لا يمكن تغيير لون الخلفية لأنه لون علامة تجارية)، لكن دون جدوى. فإما أن يعطي تبايناً شبه معدوم، أو يُنتج تأثيراً شبيهاً بـ “التمييز” (highlight) وهو عكس ما أريده تماماً.

الحل (بحسب ظني) هو ببساطة تعيين قيمة لون لـ $primary_low في ملف CSS الخاص بتلك السمة المحددة. لكن التعديل لا يثبت. وحتى إضافة !important لم تنجح. هل هناك طريقة لتغيير هذا السلوك لسمة واحدة فقط؟ ملاحظة: هذه سمات محلية.

[david (David Taylor)]

اطّلع على دليل @awesomerobot هنا:

Override values for auto-generated color variables

As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.) To override one of these colors you need to add it to the color_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors. "color_schemes": { “My_colors”: { "primary": "000000…

[Queth (Q)]

أهلاً وشكراً! للأسف، إنه سمة محلية ولن تكون عن بُعد. هل هناك طريقة أخرى يمكنني القيام بذلك؟

[david (David Taylor)]

يُعتبر هذا ميزة متقدمة، لذا فهو غير متاح في واجهة المستخدم. يمكنك استخدام أداة سطر الأوامر للموضوعات على “الموضوعات المحلية”.

[Queth (Q)]

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

[smrtey]

المواضيع البعيدة سهلة للغاية. لم أكن قد استخدمت GitHub من قبل ولم يكن لدي أي فكرة عما تعنيه ملف about.json، لكنني استخدمتها مع عدة مواضيع دون أي مشكلة. كل ما عليك فعله هو إنشاء موضوع محلي ثم رفعه إلى GitHub، ثم يمكنك إضافة محتوى إلى ملف about.json على GitHub، وستحصل في النهاية على مجموعة من الخيارات القابلة للتخصيص والممتعة لموضوعك عند إعادة تثبيته على موقعك من GitHub.

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

تحديث: ضحكت، كنت أفكر في ملف settings.yml وهو أيضًا ميزة رائعة للمواضيع البعيدة، لكن بعد النظر إلى رابط David أعلاه، أرى أن ملف about.json أبسط حتى.

[smrtey]

إليك التعليمات المفصلة بشكل مفرط. أخبرني إذا لم تعمل كما هو معلن.

1. أنشئ حسابًا على GitHub إذا لم يكن لديك بالفعل.

2. في Discourse، قم بتصدير المظهر الخاص بك:
   إدارة → تخصيص → اختر المظهر الذي تريد تصديره
   

   
   
   سيتم حفظ المظهر كملف .zip على جهاز الكمبيوتر الخاص بك.

3. استخرج الملفات على جهاز الكمبيوتر الخاص بك.

4. اذهب إلى GitHub وأنشئ مستودعًا جديدًا:
   

   
   
   
   

5. انقر على “رفع ملف موجود”
   

   

6. اسحب المجلدات والملفات غير المضغوطة من المظهر الذي قمت بتصديره (سيكون شيئًا مثل):
   

   
   
   من جهاز الكمبيوتر الخاص بك إلى مستودعك، ثم انقر على “Commit Changes” (تأكيد التغييرات).

7. الآن يمكنك تعديل ملف about.json. انقر على اسم الملف.
   
   

سيكون الملف شيئًا مثل:

{
  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-light": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

8. انقر على أيقونة قلم التعديل.

الآن يمكنك تعديله. أوصي بتغيير اسم مخطط الألوان؛ وإلا عند استيراد المظهر مرة أخرى إلى موقعك، ستنتهي مع مخططين مختلفين للألوان لهما نفس الاسم. لذا، في الأسفل قمت بتغيير "blue-light": { إلى "blue-lite": {

فقط أضف تجاوزات متغيرات الألوان الخاصة بك في نهاية مخطط الألوان بعد love وتأكد من تضمين فاصلة بعد قيمة love.

  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-lite": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100",
      "primary-high": "333333",
      "primary-medium": "666666",
      "primary-low-mid": "999999",
      "primary-low": "cccccc"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

9. انقر على “Commit Changes” (تأكيد التغييرات).

10. انقر على اسم المستودع للعودة إلى الصفحة الرئيسية للمستودع.
    

    

11. انسخ رابط النسخ أو التحميل.
    

    

12. في Discourse، قم باستيراد المظهر الخاص بك:
    إدارة → تخصيص → تثبيت → من مستودع git: الصق الرابط وقم بالتثبيت.
    

    

13. يمكنك الآن تعديل هذا المظهر تمامًا كما تفعل مع أي مظهر محلي بقيم $primary-high و $primary-medium و $primary-low-mid و $primary-low المخصصة.

[Queth (Q)]

شكرًا جزيلاً لك @smrtey على إعداد هذا الدليل خطوة بخطوة! اليوم، أخيرًا وجدت وقتًا للجلوس ومتابعته. لقد نجح الأمر بشكل رائع!
كانت هذه هي خطواتي الأولى على GitHub أيضًا، فلم أكن قد أنشأت حسابًا أو مستودعًا من قبل. لذا، شكرًا لك مرة أخرى.

ربما يمكن تضمينه في دليل إنشاء السمات؟ أو إضافة رابط إليه؟

[smrtey]

إعدادات مخصصة هي أيضًا شيء رائع اكتشفته. تحتاج إلى إضافة ملف settings.yml إلى مستودع GitHub الخاص بالموضوع أو المكون الخاص بك. إليك مثال على مكون مع إعدادات يمكنك تخصيصها:

GitHub - oerog/CustomSettings

هذا هو ملف settings.yml الذي يحدد المتغيرات $header_text و $header_text_color و $header_bg

header_text: 
  type: bool
  default: false
  description:
    en: 'حدد لإضافة نص في الرأس بجانب الشعار.'
header_text_color: 
  type: string
  default: "$header_primary"
  description:
    en: 'لون النص (الافتراضي هو "الرئيسي للرأس")'
header_bg: 
  type: string
  default: "$header_background"
  description:
    en: 'لون النص (الافتراضي هو "خلفية الرأس")'

مما يمنحك خيارات الإعدادات هذه عند تثبيت المكون:

الذي يحدد هذا الـ CSS

@if $header_text == "true" {
    .d-header .title::after {
        padding: 0 20px;
        font-size: 1.3em;
        color: $header_text_color;
        background-color:$header_bg;
        content: "هنا بعض النص";
    }
    .archetype-regular #main.no-text .d-header .title::after {
        display:none;
    }
}

يمكنك تثبيت نفس المكون عدة مرات (فقط قم بإعادة تسميته بعد التثبيت للمساعدة في التتبع) حتى تتمكن من إضافة المكون إلى مواضيع مختلفة بإعدادات مختلفة لكل موضوع.

إليك كيفية إنشاء ملف settings.yml. قم بإنشاء ملف جديد:

أدخل الكود (أكتبه في ملف نصي ثم أقوم بنسخه ولصقه):

احفظه عن طريق “Commit new file”

ثم قم بتثبيت المكون على موقعك وعدّل الإعدادات