Jump to main content Jump to doc navigation

Учимся регистрировать CSS и JS

Итак, у вас есть сниппет, который вы пишете, и вы хотите добавить CSS и/или JavaScript на свои страницы, но вам не нужно настраивать пользовательскую переменную шаблона и редактировать ее на каждом ресурсе, который используется в вашем сниппете. Ты хочешь, чтобы Сниппет сделал это! На самом деле это довольно просто, используя некоторые методы MODX API.

Другие CMS Это общая потребность в любой CMS, поэтому, если вы переходите с другой платформы, вот некоторые из связанных функций, например WordPress использует функции:

  • wp_enqueue_script,
  • wp_register_script,
  • wp_enqueue_style,
  • wp_register_style.

Добавление к HEAD

Существует несколько методов, которые автоматически добавляют CSS и/или JavaScript в HEAD текущей страницы. Они будут работать в том порядке, в котором они были добавлены, поэтому, если они вам нужны в определенном порядке, убедитесь, что вы выполняете методы также в этом порядке.

regClientCSS

Эта функция позволяет зарегистрировать любой файл CSS в HEAD содержимого, указав URL-адрес в методе:

$modx->regClientCSS('assets/css/my-custom.css');

Или, более правильно, вы бы использовали константу MODX_ASSETS_URL, чтобы ваш сниппет или плагин работал даже на сайте, который был настроен для использования нестандартного расположения ресурсов.

$modx->regClientCSS(MODX_ASSETS_URL.'css/my-custom.css');

regClientStartupScript

Эта функция позволяет зарегистрировать любой произвольный JavaScript-код для HEAD документа:

$modx->regClientStartupScript('assets/js/site.js');
$modx->regClientStartupScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"');
$modx->regClientStartupScript('http://code.jquery.com/jquery-latest.min.js');

regClientStartupHTMLBlock

Эта функция полезна, если вам нужно установить некоторые переменные JS или вывести HTML в HEAD:

$modx->regClientStartupHTMLBlock('
<meta tag="here" />
<script type="text/javascript">
var myCustomJSVar = 123;
</script>');

Добавление до конца BODY

Существуют также методы, которые можно использовать для вставки Javascript или HTML в конце каждой страницы, прямо перед закрытием тега BODY. Они часто полезны для пользовательских сценариев аналитики или JS, которые необходимо запускать на уровне тела, а не в HEAD.

regClientScript

Similar to regClientStartupScript за исключением того, что он работает перед закрывающим тегом BODY:

$modx->regClientScript('assets/js/footer.js');
$modx->regClientScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"');
$modx->regClientScript('http://code.jquery.com/jquery-latest.min.js');

regClientHTMLBlock

Similar to regClientStartupHTMLBlock за исключением того, что он работает перед закрывающим тегом BODY:

$modx->regClientHTMLBlock('
<div>custom stuff here</div>
<script type="text/javascript">
runAnalytics();
</script>');

Вывод

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

Смотрите также

  1. Создание шаблонов сниппетов
  2. Добавление CSS и JS на ваши страницы через сниппеты
  3. Как написать хороший Сниппет
  4. Как написать хороший чанк

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • STERC
  • Jens Wittmann – Gestaltung & Entwicklung
  • Fabian Christen
  • Digital Penguin
  • Dannevang Digital
  • Sepia River Studios
  • CrewMark
  • Chris Fickling
  • deJaya
  • Following Sea
  • Anton Tarasov
  • eydolan
  • Raffy
  • Lefthandmedia
  • Murray Wood
  • Snow Creative
  • Nick Clark
  • Helen
  • JT Skaggs
  • krisznet
  • YJ
  • Yanni
  • Richard

Budget

$366 per month—let's make that $500!

Learn more