دليل المراجع السريع لمطوري القوالب

[Discourse]

مع زيادة قوة السمات، تزداد التفاصيل التي يجب تذكرها حول طريقة عملها. لدينا وثائق مفصلة للغاية تحت #theme-guides، ولكن إذا كنت بحاجة فقط إلى تذكير سريع، فقد تساعدك هذه الدليل.

الموارد العامة

دليل المبتدئين
دليل المصممين
دليل المطورين
منشئ السمات
سطر أوامر السمات
دليل السمات
دليل المكونات
معدِّلات السمات
إعدادات الموقع القابلة للتخصيص

هيكل الملفات والمجلدات المزيد من القراءة

about.json
settings.yml
common/, desktop/, mobile/
  {common|desktop|mobile}.scss
  head_tag.html
  header.html
  after_header.html
  body_tag.html
  footer.html
  embedded.scss (لـ common فقط)
locales/
  en.yml
  ...
assets/
  (ملفات بأسماء عشوائية، مُشار إليها في about.json)
stylesheets/
  (ملفات بأسماء عشوائية، يمكن استيرادها من بعضها البعض، ومن common/desktop/mobile.scss)
javascripts/
  (ملفات بأسماء عشوائية. يدعم .js و .gjs و .hbs)

about.json معلومات الهيكل، البيانات الوصفية المتاحة

{
  "name": "My Theme",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "variable-name": "assets/my-asset.jpg"
  },
  "color_schemes": {
    "My Color Scheme": {
      "primary": "222222"
    }
  }
}

SCSS

متغيرات CSS المتاحة

JavaScript المزيد من القراءة

// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // ضع كودك هنا
});

واجهة برمجة تطبيقات JavaScript

JavaScript متعدد الملفات

الإعدادات المزيد من القراءة

settings.yml:

fruit:
  default: apples|oranges
  type: list
  description: # الطريقة القديمة. من الأفضل تعريف هذه في ملفات الترجمة (انظر أدناه)
    en: وصف باللغة الإنجليزية
    fr: وصف باللغة الفرنسية

الوصول من JavaScript:

console.log(settings.fruit);

الوصول من قوالب gjs:

<template>{{settings.fruit}}</template>

الوصول من scss:

html {
  font-size: #{$global-font-size}px;
  background: $site-background;
}

إعدادات الموقع القابلة للتخصيص المزيد من القراءة

about.json:

"theme_site_settings": {
  "enable_welcome_banner": false
}

الوصول من JavaScript:

@service siteSettings;

this.siteSettings.enable_welcome_banner;

الوصول من قوالب gjs:

<template>{{this.siteSettings.enable_welcome_banner}}</template>

الترجمات المزيد من القراءة

locales/en.yml

en:
  my_translation_key: "أحب السمات"
  theme_metadata: # تُستخدم هذه في لوحة الإدارة. لا يتم جعلها متاحة لملفات js/hbs الخاصة بك
    description: هذه السمة تتيح لك القيام بأشياء مذهلة على Discourse الخاص بك
    settings:
      fruit: وصف لإعداد whitelisted_fruits

الوصول من JavaScript:

import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));

الوصول من قوالب gjs:

import { i18n } from "discourse-i18n";

<template>
  {{i18n (themePrefix "my_translation_key")}}
  <DButton @label={{theme-prefix "my_translation_key"}} />
</template>

---

يتم التحكم في إصدار هذا المستند - اقترح التغييرات على github.