page.xml addCss 未反映在站点中

page.xml addCss not reflecting in site

我正在使用 Magento 1.9,并尝试制作一个 Magento 主题。

这是我的app/design/frontend/{MY_PACKAGE}/default/template/layout/page.xml:

<?xml version="1.0"?>
<layout version="1.0">
    <default>
        <label>All Pages</label>
        <reference name="head">
            <action method="addCss"><stylesheet>css/base.css</stylesheet></action>
        </reference>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">

        </block>
    </default>
</layout>

这是app/design/frontend/{MY_PACKAGE}/default/template/page/1column.phtml:

<!DOCTYPE html>
<html>
<head>
<?php echo $this->getChildHtml('head'); ?>
</head>
<body>
<?php echo $this->getChildHtml('header'); ?>
<div class="middle">
    <div class="col-main"><?php echo $this->getChildHtml('content'); ?></div>
</div>
<?php echo $this->getChildHtml('footer'); ?>
<?php echo $this->getChildHtml('before_body_end'); ?>
</body>
</html>

我无法将 base.css 附加到页面;它没有出现在源代码中。我错过了什么?

p.s。我已经禁用 缓存管理中的缓存;也没有应用设计更改。


UPDATE 页面的 <head> 呈现为:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home page</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="NOINDEX,NOFOLLOW" />
<link rel="icon" href="http://www.example.com/dev/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.example.com/dev/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = 'http://www.example.com/dev/js/blank.html';
    var BLANK_IMG = 'http://www.example.com/dev/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://www.example.com/dev/skin/frontend/base/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.example.com/dev/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.example.com/dev/skin/frontend/base/default/css/print.css" media="print" />
<script type="text/javascript" src="http://www.example.com/dev/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/varien/js.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/varien/form.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/varien/menu.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/mage/translate.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/js/mage/cookies.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://www.example.com/dev/skin/frontend/base/default/css/styles-ie.css" media="all" />
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.example.com/dev/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://www.example.com/dev/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->

<script type="text/javascript">
//<![CDATA[
Mage.Cookies.path     = '/dev';
Mage.Cookies.domain   = '.www.example.com';
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
optionalZipCountries = ["HK","IE","MO","PA"];
//]]>
</script>
<script type="text/javascript">//<![CDATA[
        var Translator = new Translate([]);
        //]]></script></head>

您必须添加类型,还要检查您的 css 是否在正确的路径中

page.xml

的例子
<default translate="label" module="page">
    <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs"><script>lib/ccard.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>scriptaculous/builder.js</script></action>
            <action method="addJs"><script>scriptaculous/effects.js</script></action>
            <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
            <action method="addJs"><script>scriptaculous/controls.js</script></action>
            <action method="addJs"><script>scriptaculous/slider.js</script></action>
            <action method="addJs"><script>varien/js.js</script></action>
            <action method="addJs"><script>varien/form.js</script></action>
            <action method="addJs"><script>mage/translate.js</script></action>
            <action method="addJs"><script>mage/cookies.js</script></action>
            <action method="addJs"><script>prototype/window.js</script></action>
            <action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>


            <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

            <!-- Remove items which the RWD package is not dependent upon -->
            <action method="removeItem"><type>skin_js</type><name>js/ie6.js</name></action>

            <!-- Add vendor dependencies -->
            <action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
            <action method="addLinkRel"><rel>stylesheet</rel><href>//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600</href></action>
            <action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>

我没有看到他们将布局放在模板文件夹中的什么地方,但主要是,这些信息在您的 1.9 版本中已经过时。我可以推荐你阅读你能找到的版本 here.

但对于您的具体问题,布局必须在

app/design/frontend/{MY_PACKAGE}/default/template/layout/

但您还必须了解 Magento 的回退机制(进一步阅读 here),它基本上声明了设计层次结构。 这样,如果 Magento 在所选设计中找不到文件,它将在下一个分层设计中查找它。

从 1.9 开始,层次结构发生了变化。

所以在 1.9 之前,层次结构是静态的,就像那样

  1. /skin/frontend/{MY_PACKAGE}/{MY_THEME}/
  2. /skin/frontend/{MY_PACKAGE}/默认/
  3. /skin/frontend/基础/默认/

从 1.9 开始,回退是动态的,可以在每个主题中配置。 例如,如果我们在 app/design/frontend/default/iphone 中使用 Magento 附带的主题,您会发现这个文件:etc/theme.xml 代表

<theme>
    <parent>default/default</parent>
</theme>

因此,如果 Magento 在 iphone 主题中找不到文件,它将在 default[=55] 中查看它=] 主题都在 default 包下。由于包 default 和主题 default 中的文件 etc/theme.xml 没有父项 (<parent/>),回退将到此为止,但如果此主题添加定义了父项,则可以更进一步。

这也是我要求提供您网站的呈现 <head> 的原因,因为如果 base.css 放错了位置,您会找到对 base.css 的调用,但在位置错误(例如调用 http://www.example.com/skin/frontend/base/default/css/base.css

所以,现在您知道了,您必须知道布局 xml page.xml 负责所有页面的整个结构。 因此,如果您这样保留 xml,您将覆盖 Magento 的 page.xml。

如您所愿,我建议您使用 app/design/frontend/{MY_PACKAGE}/default/template/layout/ 下的文件 local.xml,其代码与您在 [=66 中输入的代码完全相同=] 并删除 page.xml。这样它应该可以工作。

只需在 1column.phtml 中添加以下代码即可。

app/design/frontend/{MY_PACKAGE}/default/template/page/1column.phtml:

<link rel="stylesheet" type="text/css" href="<php echo $this->getSkinUrl('css/base.css');?>" media="all" />

并将上传 base.css 添加到:

/skin/frontend/MY_PACKAGE /default/css

删除所有缓存然后刷新