2.1 Introduction
本章节会通过一个实例，一步步地为开发者介绍Shopware5的模板创建。本章内容适合初学者，讲述了Shopware模板的基本创建和样式。它介绍了如何创建一个新主题，如何使用Smarty模板为Shopware主题创建 / 添加元素。
2.2 Preview of the guide / 预览
改教程主要讲述如何给网店添加新主题，如何为模板添加新元素，如何使用LESS编辑外观。
Step 1：给网店添加新主题，并选择它
Step 2：在网店的导航中添加一个按钮并添加合适的外观 ==> 使它能自适应任何设备
Step 3：为"加入购物车"按钮修修改颜色，做成渐变的样式
2.3 Bare and responsive / Bare和responsive
用户可以在根目录下的themes文件夹中看到Bare和responsive这两个默认的Shopware5主题。
- Bare为Shopware网页前端基础。包含了网页基本结构。
- responsive包含了Shopware5默认的响应式主题，是以Bar为基础的样式主题。
注意：不要修改这两个主题的代码，否则可能会影响到将来Shopware的升级
2.4 Custom themes / 自定义主题
2.4.1 Creating a theme with the Theme Manager / 使用主题管理器新建主题
通过Theme manager ==> Create theme可以新建主题，输入主题名（比如
TutorialTheme）并且填写必要信息。它会自动在themes文件夹中创建该主题文件夹，并添加所需要的文件结构。这样，
themes文件夹中就有了一下三个主题：
- Bare
- Responsive
- TutorialTheme
2.4.2 Creating a theme with the Shopware CLI tools / 通过命令行新建主题
当然，开发者也可用通过命令行用sw:theme:create语句新建主题：
sw:theme:create --description="Text" --author="shopware AG" --license="MIT" Responsive TutorialThemeDirectory TutorialTheme```
更多关于命令行的信息请点击这里：[Shopware 5 CLI commands article](https://developers.shopware.com/developers-guide/shopware-5-cli-commands/).
##2.5 Selecting themes / 选择主题
在你对自己的主题进行人和编辑之前，你需要先选择该主题。
Refresh themes ==> 点击TutorialTheme主题 ==> Select theme 完成主体的选择
##2.6 Directory structure / 目录结构
Shopware的目录结构位于Bare/Frontend下，这里的子目录都以controller命名，以不同的前段区域区分模板文件。
frontend
├── _includes
├── account
├── blog
│ └── comment
├── campaign
├── checkout
│ └── items
├── compare
├── custom
├── detail
│ ├── comment
│ └── tabs
├── error
├── forms
├── home
├── index
├── listing
│ ├── actions
│ ├── filter
│ └── product-box
├── newsletter
├── note
├── paypal
├── plugins
│ ├── compare
│ ├── index
│ ├── notification
│ ├── payment
│ └── seo
├── register
├── robots_txt
├── search
├── sitemap
├── sitemap_xml
└── tellafriend
##2.7 Template inheritance / 主题的继承
当开发者新建自定义主题时，可以选择是否继承已存在的主题。在本例中，我们选择继承`Responsive`主题。换句话来说，新建的主题是以`Responsive`为基础，而`Responsive`继承了`Bare`。
Bare => Responsive => TutorialTheme
>如果开发者想要主题拥有更多自己的特点，可以选择直接继承`Bare`。==> 自定义主题需要与`Bare`主题的文件结构相同。
举例来说，如果开发者要修改`header`，就要创建某个特定的文件路径，以重写从Responsive继承过来的`header`。`header`位于`Frontend/Index路径`下的`shop-navigation.tpl`模板中（被`index.tpl`引用 / include）==> 文件路径如下：
TutorialTheme
├── frontend
│ └── index
│ └── shop-navigation.tpl```
TutorialTheme的shop-navigation.tpl模板扩展（extends）了Bare主题的shop-navigation.tpl。这里的扩展功能用函数extends实现。该函数使我们在保留Bare主题中原有元素的基础下，可以自由地对它们进行添加或重写。extends函数中文件路径为Bare主题的shop-navigation.tpl，如下：
{extends file="parent:frontend/index/shop-navigation.tpl"}```
如果我们选择使用`extends`函数，则父主题`shop-navigation.tpl`中的内容会被忽视，只有`TutorialTheme`中的`shop-navigation.tpl`会被渲染（render）。
更多关于模板继承的内容请看 [第三章的3.3.2](http://www.jianshu.com/p/465568e7a706)
##2.8 Template blocks / 模板代码块 blocks
`Bare`主题的HTML结构都被包括在Smarty的`{Block}`中。这些 block 元素将前端组件（frontend components）分割成小且独立的代码块，方便进行编辑 / 重写。想要编辑`Bare`主题下的代码，你**不能**简单的只写代码，你需要调用相对应的 block 名。
比如，开发者想要重写继承的block：
{block name='frontend_index_checkout_actions'}
// place your new element here
{/block}```
{$smarty.block.parent}变量包含了继承block的内容。我们可以使用它来添加原 block 的初始内容。
例一：在初试内容之后 添加自定义代码
{block name='frontend_index_checkout_actions'}
{$smarty.block.parent}
// place your new element here
{/block}
例二：在初试内容之前 添加自定义代码
{block name='frontend_index_checkout_actions'}
// place your new element here
{$smarty.block.parent}
{/block}
实例：为了在导航栏（navigation menu）中添加新按钮，我们需要找到对应的block，并在其中插入新元素，从而实现新按钮出现在原始内容之前 / 之后。
{extends file="parent:frontend/index/shop-navigation.tpl"}
{block name='frontend_index_checkout_actions'}
<li class="navigation--entry">
<a href="" class="btn starButton"> {* Add an URL to the href attribute to make your link work *}
<i class="icon--star"></i>
</a>
</li>
{$smarty.block.parent}
{/block}
注：导航目录放在
<li>元素中
注：不 推荐使用block参数
append和prepend！{$smarty.block.parent}使模板或插件重写同一个block而不出现bug
2.9 Add Less files /添加Less文件
我们可参照添加模板文件的方法添加less文件。文件路径要与Responsive中的相同。如下：
TutorialTheme
├── frontend
│ └── index
│ └── shop-navigation.tpl
│ └── _public
│ └── src
│ └── less
│ └── all.less```
为了添加Less文件， 首先需要创建一个`all.less`。该文件是必须的且极其重要的，它用于导入（import）用户自定义的less文件。`all.less`中，用户自定义的Less文件通过函数`@import`被导入。如果用户需要大幅度地修改网页样式，我们更推荐直接从Responsive处复制less文件到`TutorialTheme`进行改编，这样结构更加清晰。但本例中，我们只需要创建一个名为`navigation.less`的less文件：
//inside the all.less file
@import 'navigation';```
在navigation.less文件中，我们为 button 添加了样式，并在 button 中间放了一个图标。
在Less文件中，开发者可以使用Shopware提供的Less的mixins和variables（例如，unitze帮助完成px到相对单位rem的转换）
.starButton i.icon--star {
.unitize(font-size, 18);
}
a.btn.starButton {
.unitize(padding-top, 5);
}```
此外，我们还需要修改button的代码，使之适应移动设备。为了解决所有问题，必须减小搜索框的宽度，并在移动端时隐藏菜单文本，以避免出现元素的重叠。
为了隐藏菜单，我们在`shop-navigation.tpl`中调用`offcanvas_left_trigger`代码块，并***完全重写*** 它（不加append或prepend），新的block中没有任何文字。
{block name='frontend_index_offcanvas_left_trigger'}
<li class="navigation--entry entry--menu-left" role="menuitem">
<a class="entry--link entry--trigger btn is--icon-left" href="#offcanvas--left" data-offcanvas="true" data-offCanvasSelector=".sidebar-main">
<i class="icon--menu"></i>
</a>
</li>
{/block}
为了调整搜索框的宽度，我们要用百分比重写一些media query：
.starButton i.icon--star {
.unitize(font-size, 18);
}
a.btn.starButton {
.unitize(padding-top, 5);
}
@media screen and (min-width: 30em) {
.entry--search {
width: 30%;
}
}
最后一步，修改购物车按钮的颜色。正如之前所说，我们可以在less中使用mixins和variables。为了创建默认颜色的渐变，我们需要将`@brand-primary`， `@brand-primary-light`和`.linear-gradient` Less mixin一起使用
.starButton i.icon--star {
.unitize(font-size, 18);
}
a.btn.starButton {
.unitize(padding-top, 5);
}
@media screen and (min-width: 30em) {
.entry--search {
width: 30%;
}
}
@media screen and (min-width: 64em) {
.navigation--list .entry--cart .cart--link .cart--amount {
color: #fff;
}
}
a.btn.is--icon-left.cart--link {
.linear-gradient(@brand-primary-light, @brand-primary);
border-color: @brand-primary;
color: #fff;
}
##2.10 Result
网友评论