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 之前,层次结构是静态的,就像那样
- /skin/frontend/{MY_PACKAGE}/{MY_THEME}/
- /skin/frontend/{MY_PACKAGE}/默认/
- /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
删除所有缓存然后刷新
我正在使用 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 之前,层次结构是静态的,就像那样
- /skin/frontend/{MY_PACKAGE}/{MY_THEME}/
- /skin/frontend/{MY_PACKAGE}/默认/
- /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
删除所有缓存然后刷新