ساخت theme براساس boost در moodle

مقالات مرتبط

افزودن حضور و غیاب به ماژول AdobeConnect

مارس 7, 2021

مشکل ماژول AdobeConnect در نسخه های جدید مودل

جولای 21, 2020

وب سرویس Mobile

ژوئن 18, 2018

در این آموزش سعی داریم چگونگی ایجاد یک تم جدید در  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/photo/

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

/theme/photo/version.php

<?php

// Every file should have GPL and copyright in the header – we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.

defined(‘MOODLE_INTERNAL’) || die();

// This is the version of the plugin.

$plugin->version = ‘2016102100’;

// This is the version of Moodle this plugin requires.

$plugin->requires = ‘2016070700’;

// This is the component name of the plugin – it always starts with ‘theme_’

// for themes and should be the same as the name of the folder.

$plugin->component = ‘theme_photo’;

// This is a list of plugins, this plugin depends on (and their versions).

$plugin->dependencies = [

‘theme_boost’ => ‘2016102100’

];

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

<?php

// Every file should have GPL and copyright in the header – we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.

defined(‘MOODLE_INTERNAL’) || die();

// A description shown in the admin theme selector.

$string[‘choosereadme’] = ‘Theme photo is a child theme of Boost. It adds the ability to upload background photos.’;

// The name of our plugin.

$string[‘pluginname’] = ‘Photo’;

// We need to include a lang string for each block region.

$string[‘region-side-pre’] = ‘Right’;

فایل های ویژه 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

<?php

// Every file should have GPL and copyright in the header – we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.

defined(‘MOODLE_INTERNAL’) || die();

// We will add callbacks here as we add features to our theme.

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

config.php

<?php

// Every file should have GPL and copyright in the header – we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.

defined(‘MOODLE_INTERNAL’) || die();

// $THEME is defined before this page is included and we can define settings by adding properties to this global object.

// The first setting we need is the name of the theme. This should be the last part of the component name, and the same

// as the directory name for our theme.

$THEME->name = ‘photo’;

// This setting list the style sheets we want to include in our theme. Because we want to use SCSS instead of CSS – we won’t

// list any style sheets. If we did we would list the name of a file in the /style/ folder for our theme without any css file

// extensions.

$THEME->sheets = [];

// This is a setting that can be used to provide some styling to the content in the TinyMCE text editor. This is no longer the

// default text editor and “Atto” does not need this setting so we won’t provide anything. If we did it would work the same

// as the previous setting – listing a file in the /styles/ folder.

$THEME->editor_sheets = [];

// This is a critical setting. We want to inherit from theme_boost because it provides a great starting point for SCSS bootstrap4

// themes. We could add more than one parent here to inherit from multiple parents, and if we did they would be processed in

// order of importance (later themes overriding earlier ones). Things we will inherit from the parent theme include

// styles and mustache templates and some (not all) settings.

$THEME->parents = [‘boost’];

// A dock is a way to take blocks out of the page and put them in a persistent floating area on the side of the page. Boost

// does not support a dock so we won’t either – but look at bootstrapbase for an example of a theme with a dock.

$THEME->enable_dock = false;

// This is an old setting used to load specific CSS for some YUI JS. We don’t need it in Boost based themes because Boost

// provides default styling for the YUI modules that we use. It is not recommended to use this setting anymore.

$THEME->yuicssmodules = array();

// Most themes will use this rendererfactory as this is the one that allows the theme to override any other renderer.

$THEME->rendererfactory = ‘theme_overridden_renderer_factory’;

// This is a list of blocks that are required to exist on all pages for this theme to function correctly. For example

// bootstrap base requires the settings and navigation blocks because otherwise there would be no way to navigate to all the

// pages in Moodle. Boost does not require these blocks because it provides other ways to navigate built into the theme.

$THEME->requiredblocks = ”;

// This is a feature that tells the blocks library not to use the “Add a block” block. We don’t want this in boost based themes because

// it forces a block region into the page when editing is enabled and it takes up too much room.

$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;

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->scss = function($theme) {

return theme_boost_get_main_scss_content($theme);

};

theme_boost/lib.php

