Magento将CSS和JS添加到页脚

我正在对Magento网站进行Yslow优化，并尝试将CS​​S和Js添加到网站的页脚中。

目前，我正在布局XML中使用头参考标记，并使用addJs和addCss动作来包含我的所有文件。我尝试将页眉引用替换为页脚，但是在尝试查看站点时出现错误。有没有办法做到这一点，local.xml 或者必须将其硬编码到页脚模板文件本身中？

我知道这不是您问题的答案，而是您可能仍要考虑的问题。

Magento使用了很多内联JavaScript，尤其是在产品详细信息页面上。由于该javascript取决于标头中加载的外部脚本，因此您还需要将所有内联脚本也移至外部文件，并将其添加到页脚中。

通过使用Magento内置的工具压缩CSS和JS，并使用gzip压缩和远期标头来加速它们，可能会更快更好。这样，由javascript和CSS引起的“延迟”将保持在最低水平，而无需更改默认的Magento和3rd party扩展布局。这样，当您升级Magento或扩展程序时，无需重做所有工作。

HTML5样板项目提供的.htaccess提供了gzip压缩和远期标头，请检查http://inchoo.net/ecommerce/magento/magento-boilerplate/

第一步是创建一个名为“ foot”的块，该块与“ head”基本相同，但是您将在另一个位置输出它。您可以将其添加到您的page.xml：

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

现在，您可以在任何XML文件中使用以下命令添加JS / CSS（尽管不建议在页脚中添加CSS）：

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

内部page/html/foot.phtml：

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

在页面模板文件（例如page/1column.phtml）中，您需要在结束body标签之前输出以下代码块：

    <?php echo $this->getChildHtml('foot') ?>

如果您使用默认的Magento模板，则会出现JS错误。以迷你搜索表单为例（catalogsearch/form.mini.phtml）。它具有以下内联脚本：

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

它将在加载后立即调用，因为它不在任何文档就绪处理程序中。Varien尚不存在，因为它位于页脚中，因此会出现错误。您可以通过添加文档就绪处理程序或将具有这种性质的所有内联JS移动到也加载在页脚中的外部文件中来解决此问题。这样的问题将在整个站点中发生，尤其是在结帐和可配置的产品页面中。

您可能遇到的另一个问题是，如果您在noConflict模式下将jQuery与Prototype一起使用。您需要确保在Prototype之前加载jQuery，以免发生冲突。

对于Magento v1.6 +（需要在较早版本中进行测试）；

1- page/html/footer/extras.phtml使用以下内容创建模板文件：

<?php echo $this->getCssJsHtml() ?>

2-将此html节点添加到布局xml：

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3-就是这样！