دليل مرجعي سريع لمطوري السمات

[Discourse]

مع تزايد قوة السمات، تزداد الأمور التي يجب تذكرها حول كيفية عملها. لدينا كم كبير من الوثائق التفصيلية تحت #howto / #themes، ولكن إذا كنت تحتاج فقط إلى شيء يذكرك بالأمر، فقد تساعدك هذه الدليل.

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

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

بنية الملفات/المجلدات اقرأ المزيد

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) => {
  // Your code here
});

واجهة برمجة تطبيقات JS للإضافات

جافا سكريبت متعددة الملفات

الإعدادات اقرأ المزيد

settings.yml:

fruit:
  default: apples|oranges
  type: list
  description: # الطريقة القديمة. من الأفضل تعريف هذه في ملفات اللغة (انظر أدناه)
    en: English Description
    fr: Description Française

الوصول إليها من جافا سكريبت:

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
}

الوصول إليها من جافا سكريبت:

@service siteSettings;

this.siteSettings.enable_welcome_banner;

الوصول إليها من قوالب gjs:

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

الترجمات اقرأ المزيد

locales/en.yml

en:
  my_translation_key: "I love themes"
  theme_metadata: # تُستخدم هذه في لوحة الإدارة. لا يتم توفيرها لملفات js/hbs الخاصة بك
    description: This theme lets you do amazing things on your Discourse
    settings:
      fruit: A description of the whitelisted_fruits setting

الوصول إليها من جافا سكريبت:

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.