مع ازدياد قوة الثيمات، يزداد ما يجب تذكره حول كيفية عملها. لدينا الكثير من الوثائق التفصيلية تحت #howto / #themes، ولكن إذا كنت تحتاج فقط إلى شيء لتنشيط ذاكرتك، فقد يساعدك هذا الدليل.
موارد عامة
دليل المبتدئين
دليل المصممين
دليل المطورين
منشئ الثيمات
Theme 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 only)
locales/
en.yml
...
assets/
(ملفات مسماة بشكل اعتباطي، مشار إليها في about.json)
stylesheets/
(ملفات مسماة بشكل اعتباطي، يمكن استيرادها من بعضها البعض، ومن common/desktop/mobile.scss)
javascripts/
(ملفات مسماة بشكل اعتباطي. يدعم .js و .hbs و .raw.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 المتاحةجافاسكريبت اقرأ المزيد
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Your code here
});
الإعدادات اقرأ المزيد
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Old method. It's better to define these in the locale files (see below)
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: # These are used in the admin panel. They are not made available to your js/hbs files
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.
