控制 Magento layout.xml 中块的顺序 - 添加 skinjs 后出现 jQuery CDN

Question

在我的 Magento 主题中通过 local.xml 在适当的位置渲染 jQuery 时遇到了一些问题。

目前，我的 layout.xml 中有问题的部分如下所示：

<!-- load jQuery from CDN with local fallback, latest version 1.11.0 -->
<block type="core/text" name="google.cdn.jquery">
    <action method="setText">
        <text><![CDATA[<script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script>window.jQuery||document.write('<script src="js/jquery-1.11.0.min.js">\x3c/script>');</script><script>jQuery.noConflict();</script>]]></text>
    </action>
</block>

<!-- add global JS functions library -->
<action method="addItem"><type>skin_js</type><name>min/global-min.js</name></action>

但是这里的 global-min.js 文件是在 before jQuery 渲染的，它（连同其他添加的核心/文本类型块）位于我的其余皮肤 JS 文件之后。

有没有办法根据我网站头部的输出优先级将 CDN 加载的 jQuery 文件上移？

非常感谢您的帮助。

Answer 1

尝试在您的xml 文件中使用以下代码

<layout>
    <default>
        <!--Root/Default Layouts-->
        <!--CSS and JS Files-->
        <reference name="head">
            <!--Add CSS and JS, skin Folder-->
         <!-- add global JS functions library -->
        <action method="addItem"><type>skin_js</type><name>min/global-min.js</name></action>
            <!-- Link to external JavaScript file (e.g Jquery CDN)  -->
            <block type="core/text" name="google.cdn.jquery">
                <action method="setText">
                    <text><![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>]]></text>
                </action>
            </block>
        </reference>
</default>
</layout>

您可以将jQuery 源代码替换为您需要的版本。

由于local.xml是最后被magento加载的，所以这里提到的xml最后被合并了。这可能是您的加载顺序未按您希望的那样工作的原因。

或者，您可以覆盖 Mage_Page_Block_Html_Head::getCssJsHtml() 方法并使用它。

另外，你可以试试params元素，里面有name属性，Magento会按升序排序：

<action method="addJs"><!-- this will be shown second -->
    <script>prototype/javascript1.js</script>
    <params><![CDATA[name="js002_second"]]></params>
</action>
<action method="addJs"><!-- this will be shown first -->
    <script>prototype/javascript2.js</script>
    <params><![CDATA[name="js001_first"]]></params>
</action>

Mage_Page_Block_Html_Head $_data; 保存项目数组，因此我可以过滤它，但默认方法不允许定义添加项目的顺序。

同样，如果您正在使用core/text 块，您可以使用before/after 来定义您的加载顺序。例如：

    <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>

希望对你有帮助。