2. Getting started with Shopware templating / Shopware模板入門(mén)

2.1 Introduction

本章節(jié)會(huì)通過(guò)一個(gè)實(shí)例，一步步地為開(kāi)發(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)物車(chē)"按鈕修修改顏色，做成漸變的樣式

2.3 Bare and responsive / Bare和responsive

用戶(hù)可以在根目錄下的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ì)影響到將來(lái)Shopware的升級(jí)

2.4 Custom themes / 自定義主題

2.4.1 Creating a theme with the Theme Manager / 使用主題管理器新建主題


通過(guò)Theme manager ==> Create theme可以新建主題，輸入主題名（比如TutorialTheme）并且填寫(xiě)必要信息。它會(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 / 通過(guò)命令行新建主題
當(dāng)然，開(kāi)發(fā)者也可用通過(guò)命令行用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 / 選擇主題
![](http://upload-images.jianshu.io/upload_images/2662224-12ece68a33767eae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在你對(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)開(kāi)發(fā)者新建自定義主題時(shí)，可以選擇是否繼承已存在的主題。在本例中，我們選擇繼承`Responsive`主題。換句話(huà)來(lái)說(shuō)，新建的主題是以`Responsive`為基礎(chǔ)，而`Responsive`繼承了`Bare`。

Bare => Responsive => TutorialTheme

>如果開(kāi)發(fā)者想要主題擁有更多自己的特點(diǎn)，可以選擇直接繼承`Bare`。==> 自定義主題需要與`Bare`主題的文件結(jié)構(gòu)相同。

舉例來(lái)說(shuō)，如果開(kāi)發(fā)者要修改`header`，就要?jiǎng)?chuàng)建某個(gè)特定的文件路徑，以重寫(xiě)從Responsive繼承過(guò)來(lái)的`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)行添加或重寫(xiě)。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.itdecent.cn/p/465568e7a706)

##2.8 Template blocks / 模板代碼塊 blocks
`Bare`主題的HTML結(jié)構(gòu)都被包括在Smarty的`{Block}`中。這些 block 元素將前端組件（frontend components）分割成小且獨(dú)立的代碼塊，方便進(jìn)行編輯 / 重寫(xiě)。想要編輯`Bare`主題下的代碼，你**不能**簡(jiǎn)單的只寫(xiě)代碼，你需要調(diào)用相對(duì)應(yīng)的 block 名。
比如，開(kāi)發(fā)者想要重寫(xiě)繼承的block：

{block name='frontend_index_checkout_actions'}
// place your new element here
{/block}```
{$smarty.block.parent}變量包含了繼承block的內(nèi)容。我們可以使用它來(lá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}使模板或插件重寫(xiě)同一個(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）用戶(hù)自定義的less文件。`all.less`中，用戶(hù)自定義的Less文件通過(guò)函數(shù)`@import`被導(dǎo)入。如果用戶(hù)需要大幅度地修改網(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文件中，開(kāi)發(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è)備。為了解決所有問(wèn)題，必須減小搜索框的寬度，并在移動(dòng)端時(shí)隱藏菜單文本，以避免出現(xiàn)元素的重疊。
為了隱藏菜單，我們?cè)赻shop-navigation.tpl`中調(diào)用`offcanvas_left_trigger`代碼塊，并***完全重寫(xiě)*** 它（不加append或prepend），新的block中沒(méi)有任何文字。

{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)整搜索框的寬度，我們要用百分比重寫(xiě)一些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)物車(chē)按鈕的顏色。正如之前所說(shuō)，我們可以在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
![](http://upload-images.jianshu.io/upload_images/2662224-8a7aa83358459d97.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容