تتيح لك السمات ومكوّنات السمات التعامل مع الأصول المرفوعة مثل الصور والخطوط. يمكنك التحكم في الأصول التي تقبلها سماتك باستخدام إعداد الموقع: theme authorized extensions
تضمين الأصول في السمات والمكوّنات
للسمات عن بُعد
تشمل السمات عن بُعد:
- السمات والمكوّنات المثبّتة من قائمة الشائعة للسمات
- السمات والمكوّنات المثبّتة باستخدام طريقة من مستودع git
لرفع الأصول إلى سمة عن بُعد أو مكوّن سمة، راجع Create and share a font theme component للحصول على مثال مفصّل.
رفع الأصول إلى السمات والمكوّنات المحلية
تشمل السمات المحلية:
- السمات الافتراضية الفاتحة والداكنة المرفقة مع كل نسخة من Discourse
- السمات والمكوّنات المُنشأة باستخدام طريقة التثبيت + إنشاء جديد
- السمات والمكوّنات التي تم رفعها من جهازك المحلي باستخدام طريقة التثبيت من جهازك.
لرفع الأصول إلى سمة محلية أو مكوّن سمة، انتقل إلى سماتك أو مكوّنك واختر + إضافة في قسم الرفع:
في نافذة إضافة الرفع، اختر ملفًا وأدخل اسم متغير SCSS لاستخدامه مع تخصيصات CSS وjavascript و/أو handlebars الخاصة بك
بمجرد الرفع، ستظهر الأصل في قائمة الرفع:
ملاحظة مهمة: لا تضف عمليات رفع إلى السمات والمكوّنات عبر واجهة الإدارة إذا تم تثبيت المكوّن عن بُعد من مستودع 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);
}
:informationsource: _عند استخدام خطوط
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 أو واجهة برمجة التطبيقات (plugin API) (المزيد حول ذلك في 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.