function theme_boost_get_main_scss_content($theme) {

global $CFG;

$scss = ”;

$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;

$fs = get_file_storage();

$context = context_system::instance();

if ($filename == ‘default.scss’) {

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/default.scss’);

} else if ($filename == ‘plain.scss’) {

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/plain.scss’);

} else if ($filename && ($presetfile = $fs->get_file($context->id, ‘theme_boost’, ‘preset’, 0, ‘/’, $filename))) {

$scss .= $presetfile->get_content();

} else {

// Safety fallback – maybe new installs etc.

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/default.scss’);

}

return $scss;

}

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

این تنظیماتت به طور خودکار برای theme فرزند کار نمی کند زیرا ما هیچ تنظیماتی با نام “preset” در theme فرزند نداریم و این کد در theme پدر جستجویی را برای این تنظیمات انجام نمی دهد. اگر بخواهیم که این تنظیمات را در theme فرزند اعمال کنیم باید طبق فایل پایین این کار را انجام دهیم:

config.php

// This setting defines the main scss file for our theme to be compiled. We could set it to a static file in the scss folder or to a function which returns the SCSS based on theme settings.

$THEME->scss = function($theme) {

// We need to load the config for our parent theme because that is where the preset setting is defined.

$parentconfig = theme_config::load(‘boost’);

// Call a function from our parent themes lib.php file to fetch the content of the themes main SCSS file based on it’s own config, not ours.

return theme_boost_get_main_scss_content($parentconfig);

};

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

theme_boost/config.php

$THEME->prescsscallback = ‘theme_boost_get_pre_scss’;

theme_boost/lib.php

