هيكلية المواضيع ومكونات الثيمات

[Discourse]

يدعم Discourse السمات الأصلية التي يمكن الحصول عليها من أرشيف .tar.gz أو من مستودع git بعيد بما في ذلك المستودعات الخاصة.

مثال على سمة موجود على: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub

سيتم التحقق من وجود تحديثات في مستودع git (مرة واحدة يوميًا)، أو باستخدام الزر Check for Updates. عند اكتشاف تغييرات، سيتغير الزر Check for Updates إلى Update to Latest.

لإنشاء سمة، تحتاج إلى اتباع بنية ملفات محددة. هذه هي الملفات التي يمكنك تضمينها:

about.json (مطلوب)

common/common.scss
common/header.html
common/after_header.html
common/footer.html
common/head_tag.html
common/body_tag.html
common/embedded.scss

desktop/desktop.scss
desktop/header.html
desktop/after_header.html
desktop/footer.html
desktop/head_tag.html
desktop/body_tag.html

mobile/mobile.scss
mobile/header.html
mobile/after_header.html
mobile/footer.html
mobile/head_tag.html
mobile/body_tag.html

locales/en.yml
locales/{locale}.yml

stylesheets/{anything}/{anything}/{anything}.scss

javascripts/{anything}.js
javascripts/{anything}.hbs
javascripts/{anything}.hbr

assets/{asset_filename}

settings.yml

أي من هذه الملفات اختياري، لذا تحتاج فقط إلى إنشاء الملفات التي تحتاجها.

بالنسبة لأولئك الذين يتطلعون إلى تقسيم سمة SCSS إلى ملفات متعددة، أصبح ذلك ممكنًا الآن.

Split up theme SCSS into multiple files

Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files. When creating a new theme with the theme CLI, or sharing a theme on github, simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will be available for you to import in the common / desktop / mobile SCSS sections of your t…

بالنسبة لأولئك الذين يتطلعون إلى تقسيم السمة إلى ملفات JS متعددة، ما عليك سوى إضافة ملفات JS التي تريدها إلى دليل javascripts.

بنية ملف about.json موضحة أدناه، ويمكنك الاطلاع على مزيد من المعلومات حوله على https://meta.discourse.org/t/adding-metadata-to-a-theme/119205:

{
  "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"
    }
  },
  "screenshots": ["screenshots/light.jpeg", "screenshots/dark.jpeg"]
}

تعليمات حول كيفية إضافة إعدادات إلى السمة الخاصة بك متاحة هنا: Add settings to your Discourse theme.

لإخبار Discourse بأنك ستقوم بإضافة مكون سمة وليس سمة كاملة، ما عليك سوى إضافة السطر "component": true إلى ملف about.json.

تطابق بنية الملف CSS / HTML المخصص للسمة.

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

تحقق من المقالات الأخرى التي تحمل وسم #themes::tag.

انظر أيضًا:

• Developing Discourse Themes & Theme Components
• Install the Discourse Theme CLI console app to help you build themes
• Include assets (e.g. images, fonts) in themes and components

---

آخر مراجعة بواسطة @SaraDev في 2022-08-15T21:00:00Z

---

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

← START DOCS ASSET MAP
[
{
“local_path”: “/assets/theme-structure-1.png”,
“local_sha1”: “5d81758f2f3090bee941c034a5d5a8165df50ce4”,
“remote_short_url”: “upload://465qlv5OiFWlR8qrBc6wGExEt07.png”
},
{
“local_path”: “/assets/theme-structure-2.png”,
“local_sha1”: “66944b3e613c84ac19333461a11ffb39988b5f32”,
“remote_short_url”: “upload://d4Smpts3JzE3LozxhVOInZNjv3S.png”
},
{
“local_path”: “/assets/theme-structure-3.png”,
“local_sha1”: “971f8599d19fa8f30ba787bf7c74bdc54a5f9228”,
“remote_short_url”: “upload://vQ0g1yk6xAJqM2fLe2nCmTdsK9h.png”
}
]
END DOCS ASSET MAP →