Познакомимся с несколькими функциями, призванными облегчить подключение внешних и внутренних 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 — только первые два.
Функция loadCSSFile
поддерживает параметры. Самые популярные:
external
Значение по умолчанию: false
Установите значение true
, если хотите загрузить внешний файл стилей:
loadCSSFile('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/fontawesome.min.css', ['external' => true]);
order_pos
Значение по умолчанию: 3000
Определяет порядок загрузки файла стилей (до или после базового index.css
, у которого order_pos
равен 1):
loadCSSFile('style.css', ['order_pos' => 5000]);
attributes
Значение по умолчанию: []
Возможность указать атрибуты HTML-тега link
в виде массива:
loadCSSFile('style.css', ['attributes' => ['id' => 'some_id']]);
Об остальных параметрах можно узнать из комментариев к функции в файле Load.php.
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.