كيفية الإشارة إلى صورة بالاسم المحدد في الإعدادات؟

مطور
1

في مكون سمة، يعرض صورة (قبعة) على الشاشة
لاستخدام صورة في scss، تعمل مع اسم الأصل الخاص بها مباشرةً هكذا،
هذه الصور معرفة في about.json

{
  "name": "christmas-decorations",
  "about_url": "",
  "license_url": "",
  "author": "",
  "assets": {
    "red-hat1": "assets/decorations/red-hat1.png",
    "red-hat2": "assets/decorations/red-hat2.png",
    "squirrel2": "assets/decorations/squirrel2.png"
  }
}

لاستخدام هذه الصور في scss، تعمل بشكل جيد إذا استخدمت اسم الأصل مباشرةً هكذا

background: transparent url($red-hat1) top left no-repeat;

أريد إضافة إعداد لاختيار صورة.
في settings.yml، لدي هذا، لاختيار صورة قبعة لعرضها على الشاشة

hat_type:
  default: red-hat1
  type: enum
  choices:
    - red-hat1
    - red-hat2
    - squirrel2

يمكنني استخدام if else في scss لاستخدام الصورة، ولكن كتلة if else هذه قد تكون طويلة جدًا …

    @if $hat_type == "red-hat1" {
      background: url($red-hat1) no-repeat center;
    } @else if $hat_type == "red-hat2" {
      background: url($red-hat2) no-repeat center;
    } @else if $hat_type == "squirrel2" {
      background: url($squirrel2) no-repeat center;
    }

لقد حاولت استخدام دالة في scss

 background: url(get_image($hat_type)) no-repeat center;

@function get_image($name){
  @return "assets/decorations/" + $name + ".png"
}

ولكن هذا يحصل على عنوان URL مثل
https://www.domain.com/stylesheets/assets/decorations/squirrel2.png
هذا لا يعمل، يجب أن يتم حله هكذا بدلاً من ذلك …
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

هل يمكن لأحد أن يعطي تلميحًا، شكرًا جزيلاً :slight_smile: …

2

أعتقد أنه يمكنك استخدام الإعداد مباشرة باستخدام الاستيفاء.

background: transparent URL(\"$#{$hat_type}\") top left no-repeat;

3

شكرا لك Arkshine.

باستخدام هذه الصيغة، اخترت squirrel2 لنوع القبعة (hat_type) في الإعدادات.

background: transparent url("$#{$hat_type}") top left no-repeat;

في صفحة الويب، قمت بفحص الأنماط، وتم تحويلها إلى هذا…

image
image624×214 22.3 KB

تخمين
داخل الدالة url()، يجب أن تكون متغيرًا squirrel2، بينما "#{$hat_type}"، هذا يعطي سلسلة نصية $squirrel2…؟

وقد جربت هذا

background: transparent url("assets/decorations/#{$decoration_image}.png") top left no-repeat;

تم عرضه على هذا النحو، ولا يزال غير صحيح
image

4

جرب إضافة / إلى بداية مسار الأصول هذا.

5

شكرا @Firepup650
حاولت إضافة / قبل assets، لم ينجح الأمر أيضاً، إنه يضيف / في المنتصف،
ولكنه لا يحولها إلى الرابط الفعلي، يجب أن يكون شيئاً مثل
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

6

أنت على حق؛ اعتقدت أنها تعمل من جانبي، لكنني أعتقد أنها لا تعمل. :thinking:

إليك بديل: تعيين خاصية CSS مخصصة عبر js.

document.documentElement.style.setProperty(
  "--hat-url",
  `url(${settings.theme_uploads[settings.hat_type]}`
);

body {
  background: var(--hat-url);
}

ستحتوي settings.theme_uploads على قائمة بتحميلاتك.
على سبيل المثال:
image

ثم، بناءً على إعداداتك، تقوم بتعيين الخاصية المخصصة.

لاحظ أنه من خلال اختباري، لا تعمل url(var(--hat-url))، ولهذا السبب مررت url() مباشرة في الخاصية المخصصة.

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