در این آموزش سعی داریم چگونگی ایجاد یک تم جدید در  Moodle  را براساس boost آموزش دهیم.

Moodle 3.2 شامل یک هسته  theme جدید به نام “boorst” است که نقطه شروع خوبی برای طراحان themeی است که منتظر یک طراحی مدرن برای Moodle  با استفاده از آخرین ویژگی های موجود در تم Moodle هستند.

شروع کنیم…

theme چیست؟

themeها در Moodle نوع دیگری از افزونه ها هستند که می توانند گسترش و بهبود پیدا کنند. themeها مسئول ایجاد ساختار هر صفحه می باشند و توانایی customize کردن خروجی هر صفحه در Moodle را دارند.

این آموزش بر اساس یک theme با نام “theme_photo” است که می توانید آن را دانلود کنید یا کد منبع آن را اینجا ببینید:

https://github.com/damyon/moodle-theme_photo

انتخاب نام

theme جدید به یک نام نیاز دارد. برای انتخاب نام سعی کنید از یک نام کوتاه و به یاد ماندنی استفاده کنید  و مطمئن شوید که این نام قبلا توسط شخص دیگری استفاده نشده است. یک جستجوی سریع در moodle.org/plugins می تواند شما را از دردسر تغییر نام احتمالی بعدی نجات دهد.

در این آموزش  به دلیل اینکه این theme مربوط به برخی از تنظیمات در مورد “photo ها” در مکان های مختلف Moodle می باشد ما theme آموزشی را “photo” می نامیم.

شروع فایل ها

تم ها به عنوان یک افزونه،  باید با ساختار پایه ی پلاگین در Moodle شروع شوند. برای مرور کامل فایل هایی که برای همه افزونه ها در Moodle مشترک هستند  https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin را بررسی کنید.

برای ایجاد theme ابتدا یک پوشه جدید در “/theme/” folder در مسیر دایرکتوری Moodle ایجاد می کنیم.

حالا ما باید برخی از فایل های افرونه استاندارد را به theme خودمان اضافه کنیم. اولین آنها version.php است.

ما همچنین به یک فایل زبان نیاز داریم تا بتوانیم همه string ها را در صورت لزوم به زبان های مختلف ترجمه کنیم. نام این فایل ، نام مولفه های افزونه ما است که در فایل lang/en/ قرار گرفته است. می توانیم ترجمه های مورد نیازمان را در https://lang.moodle.org/ پیدا کنیم. /theme/photo/lang/en/theme_photo.php

فایل های ویژه Theme
افزونه های theme دارای چندین فایل استاندارد هستند که نیاز به تعریف دارند. theme ها به یک فایل favicon نیاز دارند. این قسمت را ببینید favicon
pix/favicon.ico
( فایل های image نشان داده نمی شود)
theme ها همچنین نیاز به یک تصویر نمونه ای (example screenshot ) دارند که در انتخاب theme نمایش داده شود. pix/screenshot.jpg
( فایل های image نشان داده نمی شود)
themeها به فایل lib.php نیاز دارند.این فایل شامل callbacks استفاده شده توسط API های مختلف در Moodle است. در ابتدا این فایل می تواند خالی باشد، اما همانطور که ما ویژگی هایی را به theme اضافه می کنیم، نباز به اضافه کردم برخی توابع را نیز در این فایل داریم.

lib.php

تنظیمات theme در فایل config.php قرار می گیرد. این فایل یکی از مهمترین فایل های موجود در theme ما است.زمانیکه این فایل را اضافه میکنیم، آماده هستیم برای اولین بار theme خود را تست کنیم.

config.php

Ready set go!
اگر آموزش ما را دنبال کرده باشید – اکنون در نقطه ای هستیم که می توانیم theme جدیدمان را نصب و آزمایش کنیم. با دیدن صفحه اعلانات مدیر، برای نصب افزونه جدید theme را امتحان کنید و سپس theme جدید را از قسمت theme selector انتخاب کنید. theme selector
زمانیکه شما theme جدید را انتخاب می کنید متوجه خواهید شد که دقیقا شبیه Boost است.در این مرحله با کمترین پیکربندی – ما تقریبا همه چیز را از theme پدرمان (parent) از جمله سبک ها و الگوها به ارث می بریم. شما متوجه خواهید شد که ما تنظیمات را از theme پدرمان به ارث نمی بریم.( اگر یکی از پیش فرض های مختلف را در Boost انتخاب کنید – در theme فرزند اعمال نمی شود.)

