3. Smarty in Shopware / Shopware中Smarty的使用

文章来源

3.1 What is Smarty? / 什么是Smarty

Smarty 3 是一个Shopware前段的模板(template)工具。有了它,你不需要懂很多PHP的知识,只需要专注于HTML,CSS和JavaScript和一点点Smarty的知识就够了。

3.2 The basics / 基础知识

Smarty的语法和HTML,XML等标记语言很像。每个Smarty标签都以花括号 { 开始,以花括号 } 结束,就像HTML中的 <> 一样。包含Smarty的文件后缀名为 .tpl。 你可以把它当成一个包含了Smarty标签的HTML文档。
模板引擎(template engine)会渲染tpl文件并转换成有效的HTML文件形式。

举例:简单的Smarty标签
{s name="shopName"}DemoShop{/s}
{s}标签用于定义文本片段,并使他可翻译(make it translatable)。可以看到,Smarty标签都在花括号内,和HTML一样,它也可以有不同的属性比如这里的 name=""。

3.2.1 Variables
为了开始Smarty的学习,我们先尝试用Smarty输出从Shopware系统取得的信息。每个页面都由模板引擎进行渲染,并显示所需数据。所有数据都被存储在名为模板变量(template variables)。所有的变量都能通过Smarty的语法:美元符 $ + 变量名 调用到。

举例:变量输出
<h2>{$sArticle.name}</h2>
该例会输出变量.name的内容,输出样式为 h2。这里用到的分隔符 . 是用于访问其子值的(sub-values)。像本例中所看到的那样,变量可以不仅仅是简单的string或者number类型,它可以是一个数字集,即数组(array)。
上面的例子中,变量名为sArticle,该变量是个数组,包含了多个字段,而name是它字段中的一个。
模板变量可以被嵌套的更深,比如{$sArticle.image.thumbnails[0].source}。数组的所有字段可以通过 [] 语法访问到。

3.2.2 Modifiers
有时候我们不仅仅想要简单的输出变量内容,还想要在它被渲染之前对变量进行操作。这里我们就需要Smarty修饰符(Smarty modifiers)了。修饰符是一些用于修改变量输出的小函数。

举例:修饰符在变量上的应用
<div> {$sArticle.description|truncate:120} </div>
例子中,修饰符放在变量后面,通过简单的 | 符号 + 修饰符名字被使用。这里用到的truncate修饰符的作用是:将文本缩短到给定的字符数量,这里是120个字符,该参数通过:+ 数字使用。
你可以对一个变量同时使用多个修饰符,每个修饰符之间用 | 隔开即可。这些修饰符会按照书写顺序一个一个被用到。

举例:使用两个修饰符

比如,你想要在使用truncate方法指定字符串数之前,先把其中所包含的HTML标签去掉:
<div> {$sArticle.description|strip_tags|truncate:120} </div>

3.2.3 Conditions
有时候,你可能需要根据不同的条件输出不同的结果。这里条件语句用 {if} 标签,它包含了一条件判断,最后以 {/if} 结束。在这两个标签之间的内容只在条件判断为true时,才会被输出。

举例:定义一个条件
{if $sArticle.description} {$sArticle.description} {else} {$sArticle.description_long|strip_tags|truncate:120} {/if}
本例中,我们定义了一个简单的条件,来检测变量是否被定义。正如你所看到的,条件语句中包含了一个 {else} 标签,在条件不为真的情况下执行 {else} 标签之后的内容。更多的条件可以通过 {elseif} 来定义。如果想了解更多的操作符,请点击这里

3.2.4 Loops
为了能够处理更多数据,比如一个产品列表。我们可以通过循环(Loops)创造一个动态输出(dynamic output)。比如,我们可以通过迭代方法输出一个产品列表。

举例:数组循环

<ul> {foreach $sArticles as $item} <li>{$item.name}</li> {/foreach} </ul>

循环从 {foreach} 标签开始,到 {/foreach} 标签结束。在开始标签中,我们定义了一个想要迭代的数组($sArticles),以及在寻呼那种将要提供的单个数据集($item)。模板引擎会对 {foreach} {/foreach} 之间的每个item进行渲染,并且生成一个包含所有产品名的新列表。

**3.2.5 Official documentation / 官方文档
Smarty还有许多特性,但在这里不再赘述,如想要了解,请点击这里直接进入Smarty的官方文档。

3.3 Template inheritance / 模板继承

想要编辑Shopware中已存在的模板文档(template file),你不需要拷贝所有文件或重写核心代码。使用模板继承系统,你只需编辑真正想要更改的部分。 这有很多好处:
1. 不需要拷贝整个模板
2. 少些代码,少些维护
3. 你的模板一直可以升级(兼容性)
4. 你的模板仍然可以通过插件扩展

3.3.1 Inherit a standard theme / 继承默认主题
我们强烈推荐你在自定义主题时,使用模板继承系统。这样会为你省下很多时间和工作。Shopware提供了两个标准的主题供你选择。最常见的情况是使用Shopware Responsive主题。这是一个现代化,全响应式(fully responsiv)的主题,它实现了Shopware 5所有有趣强大的功能。你只需要做一些设计上的变更,而不需要重建shop的整个功能。如果你想要了解更多,并且从头开始构建自己的功能,你可以继承Shopware的Bare主题,该主题只继承了一些基础的HTML功能。

举例:在Theme.php中定义一个父主题
class Theme extends \Shopware\Components\Theme { protected $extend = 'Responsive'; // ... }

3.3.2 Inheritance and plugin templates / 模板继承和插件
在Shopware中安装的插件会被放在集成系统的特定位置中。
所有插件模板都放在核心主题模板(the templates of the core themes)后面。你可以通过设置Theme.php文档中的$injectBeforePlugins 变量来决定,你的主题是要在插件之前处理还是之后处理。
如果你想要创建一个可以在Shopware社区中被购买的普通主题,那么该变量值应为true,这样你的主题就会在插件之前被处理。-->这种方法保证了你可以在你的主题中使用所有插件。
如果你想在本地修改某个特定的插件,那么就把该变量设置为false,以扩展插件模板。
class Theme extends \Shopware\Components\Theme { protected $extend = 'Responsive'; protected $name = 'CustomTheme'; protected $injectBeforePlugins = true; // ... }

Position of plugins.png

3.3.3 Overwriting template files / 重写模板文件
Shopware对所有前端文件都使用固定的文件路径结构,前端的每一个部分都有自己的路径和自己的模板文件。每个文件路径中你都可以找到index.tpl文件,它包括了该文件路径中的基础部分。
当你定义父主题时,你可以在自己的主题路径中创建一个同名的文件, 用于重写并覆盖已存在的模板文件(template files)。
比如,如果你想要完全重写 "产品细节" 页面,你可以在自定义的主题中,找到相对应的路径,比如 "产品细节" 页面对应的是 frontend/detail/index.tpl。
Shopware会移动检测到你创造的文件,并且将他们加入到模板继承系统中(template inheritance system)

3.3.4 Extending template files / 扩展模板
大多数情况下,你并不想要重写整个模板文件,只是想要编辑或修改其中的字部分。因此你需要用到Smarty的拓展方法 {extends}。该方法要写在文件的第一行,file属性的内容为你想要继承的文档路径。

举例:拓展一个模板文件
{extends file="parent:frontend/detail/index.tpl"}
{extends}file="" 属性中,你定义的文档路径中,将默认主题文件夹(theme file)为根文件夹。
前缀parent:告诉Shopware在父主题中搜索文件。这样就能拓展父主题中的模板了。
被拓展的文件不能有自己的HTML结构,因为你必须自己告诉引擎,你的模板代码要放在哪里。相反,你将获得父文件定义的所有内容块。

注意:{extends}语句必须写在.tpl文档的第一行

3.3.5 Blocks / 代码块
Smarty代码块(blocks)被用来在逻辑段中构造模块代码(template code)。这些代码块可以被其他文件在特定的位置进行拓展。通过 {block} 标签我们可以在Smarty中创建代码块,该标签将代码内容作为一个新的段落(segment)封装起来。每个block都有 name="" 属性,给这段代码定义一个独一无二的名字。通过这个名字,我们能从其他文件中访问到这段代码。

举例:A.tpl中定义一个代码块

{block name="frontend_index_logo"}
    <div class="logo--shop"> 
        //...
    </div>
{/block}

当你通过 {extends} 方法继承A.tpl这个模板文件时,就获得了访问该模板文件中所有blocks的能力,你可以这样访问这些blocks:

{* 使用方法一 *}
{block name="frontend_index_logo"}
    {$smarty.block.parent}
    <div class="shop--slogan"> 
        <h2>My shop is the best!</h2>
    </div>
{/block}

{* 使用方法二 *}
{block name="frontend_index_logo" append}
    <div class="shop--slogan"> 
        <h2>My shop is the best!</h2>
    </div>
{/block}

使用方法一:

  1. 保留父代码块(parent block)的内容 ==> {$smarty.block.parent}
  2. frontend_index_logo这个Block中,加上了自己的代码 ==> <div class="shop--slogan"> ... </div>

使用方法二:
append这个修饰符在原Block之后添加<div class="shop--slogan"> ... </div>
其他修饰符还有:

  • append:在parent template {block}之后添加内容
  • prepend:在parent template {block}之前添加内容
  • hide:如果该Block没有子Block,则该Block将被忽视
  • nocache:该Block禁用缓存

总结一下,如果你需要编辑或者修改继承的模块,需要这样操作:

  1. 在模板文件中找到你想要修改的block
  2. 在你自己的theme下,按照同样的路径创建同名的模板文件
  3. 在2中创建的模板文件中添加 {extend} 标签,并且在file属性中写上1中找到的文件路径
  4. 在3中新建的模板文件中定义block。你可以通过将 {$smarty.block.parent} 写在自定义内容的前面/后面,来决定自定义内容和原block内容的先后顺序。

3.4 Register custom smarty plugins / 注册自定义Smarty插件

Shopware 5中,我们添加了在自定义theme中使用自定义插件的功能。用户能够创建新的修饰符和Smarty功能。要注册一个新的插件,你需要在你的主题中创建相关的文件路径结构。详细教程请点击这里

举例:自定义Smarty插件的路径
/_private/smarty/function.markdown.php /_private/smarty/modifier.picture.php

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  • 2.1 Introduction 本章节会通过一个实例,一步步地为开发者介绍Shopware5的模板创建。本章内容...
    _chuuuing_阅读 534评论 0 0
  • 介绍 Jinja是基于python的模板引擎,功能比较类似于于PHP的smarty,J2ee的Freemarker...
    ZhouLang阅读 7,807评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,056评论 25 707
  • /1/ 当你阅读时感受到痛苦,那都是真实的,当你阅读时感受到了美,那也都是真实的。 ...
    左耶阅读 1,100评论 2 7