Функции для подключения стилей и скриптов в SMF

6 марта 2019 г. (обновлено 18 марта 2021 г.)

Познакомимся с несколькими функциями, призванными облегчить подключение внешних и внутренних CSS/JS файлов на вашем форуме.

loadCSSFile

Варианты подключения файла /Themes/default/css/style.css:

// 1
loadTemplate(false, 'style');

// 2
$context['html_headers'] .= '<link rel="stylesheet" type="text/css" href="' . $settings['default_theme_url'] . '/css/style.css" />';

// 3
loadCSSFile('style.css');

SMF 2.1 поддерживает все три варианта, SMF 2.0 — только первые два.

addInlineCss

Варианты добавления небольшого набора CSS-стилей:

// 1
$context['html_headers'] .= '
<style type="text/css">
    .my_rule {
        display: none;
    }
</style>';

// 2
addInlineCss('
.my_rule {
    display: none;
}');

SMF 2.1 поддерживает оба варианта, SMF 2.0 — только первый.

loadJavaScriptFile

Варианты подключения файла /Themes/default/scripts/myscript.js:

// 1, подключение скрипта в шапке страницы
$context['html_headers'] .= '<script src="' . $settings['default_theme_url'] . '/scripts/myscript.js" type="text/javascript"></script>';

// 2, подключение скрипта в подвале страницы
$context['insert_after_template'] .= '<script src="' . $settings['default_theme_url'] . '/scripts/myscript.js" type="text/javascript"></script>';

// 3, подключение скрипта в шапке страницы
loadJavaScriptFile('myscript.js', array('minimize' => true));

SMF 2.1 поддерживает все три варианта, SMF 2.0 — только первые два.

addInlineJavaScript

Варианты добавления небольшого набора JS-скриптов:

// 1
$context['insert_after_template'] .= '
<script type="text/javascript">
    alert("Hello world!");
</script>';

// 2
addInlineJavaScript('
alert("Hello world!");', true);

SMF 2.1 поддерживает оба варианта, SMF 2.0 — только первый.Если при вызове функции addInlineJavaScript не указывать второй параметр или указать false вместо true, скрипт будет добавлен в верхней части страницы (внутри тегов <head></head>).

В SMF 2.1 по умолчанию используется HTML5, поэтому указывать тип (type) в тегах style и script не обязательно:

$context['html_headers'] .= '
<style>
    .my_rule {
        display: none;
    }
</style>';

$context['insert_after_template'] .= '
<script>
    alert("Hello world!");
</script>';

addJavaScriptVar

Эта функция добавляет нужную вам JS-переменную в шапку страницы, внутри тегов <script></script>:

addJavaScriptVar('имя переменной', 'значение переменной', true);

Третий параметр — необязательный, если он установлен в true, то значение переменной экранируется с помощью функции JavaScriptEscape.