هذا ليس مفترضًا أن يُستخدم كسمة بحد ذاته.
هذا مكون سمة مفترض أن يتعامل مع الخلفية فقط. من المفترض دمجه في تصميم سمعتك.
المستودع: GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub
يستخدم هذا المكون مكتبة StackBlur الخاصة بـ ماريو كليمان (2kb مضغوطة - رخصة MIT) لتوليد خلفيات ضبابية ذات أداء تمرير عالي بناءً على صورة تختارها في عنصر <canvas>.
أمثلة: (هذه مضغوطة لذا تحتوي على تشوهات - الخلفيات ناعمة)
إذا استخدمت هذه الصورة:
ستبدو خلفية Discourse الناتجة كالتالي:
وعلى الهاتف المحمول:
عينة أكثر مع صور أخرى:
جودة الصورة التي تستخدمها لا تهم حقًا لأن الضبابية متسامحة جدًا، لذا أوصي بصور jpg مضغوطة بشدة لا تتجاوز 1080p - كل ما تريده هو الألوان.
التثبيت
قم بتثبيت المستودع كما تفعل مع أي مكون سمة آخر:
بمجرد الانتهاء من ذلك، اتبع الخطوات التالية:
1- أنشئ سمة جديدة
2- سمّها كما تريد
3- أضف هذا في قسم رأس الصفحة المشترك:
<canvas
id="background_b"
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT"
></canvas>
4- غيّر BACKGROUND_URL_GOES_HERE إلى رابط صورتك
(يجب أن يكون مستضافًا على نطاقك أو على نطاق مُعد بشكل صحيح CORS)
5- غيّر BLUR_AMOUNT إلى مقدار الضبابية المطلوب (0 - 180)، فكلما زاد الرقم زاد الضباب.
6- أضف خلفيات StackBlur كمكون سمة تحت سمعتك الجديدة.
مهم
تستخدم عينات العرض مخطط الألوان “داكن بسيط”.
قد تكون لاحظت الخلفية الداكنة الخفيفة خلف قائمة المواضيع.
هذا ليس جزءًا من مكون السمة
تم تحقيق ذلك باستخدام CSS التالي:
#main-outlet {
background: rgba(0, 0, 0, .5);
padding-left: 2em;
padding-right: 2em;
}
أيضًا، تضيف السمة الافتراضية للهاتف المحمول خلفية بلون صلب لعنصر <body>، لذا ستحتاج إلى إزالتها إذا كنت تريد أن تظهر الخلفية الضبابية على الهواتف المحمولة. يمكنك فعل ذلك كالتالي:
.mobile-view {
body {
background: none;
}
}
