2.1 Introduction
本章節(jié)會(huì)通過一個(gè)實(shí)例钢悲，一步步地為開發(fā)者介紹Shopware5的模板創(chuàng)建路翻。本章內(nèi)容適合初學(xué)者丰嘉，講述了Shopware模板的基本創(chuàng)建和樣式。它介紹了如何創(chuàng)建一個(gè)新主題枣申，如何使用Smarty模板為Shopware主題創(chuàng)建 / 添加元素售葡。
2.2 Preview of the guide / 預(yù)覽
改教程主要講述如何給網(wǎng)店添加新主題，如何為模板添加新元素忠藤，如何使用LESS編輯外觀挟伙。
Step 1：給網(wǎng)店添加新主題，并選擇它
Step 2：在網(wǎng)店的導(dǎo)航中添加一個(gè)按鈕并添加合適的外觀 ==> 使它能自適應(yīng)任何設(shè)備
Step 3：為"加入購(gòu)物車"按鈕修修改顏色模孩，做成漸變的樣式
2.3 Bare and responsive / Bare和responsive
用戶可以在根目錄下的themes文件夾中看到Bare和responsive這兩個(gè)默認(rèn)的Shopware5主題尖阔。
- Bare為Shopware網(wǎng)頁(yè)前端基礎(chǔ)。包含了網(wǎng)頁(yè)基本結(jié)構(gòu)榨咐。
- responsive包含了Shopware5默認(rèn)的響應(yīng)式主題介却，是以Bar為基礎(chǔ)的樣式主題。
注意：不要修改這兩個(gè)主題的代碼块茁，否則可能會(huì)影響到將來Shopware的升級(jí)
2.4 Custom themes / 自定義主題
2.4.1 Creating a theme with the Theme Manager / 使用主題管理器新建主題
通過Theme manager ==> Create theme可以新建主題齿坷，輸入主題名（比如
TutorialTheme）并且填寫必要信息。它會(huì)自動(dòng)在themes文件夾中創(chuàng)建該主題文件夾数焊，并添加所需要的文件結(jié)構(gòu)永淌。這樣，
themes文件夾中就有了一下三個(gè)主題：
- Bare
- Responsive
- TutorialTheme
2.4.2 Creating a theme with the Shopware CLI tools / 通過命令行新建主題
當(dāng)然佩耳，開發(fā)者也可用通過命令行用sw:theme:create語(yǔ)句新建主題：
sw:theme:create --description="Text" --author="shopware AG" --license="MIT" Responsive TutorialThemeDirectory TutorialTheme```
更多關(guān)于命令行的信息請(qǐng)點(diǎn)擊這里：[Shopware 5 CLI commands article](https://developers.shopware.com/developers-guide/shopware-5-cli-commands/).
##2.5 Selecting themes / 選擇主題
在你對(duì)自己的主題進(jìn)行人和編輯之前遂蛀，你需要先選擇該主題。
Refresh themes ==> 點(diǎn)擊TutorialTheme主題 ==> Select theme 完成主體的選擇
##2.6 Directory structure / 目錄結(jié)構(gòu)
Shopware的目錄結(jié)構(gòu)位于Bare/Frontend下干厚，這里的子目錄都以controller命名答恶，以不同的前段區(qū)域區(qū)分模板文件。
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 / 主題的繼承
當(dāng)開發(fā)者新建自定義主題時(shí)萍诱，可以選擇是否繼承已存在的主題悬嗓。在本例中，我們選擇繼承`Responsive`主題裕坊。換句話來說包竹，新建的主題是以`Responsive`為基礎(chǔ)，而`Responsive`繼承了`Bare`籍凝。
Bare => Responsive => TutorialTheme
>如果開發(fā)者想要主題擁有更多自己的特點(diǎn)周瞎，可以選擇直接繼承`Bare`。==> 自定義主題需要與`Bare`主題的文件結(jié)構(gòu)相同饵蒂。
舉例來說声诸，如果開發(fā)者要修改`header`，就要?jiǎng)?chuàng)建某個(gè)特定的文件路徑退盯，以重寫從Responsive繼承過來的`header`彼乌。`header`位于`Frontend/Index路徑`下的`shop-navigation.tpl`模板中（被`index.tpl`引用 / include）==> 文件路徑如下：
TutorialTheme
├── frontend
│ └── index
│ └── shop-navigation.tpl```
TutorialTheme的shop-navigation.tpl模板擴(kuò)展（extends）了Bare主題的shop-navigation.tpl泻肯。這里的擴(kuò)展功能用函數(shù)extends實(shí)現(xiàn)。該函數(shù)使我們?cè)诒Ａ?code>Bare主題中原有元素的基礎(chǔ)下慰照，可以自由地對(duì)它們進(jìn)行添加或重寫灶挟。extends函數(shù)中文件路徑為Bare主題的shop-navigation.tpl，如下：
{extends file="parent:frontend/index/shop-navigation.tpl"}```
如果我們選擇使用`extends`函數(shù)毒租，則父主題`shop-navigation.tpl`中的內(nèi)容會(huì)被忽視稚铣，只有`TutorialTheme`中的`shop-navigation.tpl`會(huì)被渲染（render）。
更多關(guān)于模板繼承的內(nèi)容請(qǐng)看 [第三章的3.3.2](http://www.reibang.com/p/465568e7a706)
##2.8 Template blocks / 模板代碼塊 blocks
`Bare`主題的HTML結(jié)構(gòu)都被包括在Smarty的`{Block}`中墅垮。這些 block 元素將前端組件（frontend components）分割成小且獨(dú)立的代碼塊惕医，方便進(jìn)行編輯 / 重寫。想要編輯`Bare`主題下的代碼算色，你**不能**簡(jiǎn)單的只寫代碼曹锨，你需要調(diào)用相對(duì)應(yīng)的 block 名。
比如剃允，開發(fā)者想要重寫繼承的block：
{block name='frontend_index_checkout_actions'}
// place your new element here
{/block}```
{$smarty.block.parent}變量包含了繼承block的內(nèi)容沛简。我們可以使用它來添加原 block 的初始內(nèi)容。
例一：在初試內(nèi)容之后 添加自定義代碼
{block name='frontend_index_checkout_actions'}
{$smarty.block.parent}
// place your new element here
{/block}
例二：在初試內(nèi)容之前 添加自定義代碼
{block name='frontend_index_checkout_actions'}
// place your new element here
{$smarty.block.parent}
{/block}
實(shí)例：為了在導(dǎo)航欄（navigation menu）中添加新按鈕斥废，我們需要找到對(duì)應(yīng)的block椒楣，并在其中插入新元素，從而實(shí)現(xiàn)新按鈕出現(xiàn)在原始內(nèi)容之前 / 之后牡肉。
{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}
注：導(dǎo)航目錄放在
<li>元素中
注：不 推薦使用block參數(shù)
append和prepend捧灰！{$smarty.block.parent}使模板或插件重寫同一個(gè)block而不出現(xiàn)bug
2.9 Add Less files /添加Less文件
我們可參照添加模板文件的方法添加less文件。文件路徑要與Responsive中的相同统锤。如下：
TutorialTheme
├── frontend
│ └── index
│ └── shop-navigation.tpl
│ └── _public
│ └── src
│ └── less
│ └── all.less```
為了添加Less文件毛俏， 首先需要?jiǎng)?chuàng)建一個(gè)`all.less`。該文件是必須的且極其重要的饲窿，它用于導(dǎo)入（import）用戶自定義的less文件煌寇。`all.less`中，用戶自定義的Less文件通過函數(shù)`@import`被導(dǎo)入逾雄。如果用戶需要大幅度地修改網(wǎng)頁(yè)樣式阀溶，我們更推薦直接從Responsive處復(fù)制less文件到`TutorialTheme`進(jìn)行改編，這樣結(jié)構(gòu)更加清晰鸦泳。但本例中银锻，我們只需要?jiǎng)?chuàng)建一個(gè)名為`navigation.less`的less文件：
//inside the all.less file
@import 'navigation';```
在navigation.less文件中，我們?yōu)?button 添加了樣式做鹰，并在 button 中間放了一個(gè)圖標(biāo)击纬。
在Less文件中，開發(fā)者可以使用Shopware提供的Less的mixins和variables（例如钾麸，unitze幫助完成px到相對(duì)單位rem的轉(zhuǎn)換）
.starButton i.icon--star {
.unitize(font-size, 18);
}
a.btn.starButton {
.unitize(padding-top, 5);
}```
此外更振，我們還需要修改button的代碼炕桨，使之適應(yīng)移動(dòng)設(shè)備。為了解決所有問題殃饿，必須減小搜索框的寬度谋作，并在移動(dòng)端時(shí)隱藏菜單文本芋肠，以避免出現(xiàn)元素的重疊乎芳。
為了隱藏菜單，我們?cè)赻shop-navigation.tpl`中調(diào)用`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}
為了調(diào)整搜索框的寬度睡汹，我們要用百分比重寫一些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%;
}
}
最后一步肴甸，修改購(gòu)物車按鈕的顏色。正如之前所說囚巴，我們可以在less中使用mixins和variables原在。為了創(chuàng)建默認(rèn)顏色的漸變，我們需要將`@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