نکته : اطمینان حاصل کنید که فایل config.php شما شامل $THEME->hidefromselector = false; (or at least set to false) or else باشد، در این صورت theme شما در قسمت theme selector نمایش داده نخواهد شد.

What if I want the settings too? اگر تنظیمات را بخواهم چه می شود؟
اگر تنظیمات Boost را برای theme فرزند می خواهیم ، باید اطلاعات حداقلی ی از تنظیمات Boost بدانیم تا بتوانیم آنها را در theme فرزند به کار ببریم.

Setting 1 – preset.
فایل “preset” فایلی است که به عنوان فایل اصلی برای کامپایل scss استفاده می شود. که در Boost با مقادیر تنظیم theme کنترل می شود:

theme_boost / config.php

theme_boost/lib.php

آنچه که این تابع انجام می دهد، بررسی تنظیمات تم “present (پیش تنظیم شده)” و همچنین فچ کردن فایل از فایل های ذخیره سازی داخلی Moodle یا از / preset / folder است. سپس تابع محتویات فایل را باز می گرداند.
این تنظیماتت به طور خودکار برای theme فرزند کار نمی کند زیرا ما هیچ تنظیماتی با نام “preset” در theme فرزند نداریم و این کد در theme پدر جستجویی را برای این تنظیمات انجام نمی دهد. اگر بخواهیم که این تنظیمات را در theme فرزند اعمال کنیم باید طبق فایل پایین این کار را انجام دهیم:

config.php

Settings 2+3 brandcolor + scsspre
نحوه کار این تنظیمات، به این صورت است که یک قسمت از SCSS را به فایل اصلی SCSS اضافه می کند. در boost به این صورت عمل می کند:

theme_boost/config.php

theme_boost/lib.php

کاری که این کد انجام می دهد به این ترتیب است:

  • loop کردن بر روی لیستی از تنظیمات theme که به متغیر SCSS نگاشت شده است و ساخت تعدادی SCSS برای راه اندازی متغیرهایی که در تنظیمات قرار دارند. در Boost تنها یک brandprimary وجود دارد – اما اگر بخواهیم متغیرهای bootstrap را به عنوان تنظیمات theme نمایش دهیم، می توانیم از این تابع به عنوان یک الگو در theme فرزند استفاده کنیم و تنظیمات بیشتری را به آرایه configurable $ اضافه کنیم.
  • اضافه کردن تمام SCSS های خام از تنظیمات scsspre تم.
  • بازگشت تمام موارد به صورت رشته برای اضافه شدن قبل از فایل scss اصلی.

اگر بخواهیم این کد در theme فرزند مان کار کند، با استفاده از تنظیمات Boost می توانیم این کار را انجام دهیم:

config.php

lib.php

