我是 Magento 的新手。我使用 HTML 和 CSS 设计了一个主题。我想在 magento 中添加我的自定义 header 。需要遵循什么程序？
谁能告诉我在 magento 中集成页眉/页脚和主要内容的分步过程？
正在寻找富有成果的回复
谢谢
小蜜蜂
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>TeeKeyBee | Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/custom.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="row">
<header class="header-container">
<img src="img/logo.png"/>
<div class="row top-links">
<div class="span8"></div>
<div class="span2 borderr">Register | Login</div>
<div class="span2">Cart 0 € 0.00</div>
</div>
<div class="row top-menu">
<div class="span2"><img src="img/side_logo.png"/></div>
<div class="span10">Home | About Us | Services | Gallery | Contact Us</div>
</div>
</header>
</div>
</div><!-- End Container -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS 代码:
.header-container {
width: 100%;
height: auto;
min-height: 50px;
background: #000;
}
.top-links {
width: 100%;
height: 40px;
background: #f8f8f8;
margin: 0 auto;
}
.top-menu {
width: 100%;
height: 40px;
background: #b6b6b6;
margin: 0 auto;
}
.borderr {
box-sizing: border-box;
border-right: 1px solid #c9c9c9;
}
最佳答案
您似乎想创建一个 Boostraped Magento 主题？为了节省您自己的大量工作，您应该只覆盖页眉和页脚模板。由于我不知道你做了什么，这里是从头开始的步骤:
- 创建模板和皮肤文件夹:由于您使用的是 CE，所以您希望将它们放在: app/design/frontend/default/your_theme 和 skin/frontend/default/your_theme
- 更改管理员中的设置以指向您的新主题:这是在系统 > 配置 > 常规 > 设计 > 主题中在管理员中完成的。将这些值更改为“your_theme”
通过布局 xml 将 css 文件添加到主题:在 app/design/frontend/default/your_theme/layout/local.xml
<?xml version="1.0"?> <layout version="0.1.0"> <default> <reference name="head"> <action method="addItem"> <type>skin_js</type> <script>js/jquery.js</script> </action> <action method="addItem"> <type>skin_js</type> <script>js/bootstrap.min.js</script> </action> <action method="addItem"> <type>skin_css</type> <name>css/bootstrap.css</name> </action> <action method="addItem"> <type>skin_css</type> <name>css/custom.css</name> </action> </reference> </default> </layout>css 文件放在 skin/frontend/default/your_theme/css/
js 文件放在 skin/frontend/default/your_theme/js/
覆盖 header.phtml:将 app/design/frontend/default/default/template/page/html/header.phtml 复制到 app/design/frontend/default/your_theme/template/page/html/。您会注意到此模板与您拥有的 header 完全不同。同样，通过使用现有的东西并对其进行操作，您将节省大量工作。
可以对其他模板进行大量操作来完成您的要求。但这至少会让你开始。
关于html - Magento 的自定义 header ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22074933/