هيكل الثيمات ومكونات الثيم

[Discourse]

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

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

سيتم فحص مستودع 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 →