有什么方法可以将JS / CSS添加到页脚页面?


Answers:


17

footer块不直接为js提供任何支持,例如head。

但是这里有一个名称块before_body_end,您可以在其中添加所需的模板或文本块。

我会考虑您自己的模板和块类型Mage_Page_Block_Html_Head,然后可以使用推荐的@Dexter。

不,您需要这样的东西,也没有page / html_head块可以引用:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

在模板内部,您需要:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

感谢您的回复@fabian blechschmidt。我添加了类似的内容,但是也没有运气和例外。<default> <引用名称=“ before_body_end”> <操作方法=“ addItem”> <类型>皮肤js </类型> <名称> js / test.js </名称> <参数/> </操作> </引用> </ default>
2014年

更新了答案,您需要阻止!
Fabian Blechschmidt

你是男人!Kudos..Thanks如果你给我解释一下一些有关的代码,以及为了更好地理解..一吨的answer..But我会很高兴
马克

添加了一些评论。如果您还有其他问题,请提问-具体问题:-)
Fabian Blechschmidt 2014年

1
块的正确名称是:<reference name =“ before_body_end”>而不是<reference name =“ before_body_ends”>
Tomas Dermisek

3

页眉和页脚部分是通过magento中的Page模块渲染的。为了查看页眉和页脚模板,请转到

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

还要查看页面文件夹中的其他文件。在那里,您可以看到header.phtml每个页面的哪个渲染标题部分。head.phtml用于添加适用于magento中每个页面的js和css文件。

另请参阅页面文件夹中的文件。这些文件将根据特定页面的布局规范为每个页面呈现。

对这个模块进行认真研究。它将对您有很大帮助。

编辑

您可以通过page.xml添加CSS和js。我认为它将解决您的问题。去

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

并在其代码段中添加此代码段defeault handle。(您可以看到在此句柄中添加了很多js和css文件。只需在这些代码下方添加此代码)

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

而已。现在确保您的自定义js和CSS文件在该位置

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

祝您工作顺利。


我不使用page.xml。在我的local.xml中,必须包含使用xml方法。您编辑过的帖子仅建议如何在xml文件中添加JS / CSS(这不是问题)。
2014年

@Mark:在您的qn中,没有提示要使用local.xml文件进行工作。您的qn要求您需要在页脚中添加js和CSS。我的更新将完美地完成这项工作。为什么需要为此使用local.xml文件?
Rajeev K Tomy 2014年

作为维护标准的Mage开发人员,为什么有人会使用page.xml?您的代码<action method="addItem"> <type>skin_js</type> <name>js/yourjsfile.js</name> </action>将在<head>中而不是在页脚中添加JS !!!
2014年

2

为此使用XML。要在页脚中添加Js,请调用页脚参考。该代码看起来像这样

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

要在皮肤文件夹中添加JS,可以使用以下代码

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

要添加CSS,您可以使用以下xml代码

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

或者你也可以使用

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>

无效的方法Mage_Page_Block_Html_Footer :: addJs
标记

@Mark:之所以这样,是因为Footer类没有名为“ addJs”的方法。欲了解更多信息,看看这个:magento.stackexchange.com/questions/15904/...
pablofiumara

2

对于javascript,您是否考虑过仅使用onload或jquery的$(document).ready()?

这将允许您像典型设置一样将代码放置在标头中,但是直到加载js所引用的内容后才能运行。

您的js filename.js代码如下所示:

$(document).ready( function(){
   your custom js here
});

用于布局的代码如下所示:(显然,在设置好目录之后,您需要添加适当的目录。)

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>
</reference>

1

是的,有一种方法,但是您必须通过下面的代码添加,如下所示,将此代码添加到1column.phtml文件底部,紧接在<body>标记结尾之前。

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>

不好的建议,因为您不想将代码复制到所有模板中。
Fabian Blechschmidt

我们无法通过xml在页脚中添加js,因此我使用此流程。
Keyul Shah 2014年

1
看我的答案。流程解决了问题,但是您必须在每个根模板中复制代码。
Fabian Blechschmidt

1

我强烈推荐mediarox pagespeed模块,以帮助您优化javascript(和css)并改善google pagespeed洞察力排名。

它的工作原理是解析Magento的html输出,然后对代码执行剪切和粘贴操作,以将javascript移至html代码的底部。该过程速度很快,但最好与整个页面缓存结合使用,以缓存html更改。

有关此模块如何工作的更多信息,并可以在此处帮助您提高页面速度排名:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.