Как изменить порядок таблиц стилей и JS в Magento и добавить несколько файлов CSS/JS
После использования local.xml чтобы добавить таблицы стилей и js следующим образом:
<?xml version="1.0"?>
<layout>
<default>
<reference name="head">
<block type="core/text" name="google.cdn.jquery">
<action method="setText">
<text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
</text>
</action>
<action method="setText">
<text><![CDATA[<link rel="stylesheet" href="//css.cdn.tl/normalize.css">]]>
</text>
</action>
<action method="setText">
<text><![CDATA[<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">]]>
</text>
</action>
</block>
<action method="addItem">
<type>skin_css</type>
<name>css/bootstrap.css</name>
</action>
<action method="addItem">
<type>skin_css</type>
<name>css/layout.css</name>
</action>
<action method="addItem">
<type>skin_js</type>
<name>js/script.js</name>
</action>
</reference>
</default>
</layout>
Я нахожу несколько проблем.
В "Блочной" части кода используется только последнее действие. Почему это происходит?
В источнике страницы мои стили по умолчанию.css вставлены перед моими другими файлами css. Я надеялся, что style.css будет последним css-файлом на моей странице. Как устранить эту проблему?
Мой jQuery загружается после мой дефолт script.js . Как можно изменить порядок?
3 answers
Я постараюсь ответить на все ваши 3 вопроса.
1. В "Блочной" части кода используется только последнее действие. Почему это происходит?
Я не думаю, что используется только последнее действие. Их всех призывают. Рассматривайте это как $a = 1; $a = 2; $a = 3;. $a будет 3 после этих 3 команд. Вы должны добавить отдельный блок для каждого файла CSS и вызвать setText() на нем, чтобы это сработало (вы уже сделали это в своем собственном ответе).
2. В источнике страницы мой по умолчанию styles.css вставляется перед моими другими файлами css. Я надеялся, что styles.css будет последним css-файлом на моей странице. Как устранить эту проблему?
Я знаю, что на этот вопрос уже давали ответ раньше, но решение может быть даже проще. Вы можете удалить свой styles.css, а затем добавить его снова в свой local.xml . Обязательно сделайте это после добавления всех других файлов css:
<?xml version="1.0"?>
<layout>
<default>
<reference name="head">
<!-- ... add your other css files ... -->
<action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
</reference>
</default>
</layout>
3. Мой jQuery загружен после моего значения по умолчанию script.js . Как можно изменить порядок?
Я подумайте о jQuery (от googleapis.com) вообще не загружается в ваш текущий код:) Но если вы хотите переместить jQuery наверх, вы должны убедиться, что он находится в верхней части вашего local.xml .
Попробуйте удалить значение по умолчанию styles.css с помощью этого:
<action method="removeItem">
<type>skin_css</type>
<name>css/styles.css</name>
</action>
Затем переименуйте свой styles.css в styles2.css и добавьте его в свой local.xml снова вот так:
<action method="addItem">
<type>skin_css</type>
<name>css/styles2.css</name>
</action>
Должно сработать.
Вот что я сделал, чтобы заставить его работать. Позже, для производства, я объединю все CSS-файлы в styles.css.
Теперь файлы вызываются в правильном порядке. Единственным недостатком является то, что styles.css указан дважды.
Этот файл является local.xml: app/design/frontend/yourpackage/default/layout/local.xml
<?xml version="1.0"?>
<layout>
<default>
<reference name="head">
<block type="core/text" name="google.cdn.jquery">
<action method="setText">
<text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
</text>
</action>
</block>
<block type="core/text" name="normalize.cdn.css">
<action method="setText">
<text><![CDATA[<link rel="stylesheet" href="http://css.cdn.tl/normalize.css">]]>
</text>
</action>
</block>
<block type="core/text" name="bootstrap.cdn.css">
<action method="setText">
<text><![CDATA[<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">]]>
</text>
</action>
</block>
<block type="core/text" name="bootstrap.custom.css">
<action method="setText">
<text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/bootstrap.css">]]>
</text>
</action>
</block>
<block type="core/text" name="layout.custom.css">
<action method="setText">
<text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/layout.css">]]>
</text>
</action>
</block>
<block type="core/text" name="css.custom.css">
<action method="setText">
<text><![CDATA[<link rel="stylesheet" href="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/css/styles.css">]]>
</text>
</action>
</block>
<block type="core/text" name="javascript.custom.js">
<action method="setText">
<text><![CDATA[<link rel="stylesheet" src="http://kokorugs.com/online-carpet-store/skin/frontend/kokorugs/default/js/script.js">]]>
</text>
</action>
</block>
</reference>
</default>
</layout>
Надеюсь, это кому-то поможет!