function theme_boost_get_pre_scss($theme) {

global $CFG;

$scss = ”;

$configurable = [

// Config key => [variableName, …].

‘brandcolor’ => [‘brand-primary’],

];

// Prepend variables first.

foreach ($configurable as $configkey => $targets) {

$value = isset($theme->settings->{$configkey}) ? $theme->settings->{$configkey} : null;

if (empty($value)) {

continue;

}

array_map(function($target) use (&$scss, $value) {

$scss .= ‘

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

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

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

config.php

// This is a function that returns some SCSS as a string to prepend to the main SCSS file.

$THEME->prescsscallback = ‘theme_photo_get_pre_scss’;

lib.php

// Function to return the SCSS to prepend to our main SCSS for this theme.

// Note the function name starts with the component name because this is a global function and we don’t want namespace clashes.

function theme_photo_get_pre_scss($theme) {

// Load the settings from the parent.

$theme = theme_config::load(‘boost’);

// Call the parent themes get_pre_scss function.

return theme_boost_get_pre_scss($theme);

}

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

theme_boost/config.php

$THEME->extrascsscallback = ‘theme_boost_get_extra_scss’;

theme_boost/lib.php

function theme_boost_get_extra_scss($theme) {

return !empty($theme->settings->scss) ? $theme->settings->scss : ”;

}

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

config.php

// This is a function that returns some SCSS as a string to prepend to the main SCSS file.

$THEME->extrascsscallback = ‘theme_photo_get_extra_scss’;

lib.php

// Function to return the SCSS to append to our main SCSS for this theme.

// Note the function name starts with the component name because this is a global function and we don’t want namespace clashes.

function theme_photo_get_extra_scss($theme) {

// Load the settings from the parent.

$theme = theme_config::load(‘boost’);

// Call the parent themes get_extra_scss function.

return theme_boost_get_extra_scss($theme);

}

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

settings.php

<?php

// Every file should have GPL and copyright in the header – we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.

defined(‘MOODLE_INTERNAL’) || die();

// This is used for performance, we don’t need to know about these settings on every page in Moodle, only when

// we are looking at the admin settings pages.

if ($ADMIN->fulltree) {

// Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.

$settings = new theme_boost_admin_settingspage_tabs(‘themesettingphoto’, get_string(‘configtitle’, ‘theme_photo’));

// Each page is a tab – the first is the “General” tab.

$page = new admin_settingpage(‘theme_photo_general’, get_string(‘generalsettings’, ‘theme_photo’));

// Replicate the preset setting from boost.

$name = ‘theme_photo/preset’;

$title = get_string(‘preset’, ‘theme_photo’);

$description = get_string(‘preset_desc’, ‘theme_photo’);

$default = ‘default.scss’;

// We list files in our own file area to add to the drop down. We will provide our own function to

// load all the presets from the correct paths.

$context = context_system::instance();

$fs = get_file_storage();

$files = $fs->get_area_files($context->id, ‘theme_photo’, ‘preset’, 0, ‘itemid, filepath, filename’, false);

$choices = [];

foreach ($files as $file) {

$choices[$file->get_filename()] = $file->get_filename();

}

// These are the built in presets from Boost.

$choices[‘default.scss’] = ‘default.scss’;

$choices[‘plain.scss’] = ‘plain.scss’;

$setting = new admin_setting_configselect($name, $title, $description, $default, $choices);

$setting->set_updatedcallback(‘theme_reset_all_caches’);

$page->add($setting);

// Preset files setting.

$name = ‘theme_photo/presetfiles’;

$title = get_string(‘presetfiles’,’theme_photo’);

$description = get_string(‘presetfiles_desc’, ‘theme_photo’);

$setting = new admin_setting_configstoredfile($name, $title, $description, ‘preset’, 0,

array(‘maxfiles’ => 20, ‘accepted_types’ => array(‘.scss’)));

$page->add($setting);

// Variable $brand-color.

// We use an empty default value because the default colour should come from the preset.

$name = ‘theme_photo/brandcolor’;

$title = get_string(‘brandcolor’, ‘theme_photo’);

$description = get_string(‘brandcolor_desc’, ‘theme_photo’);

$setting = new admin_setting_configcolourpicker($name, $title, $description, ”);

$setting->set_updatedcallback(‘theme_reset_all_caches’);

$page->add($setting);

// Must add the page after definiting all the settings!

$settings->add($page);

// Advanced settings.

$page = new admin_settingpage(‘theme_photo_advanced’, get_string(‘advancedsettings’, ‘theme_photo’));

// Raw SCSS to include before the content.

$setting = new admin_setting_configtextarea(‘theme_photo/scsspre’,

get_string(‘rawscsspre’, ‘theme_photo’), get_string(‘rawscsspre_desc’, ‘theme_photo’), ”, PARAM_RAW);

$setting->set_updatedcallback(‘theme_reset_all_caches’);

$page->add($setting);

// Raw SCSS to include after the content.

$setting = new admin_setting_configtextarea(‘theme_photo/scss’, get_string(‘rawscss’, ‘theme_photo’),

get_string(‘rawscss_desc’, ‘theme_photo’), ”, PARAM_RAW);

$setting->set_updatedcallback(‘theme_reset_all_caches’);

$page->add($setting);

$settings->add($page);

}

lang/en/theme_photo.php

<?php

// Every file should have GPL and copyright in the header – we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.

defined(‘MOODLE_INTERNAL’) || die();

// The name of the second tab in the theme settings.

$string[‘advancedsettings’] = ‘Advanced settings’;

// The brand colour setting.

$string[‘brandcolor’] = ‘Brand colour’;

// The brand colour setting description.

$string[‘brandcolor_desc’] = ‘The accent colour.’;

// A description shown in the admin theme selector.

$string[‘choosereadme’] = ‘Theme photo is a child theme of Boost. It adds the ability to upload background photos.’;

// Name of the settings pages.

$string[‘configtitle’] = ‘Photo settings’;

// Name of the first settings tab.

$string[‘generalsettings’] = ‘General settings’;

// The name of our plugin.

$string[‘pluginname’] = ‘Photo’;

// Preset files setting.

$string[‘presetfiles’] = ‘Additional theme preset files’;

// Preset files help text.

$string[‘presetfiles_desc’] = ‘Preset files can be used to dramatically alter the appearance of the theme. See <a href=https://docs.moodle.org/dev/Boost_Presets>Boost presets</a> for information on creating and sharing your own preset files, and see the <a href=http://moodle.net/boost>Presets repository</a> for presets that others have shared.’;

// Preset setting.

$string[‘preset’] = ‘Theme preset’;

// Preset help text.

$string[‘preset_desc’] = ‘Pick a preset to broadly change the look of the theme.’;

// Raw SCSS setting.

$string[‘rawscss’] = ‘Raw SCSS’;

// Raw SCSS setting help text.

$string[‘rawscss_desc’] = ‘Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet.’;

// Raw initial SCSS setting.

$string[‘rawscsspre’] = ‘Raw initial SCSS’;

// Raw initial SCSS setting help text.

$string[‘rawscsspre_desc’] = ‘In this field you can provide initialising SCSS code, it will be injected before everything else. Most of the time you will use this setting to define variables.’;

// We need to include a lang string for each block region.

$string[‘region-side-pre’] = ‘Right’;

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

config.php

// This is the function that returns the SCSS source for the main file in our theme. We override the boost version because

// we want to allow presets uploaded to our own theme file area to be selected in the preset list.

$THEME->scss = function($theme) {

return theme_photo_get_main_scss_content($theme);

};

lib.php

function theme_photo_get_main_scss_content($theme) {

global $CFG;

$scss = ”;

$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;

$fs = get_file_storage();

$context = context_system::instance();

if ($filename == ‘default.scss’) {

// We still load the default preset files directly from the boost theme. No sense in duplicating them.

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/default.scss’);

} else if ($filename == ‘plain.scss’) {

// We still load the default preset files directly from the boost theme. No sense in duplicating them.

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/plain.scss’);

} else if ($filename && ($presetfile = $fs->get_file($context->id, ‘theme_photo’, ‘preset’, 0, ‘/’, $filename))) {

// This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).

$scss .= $presetfile->get_content();

} else {

// Safety fallback – maybe new installs etc.

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/default.scss’);

}

return $scss;

}

توقف کن و امتحان کن
حالا چه چیزی کار می کند و چه چیزی کار نمی کند. خوب – همه چیز باید کار کند و شما باید یک 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

// Login page background setting.

// We use variables for readability.

$name = ‘theme_photo/loginbackgroundimage’;

$title = get_string(‘loginbackgroundimage’, ‘theme_photo’);

$description = get_string(‘loginbackgroundimage_desc’, ‘theme_photo’);

// This creates the new setting.

$setting = new admin_setting_configstoredfile($name, $title, $description, ‘loginbackgroundimage’);

// This means that theme caches will automatically be cleared when this setting is changed.

$setting->set_updatedcallback(‘theme_reset_all_caches’);

// We always have to add the setting to a page for it to have any effect.

$page->add($setting);

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

“lang/en/theme_photo.php”

// Background image for login page.

$string[‘loginbackgroundimage’] = ‘Login page background image’;

// Background image for login page.

$string[‘loginbackgroundimage_desc’] = ‘An image that will be stretched to fill the background of the login page.’;

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

lib.php

function theme_photo_get_main_scss_content($theme) {

global $CFG;

$scss = ”;

$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;

$fs = get_file_storage();

$context = context_system::instance();

if ($filename == ‘default.scss’) {

// We still load the default preset files directly from the boost theme. No sense in duplicating them.

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/default.scss’);

} else if ($filename == ‘plain.scss’) {

// We still load the default preset files directly from the boost theme. No sense in duplicating them.

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/plain.scss’);

} else if ($filename && ($presetfile = $fs->get_file($context->id, ‘theme_photo’, ‘preset’, 0, ‘/’, $filename))) {

// This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).

$scss .= $presetfile->get_content();

} else {

// Safety fallback – maybe new installs etc.

$scss .= file_get_contents($CFG->dirroot . ‘/theme/boost/scss/preset/default.scss’);

}

// Pre CSS – this is loaded AFTER any prescss from the setting but before the main scss.

$pre = file_get_contents($CFG->dirroot . ‘/theme/photo/scss/pre.scss’);

// Post CSS – this is loaded AFTER the main scss but before the extra scss from the setting.

$post = file_get_contents($CFG->dirroot . ‘/theme/photo/scss/post.scss’);

// Combine them together.

return $pre . “\n” . $scss . “\n” . $post;

}

scss/pre.scss

// Pre SCSS for the theme.

scss/post.scss

// Post SCSS for the theme.

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

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

$mycoolcolour: #FF0 !default;

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

$border-radius: 8px;

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

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

<body id=”page-course-view-weeks” class=”format-weeks path-course path-course-view safari dir-ltr lang-en yui-skin-sam yui3-skin-sam damyon-per-in-moodle-com–stable_master pagelayout-course course-11 context-497 category-1 drawer-open-left jsenabled”>

از این مثال شما می توانید متوجه شوید که هر صفحه یک 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 و کلاس ها بخوانید.

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

. $target . ‘: ‘ . $value . “;\n”; }, (array) $targets); } // Prepend pre-scss. if (!empty($theme->settings->scsspre)) { $scss .= $theme->settings->scsspre; } return $scss; }

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

• 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 و کلاس ها بخوانید.

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