(Setting 4 scss (post
تنظیمات نهایی Boost یک فیلد متنی خام است که SCSS را به انتهای فایل اصلی SCSS اضافه می کند. این قسمت یک مکان مفید برای اضافه کردن قوانین style است چرا که آنها style های قبلا تعریف شده با همان مشخصه را لغو می کنند. با کدهای زیر این قوانین به فایل Boost اضافه می شود:

theme_boost/config.php

theme_boost/lib.php

این کد مقادیر تنظیمات را به صورت رشته بازمی گرداند.
برای اعمال کردن این تنظیمات به theme فرزند، کدهای مشابهی را به قسمت قبلی اضافه کرده ایم.

config.php

lib.php

کپی کردن تنظیمات از boost
کپی کردن یک روش پیشنهادی برای گسترش Boost بعنوان یک theme فرزند است به دلیل اینکه تنظیمات theme شما با تغییر تنظیمات Boost تغییری نخواهد کرد و هر دو theme می توانند با تنظیمات مختلف استفاده شوند.
همه چیزهایی که احتیاج داریم که اتفاق بیفتند، ساخت تنظیمات theme در تم فرزند است که هر کدام از تنظیمات مربوط به تم اصلی را مطابقت دهد.برای هر کدام از این تنظیمات در پرونده زبان، باید رشته های مربوطه را اضافه کنید. این مثال نشان می دهد که چگونه این کار را انجام دهیم. ما از کلاس boost_admin_settingspage_tabs استفاده کرده ایم و نسخه های تکراری هر یک از تنظیمات را ایجاد می کنیم.

settings.php

lang/en/theme_photo.php

اگر شما سعی کنید یک فایل “present” را آپلود و سپس آن را انتخاب کنید، متوجه خواهید شد که هنوز کار ما کاملا تمام نشده است. تابع “theme_boost_get_main_scss_content” از Boost انتظار دارد که فایل های “present” فقط برای theme_boost ذخیره شود. ما باید این تابع را به theme خودمان اضافه کنیم .

config.php

lib.php

توقف کن و امتحان کن
حالا چه چیزی کار می کند و چه چیزی کار نمی کند. خوب – همه چیز باید کار کند و شما باید یک theme زیبا و جدید داشته باشید که با صفحات تنظیمات خود باعث گسترش Boost می شود.هنگامی که Boost برای رفع اشکالات به روزرسانی ها را دریافت می کند، theme جدید نیز این اصلاحات را به ارث می برد؛ زیرا همه SCSS و قالب ها را از تم Boost به ارث می برد.علاوه بر این theme جدید شما فایل های از پیش تعیین شده (present) را دریافت و از تمام ویژگی های مشابه و تنظیمات Boost پشتیبانی میکند.

بیشتر بدانید
حالا ما در نقطه شروع بسیار خوبی هستیم که می توانیم شروع به تغییر یا اضافه کردن ویژگی ها، سفارشی سازی قالب ها و خروجی ها و یا افزایش سرعت SCSS کنیم.

اضافه کردن بعضی تنظیمات جدید
از این نقطه در آموزش ما شروع به اضافه کردن ویژگی های به theme خودمان میکنیم تا آن را گسترش دهیم و جذاب کنیم!!!
بیاین با اضافه کردن تنظیماتی برای اضافه کردن عکسی به بک گراند صفحه لاگین شروع کنیم. همانطور که ر ابتدا دیدید، theme ما، لیستی از تنظیمات را در یک فایل با نام settings.php تعریف می کند. بخش Admin settings را برای به دست آوردن اطلاعات بیشتر در مورد اضافه کردن تنظیمات ادمین به هر افزونه ای مطاله کنید. تمام انواع مختلف تنظیمات ادمین در lib/adminlib.php می توانند پیدا شوند. ما میخواهیم تنظیماتی را اضافه کنیم که به ادمین اجازه می دهد یک فایل عکس را آپلود کند.این تنظیمات در “admin_setting_configstoredfile” است و ما با اضافه کردن این کد به فایل settings.php در theme خودمان این کار را نجام می دهیم.

settings.php

ما احتیاج داریم که فایل های زبان جدیدی را به فایل زبانمان اضافه کنیم.

“lang/en/theme_photo.php”

حالا ما تنظیما جدیدی داریم که اجازه آپلود فایل را به ما می دهند، اما هنوز هیچ کاری انجام نمی دهد. ما باید theme را برای تنظیم این تصویر پس زمینه در صفحه ورود به سیستم آپلود کنیم.
از طرفی برای تغییر SCSS برای theme مان، ما ۲ فایل اضافی SCSS اضافه می کنیم و آنها را قبل و بعد از scss اصلی مان اضافه می کنیم.
اکنون ما یک تابع در فایل lib.php داریم که scss اصلی را برای theme ما فچ می کند. این نقطه یک نقطه عالی برای اضافه کردن فایل های SCSS اضافی است. برای رسیدن به این هدف، می توانیم ۲ خط زیر را به انتهای این تابع اضافه کنیم.

lib.php

scss/pre.scss

scss/post.scss

Why do we use pre and post SCSS?
SCSS/SASS یک زبان قوی برای ایجاد کردن CSS است که متغیرها، تابع ها و حلقه ها را مشابه php پشتیبانی می کند.برای به دست آوردن اطلاعات بیشتر در در مورد SCSS این قسمت Sass on wikipedia را بخوانید.

Pre SCSS
در Boost ما متغیرهای زیادی در زمان ایجاد قوانین style استفاده می کنیم. هنگام اعلام یک متغیر در SCSS – بهتر است آن را تعریف کنید:

این به این معنی است – اگر این متغیر در حال حاضر تعریف نشده است – آن را به مقدار hex ‘# FF0’ تنظیم کنید؛
بنابراین با تنظیم این متغیر در برخی از PRE scss، ما می توانیم به طور پیش فرض مقدار این متغیر را هر جا که استفاده می شود حذف کنیم.Boost با فریم ورک bootstrap 4 CSS ساخته شده است. فریم ورکی است که از SCSS برای بهبود لایه های مفید استفاده می کند و مولفه ها بدون نیاز به اضافه کردن قوانین CSS ی خاص در هز صفحه قابل استفاده مجدد هستند.از آنجا که bootstrap به طور مداوم از متغیرها استفاده می کند، می توانیم بسیاری از مولفه ها را به راحتی با تنظیم مقدار متغیرها قبل از اضافه کردن فایل های SCSS Bootstrap به راحتی سفارشی کنیم.
تعدادی از متغیرها در theme/boost/scss/bootstrap/_variables.scss قابل دستیابی هستند- بعنوان مثال ما می توانیم ظاهر تمامی دکمه ها و فیلدهای ورودی را با اضافه کردن متغیر زیر تغییر دهیم.

Post SCSS
Post SCSS برای تعریف قوانین CSS کلی مفید است. به دلیل این که آنها قبلا وجود داشته اند، هر انتخاب قبلی با همان خصوصیت لغو می شود.

نکاتی برای سفارشی سازی Moodle با SCSS ( یا CSS)
یکی از موارد سودمند که شما بعنوان یک تازه کار در طراحی theme لازم است بدانید این است که Moodle تعدادی کلاس به هر صفحه ای که به شما کمک میکند تا به صفحه مورد نظزتان برسید، اضافه می کند و یا صفحاتی با تعدادی قوانین style تنظیم می کند.
اگر شما یک صفحه moodle را بررسی کرده و به تگ body نگاه کنید، لیستی طولانی از کلاسها را مشاهده خواهید کرد. برای مثال:

از این مثال شما می توانید متوجه شوید که هر صفحه یک id می گیرد. این یک نمایش ساده از صفحه فعلی در navigation است. در این مثال ما به صفحه course نگاه می کنیم و این course از قالب های هفته استفاده می کند.
کلاس های تگ body می توانند برای هدف قرار دادن یک صفحه یا مجموعه ای از صفحات مورد استفاده قرار بگیرند.

  • format-weeks : فرمت course
  • path-course path-course-view : بخش هایی از bread-crumb که به صفحه فعلی منجر می شود (صفحه فعلی چیزی است که در id می آید)
  • safari : تشخیص نوع مرورگر در سمت سرور – دقیق نیست، بنابراین ما به آن تکیه نمی کنیم.
  • dir-ltr : جهت زبان فعلی صفحه (dir-rtl برای زبان RTL – راست به چپ)
  • lang-en : زبان فعلی صفحه
  • yui* : کلاس های Legacy yui – بهتر است این ها را نادیده بگیرید.
  • damyon-per-in-moodle-com–stable_master : نام فعلی hostname سایت + نام سایت
  • pagelayout-course : نوع لایه برای صفحه فعلی
  • course-11 : شناسه (id) درس course فعلی
  • context-497 : شناسه (id) فعلی
  • ategory-1 : دسته بندی برای course فعلی
  • drawer-open-left : اضافه / حذف هنگامی که کشو navigation باز / بسته در Boost شده است.
  • jsenabled : اگر  مرورگر از javascript پشتیبانی می کند ، true است.

در مورد  Body id و کلاس ها بخوانید.

منبع : سایت رسمی مودل

 

دسته‌ها: Moodle

1 دیدگاه

صادق علیخانی · آگوست 2, 2020 در 9:45 ق.ظ

خیلی ممنون از آموزشتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *