تسمح السمات ومكونات السمات بمعالجة الأصول التي تم تحميلها مثل الصور والخطوط. يمكنك التحكم في الأصول التي تقبلها السمة الخاص بك باستخدام إعداد الموقع: theme authorized extensions
تضمين الأصول في السمات والمكونات
للسمات البعيدة
تتضمن السمات البعيدة ما يلي:
- السمات والمكونات المثبتة من قائمة السمات Popular
- السمات والمكونات المثبتة باستخدام طريقة From a git repository
لتحميل الأصول إلى سمة بعيدة أو مكون سمة، راجع Create and share a font theme component للحصول على مثال مفصل.
تحميل الأصول إلى السمات والمكونات المحلية
تتضمن السمات المحلية ما يلي:
- السمات الافتراضية الفاتحة والداكنة التي تأتي مع كل تثبيت لـ Discourse
- السمات والمكونات التي تم إنشاؤها باستخدام طريقة التثبيت + Create New
- السمات والمكونات التي تم تحميلها من جهاز الكمبيوتر المحلي الخاص بك باستخدام طريقة التثبيت From your device.
لتحميل الأصول إلى سمة محلية أو مكون سمة، انتقل إلى السمة أو المكون الخاص بك وحدد + Add في قسم التحميلات (Uploads):
في نافذة “Add Upload” المنبثقة، اختر ملفًا وأدخل اسم متغير SCSS لاستخدامه مع تخصيصات CSS و/أو javascript و/أو handlebars:
بمجرد التحميل، سيظهر الأصل في قائمة التحميلات (Uploads):
ملاحظة هامة: لا تقم بإضافة عمليات تحميل إلى السمات والمكونات عبر واجهة المسؤول إذا تم تثبيت المكون عن بُعد من مستودع git. ستؤدي التحديثات إلى المكون إلى مسح أي عمليات تحميل لم يتم تضمينها في مستودع git.
كيفية استخدام الأصول
SCSS
@font-face {
font-family: Amazing;
src: url($Comic-Sans) format("woff2");
}
body {
font-family: Amazing;
font-size: 15px;
}
.d-header {
background-image: url($texture);
}
:information*source: _عند استخدام خطوط
ttfأوotf، تأكد من استخدام تنسيقopentype._
Javascript
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
console.log(settings.theme_uploads.balloons);
});
HTML
لا يمكنك إضافة أصل سمة مباشرة إلى HTML عادي (كما هو الحال في قسم الرأس أو بعد الرأس في لوحة تحكم المسؤول الخاصة بالتخصيص). يجب عليك استخدام قالب handlebars أو واجهة برمجة تطبيقات المكون الإضافي (المزيد حول ذلك في Developing Discourse Themes & Theme Components).
إحدى الطرق البديلة هي تحميل الأصل الخاص بك كصورة خلفية باستخدام SCSS (كما في المثال أعلاه). لذلك، في قسم رأس السمة الخاص بك، قد تضيف:
<div class="my-custom-div">
<a href="/"></a>
</div>
ثم في CSS الخاص بك:
.my-custom-div a {
height: 50px;
width: 100px;
background-image: url($asset-name);
}
الوصول إلى تحميلات السمة كإعدادات
يمكنك أيضًا التعامل مع theme_uploads كإعدادات في JavaScript (الالتزام ذي الصلة).
يتيح هذا للسمات والمكونات الوصول إلى أصول السمة.
داخل ملف js الخاص بالسمة، يمكنك الآن الحصول على عنوان URL للأصل باستخدام:
settings.theme_uploads.name
معلومات إضافية
يتم التحكم في إصدار هذه الوثيقة - اقترح تغييرات على github.
