Самый правильный вариант - добавить соответствующий PHP-код. А можно запихивать фрагменты в HTML-модуль, а модуль прикрепить к нескольким пунктам меню (материалам). Но последний вармант - это нарушение стандартов W3C. Я попробовал нарушать, ...получилось, но не захотелось. Здесь ссылки на несколько модулей
Custom css, Custom HTML module, Flexi Custom Code, EasyScript. Пока я выбрал и успешно юзаю Sourcerer, он позволяет вставлять все... и везде, здесь php вставки для подгрузки скриптов и стилей в head страницы.
FAQ Sourcerer place any code in Joomla!
Sourcerer
Coding & Scripts Integration
Custom HTML module allows you to insert HTML on a specific page, the Custom CSS module allows you override styles for a specific page. - Попробовал, отлично вставляет тег
Flexi Custom CodeHow to Install and Use this module? please watch this video Тоже установил в "kali trado", но он обновлялся в агусте 2014...
Flexi Custom Code, The Chosen Extensions for all Joomla Websites With this module, you can add all kinds of codes using php, html, css and javascript on every position possible easily and fast. It is all included either the simplest code and function or even the most complicated and tough, for example, various affiliated code, adsense code, embed code and other copy-paste codes.
EasyScript CSS links, Javascript URLs are properly placed. JQuery/JQuery UI/JQuery Mobile may be accessed, as can the SWF-Object for Flash projects. - Тоже установил в "kali trado", но документирован он плохо...
Custom css¶
Как оказалось, этот модульт просто вставляет тег стиля на страницу, поэтому пришлось создать еще и (штатный) модуль custom html и поместить его рядом, это был пустой тег
%%html
<div id="mydiv"> </div>
После загрузки страницы у него появился анимированный фон (картинка), а в этом посте вставка фона произошла после выполения кода из следующей ячейки %%html А чуть ниже то, что отражается в окне Firefox
#mydiv {
max-width: 800px;
height: 200px;
border: 1px solid #000;
background-size: 100% auto;
background-repeat: no-repeat;
background-image: url('http://127.0.0.1/jm_34_trado/images/headers/104443728_ULTIME_Tentation.jpg');
background-position: left top;
animation: 5s ease 0s normal none infinite mymove;
}
Итак, "Custom css" вставляет тег style type="text/css" прямо в код модуля, что, конечно, мне не понравилось, но поначалу я был рад и этому... Ниже копипаст результатов такой вставки с пробного сайта. Чтобы код не пропадал, я его запустил на этой странице. После этого выше нарисовался баннер "бык с теткой"
%%html
<div class="moduletable">
<h3>Custom CSS</h3>
<style type="text/css">
/* Custom CSS */
#mydiv {
max-width: 800px;
height: 200px;
border: 1px solid black;
background-size: 100% ;
background-repeat: no-repeat;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnLRi2fuClHsvLrbxRSg0qBDlPhurMXSt_-2qHwzCs8-b0XvkjJppceWXWF69ZSSnCeK40C3a71BZXLV1zHAKDYvY3mcTsjP5eaxzA2zlPteAGpBDTIlOBvt2g3O8ilXdjvDi27W9Gjzo/s1280/criterias_w1_t.PNG');
background-position: top left;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {background-position: center;}
26% {background-size: 40px 225px;}
//85% {background-position: right bottom, left top;}
//60% {background-position: left bottom;}
//90% {background-position: bottom right;}
//100% {background-position: bottom left;}
}
/* Standard syntax */
@keyframes mymove {
0% {background-position: center;}
26% {background-size: 20%;}
/*/85% {background-position: right bottom, left top;}
//60% {background-position: left bottom;}
//90% {background-position: bottom right;}
//100% {background-position: bottom left;} */
}
</style> </div>
Заголовок выше к делу не относится, это заголовок модуля на пробном сайте..., он "пропечатался после запуска кода "
Sourcerer¶
Попробовал плагин я вот с этим кодом, для статей все работало срааазу, а для модулей потребовались дополнителные настройки (см. далее по тексту)
{source}
<?php
$css = "
body {
color: red;
}
";
$doc->addStyleDeclaration( $css );
?>{/source}
Далее я попробовал повторить сомнительные подвиги по вставке style type="text/css" в код модуля, все получмилось
{source}
<div id="mydiv"> </div>
<p>Установим плагин Sourcerer </p>
<p>Создадим штатный модуль "Custom html", обязательно на вкладке "Основные параметры"
разрешим "Обрабатывать плагинами"</p>
<p>Если мы создаем не модуль, а "article", то все и так работает.</p>
<style type="text/css">
/* Custom CSS */
#mydiv {
max-width: 800px;
height: 200px;
border: 1px solid black;
background-size: 100% ;
background-repeat: no-repeat;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnLRi2fuClHsvLrbxRSg0qBDlPhurMXSt_-2qHwzCs8-b0XvkjJppceWXWF69ZSSnCeK40C3a71BZXLV1zHAKDYvY3mcTsjP5eaxzA2zlPteAGpBDTIlOBvt2g3O8ilXdjvDi27W9Gjzo/s1280/criterias_w1_t.PNG');
background-position: top left;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {background-position: center;}
26% {background-size: 40px 225px;}
//85% {background-position: right bottom, left top;}
//60% {background-position: left bottom;}
//90% {background-position: bottom right;}
//100% {background-position: bottom left;}
}
/* Standard syntax */
@keyframes mymove {
0% {background-position: center;}
26% {background-size: 20%;}
/*/85% {background-position: right bottom, left top;}
//60% {background-position: left bottom;}
//90% {background-position: bottom right;}
//100% {background-position: bottom left;} */
}
</style>
{/source}
Теперь попробуем вставлять кастомные фрагменты css javascript куда положено - в head, документации (FAQ) есть отличный пример:
{source}<?php
$css = "
body {
color: red;
}
";
$doc->addStyleDeclaration( $css );
$doc->addStyleSheet( JURI::root( true ).'/path/to/your/file.css' );
$doc->addStyleSheet( JURI::root( true ).'/path/to/your/file2.css' );
$script = "
alert('this is javasript');
";
$doc->addScriptDeclaration( $script );
$doc->addScript( JURI::root( true ).'/path/to/your/file.js' );
$doc->addScript( JURI::root( true ).'/path/to/your/file2.js' );
?>{/source}
Как быть с этими относительными и базовыми URL. Ответ находим вот в этих фрагментах index.php Помнится, я эти стпрочки добавлял совсем недавно.
//***********************************************************
// Custom js of SE for production (uncomment for production)
//$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/se_product.js');
// Add Stylesheets
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
// Custom Stylesheet of SE
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/custom.css');
{source}<?php
$css = "
body {
color: red;
}
";
$doc->addStyleDeclaration( $css );
$script = "
alert('this is javasript');
";
$doc->addScriptDeclaration( $script );
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/se_product.js');
?>{/source}
Особенности команды
{source}<?php
$css = "
body {
color: red;
}
";
$doc->addStyleDeclaration( $css );
$script = "
alert('this is javasript');
";
$doc->addScriptDeclaration( $script );
$doc->addScript( JURI::root( true ).'/js/se_product.js');
?>{/source}
$doc->addScript( JURI::root( true ).'templates/protostar_se_1.0/js/se_product.js' );
Дополнение. Прямая ссылка на статью в Joomla (все время забываю... direct link Joomla article)¶
index.php?option=com_content&view=article&id=58
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий