Przejdź do głównej zawartości

Podstawy Smarty

2.5.x: Smarty 3 4.0.x: Smarty 4

Smarty to silnik szablonów dla PHP, który pozwala programistom oddzielić prezentację (HTML/CSS) od logiki aplikacji. XOOPS używa Smarty dla wszystkich potrzeb szablonów, umożliwiając czystą separację między kodem PHP a wyjściem HTML.

  • Theme-Development - Tworzenie motywów XOOPS
  • Template-Variables - Dostępne zmienne w szablonach
  • Smarty-4-Migration - Aktualizacja z Smarty 3 na 4

Smarty zapewnia:

  • Rozdzielenie problemów: Trzymaj HTML w szablonach, logikę PHP w klasach
  • Dziedziczenie szablonów: Buduj złożone układy z prostych bloków
  • Cachowanie: Poprawiaj wydajność ze skompilowanymi szablonami
  • Modyfikatory: Transformuj wyjście z wbudowanymi lub niestandardowymi funkcjami
  • Bezpieczeństwo: Kontroluj jakie funkcje PHP mogą uzyskać dostęp szablony

XOOPS konfiguruje Smarty z niestandardowymi delimitami:

Domyślny Smarty: { i }
Smarty XOOPS: <{ i }>

To zapobiega konfliktom z kodem JavaScript w szablonach.

Zmienne są przekazywane z PHP do szablonów:

// W PHP
$GLOBALS['xoopsTpl']->assign('title', 'My Page Title');
$GLOBALS['xoopsTpl']->assign('count', 42);
{* W szablonie *}
<h1><{$title}></h1>
<p>Total items: <{$count}></p>
// PHP
$item = [
'id' => 1,
'title' => 'Article Title',
'author' => 'John Doe'
];
$GLOBALS['xoopsTpl']->assign('item', $item);
{* Szablon *}
<h2><{$item.title}></h2>
<p>By: <{$item.author}></p>
// PHP
$GLOBALS['xoopsTpl']->assign('user', $xoopsUser);
{* Szablon *}
<p>Welcome, <{$user->getVar('uname')}>!</p>

Komentarze w Smarty nie są renderowane do HTML:

{* To jest komentarz - nie pojawi się w wyjściu HTML *}
{*
Komentarze wieloliniowe
są również obsługiwane
*}
<{if $user_logged_in}>
<p>Welcome back!</p>
<{elseif $is_guest}>
<p>Hello, Guest!</p>
<{else}>
<p>Please log in.</p>
<{/if}>
{* Równość *}
<{if $status == 'published'}>Published<{/if}>
<{if $status eq 'published'}>Published<{/if}>
{* Nierówność *}
<{if $count != 0}>Has items<{/if}>
<{if $count neq 0}>Has items<{/if}>
{* Większy/mniejszy niż *}
<{if $count > 10}>Many items<{/if}>
<{if $count gt 10}>Many items<{/if}>
<{if $count < 5}>Few items<{/if}>
<{if $count lt 5}>Few items<{/if}>
{* Większy/mniejszy lub równy *}
<{if $count >= 10}>Ten or more<{/if}>
<{if $count gte 10}>Ten or more<{/if}>
<{{if $count <= 5}>Five or less<{/if}>
<{if $count lte 5}>Five or less<{/if}>
{* Operatory logiczne *}
<{if $logged_in && $is_admin}>Admin Panel<{/if}>
<{if $logged_in and $is_admin}>Admin Panel<{/if}>
<{if $option1 || $option2}>One option selected<{/if}>
<{if $option1 or $option2}>One option selected<{/if}>
<{if !$is_banned}>Access granted<{/if}>
<{if not $is_banned}>Access granted<{/if}>
{* Sprawdź czy zmienna istnieje i ma wartość *}
<{if $title}>
<h1><{$title}></h1>
<{/if}>
{* Sprawdź czy tablica nie jest pusta *}
<{if $items|@count > 0}>
<ul>
<{foreach $items as $item}>
<li><{$item.name}></li>
<{/foreach}>
</ul>
<{/if}>
{* Używając isset *}
<{if isset($description)}>
<p><{$description}></p>
<{/if}>
{* Podstawowe foreach *}
<ul>
<{foreach $items as $item}>
<li><{$item.name}></li>
<{/foreach}>
</ul>
{* Z kluczem *}
<{foreach $options as $key => $value}>
<option value="<{$key}>"><{$value}></option>
<{/foreach}>
{* Z @index, @first, @last *}
<{foreach $items as $item}>
<{if $item@first}><ul><{/if}>
<li class="item-<{$item@index}>"><{$item.name}></li>
<{if $item@last}></ul><{/if}>
<{/foreach}>
{* Zmień kolory wierszy *}
<{foreach $rows as $row}>
<tr class="<{if $row@iteration is odd}>odd<{else}>even<{/if}>">
<td><{$row.name}></td>
</tr>
<{/foreach}>
{* Foreachelse dla pustych tablic *}
<{foreach $items as $item}>
<li><{$item.name}></li>
<{foreachelse}>
<li>No items found.</li>
<{/foreach}>
<{for $i=1 to 10}>
<p>Item <{$i}></p>
<{/for}>
<{for $i=10 to 1 step -1}>
<p>Countdown: <{$i}></p>
<{/for}>
<{while $count > 0}>
<p><{$count}></p>
<{$count = $count - 1}>
<{/while}>

Modyfikatory transformują wyjście zmiennych:

{* Zescapuj HTML (zawsze używaj dla wejścia użytkownika!) *}
<{$title|escape}>
<{$title|escape:'html'}>
{* Kodowanie URL *}
<{$url|escape:'url'}>
{* Wielkie litery/małe litery *}
<{$name|upper}>
<{$name|lower}>
<{$name|capitalize}>
{* Obetnij tekst *}
<{$content|truncate:100:'...'}>
{* Usuń tagi HTML *}
<{$html|strip_tags}>
{* Zastąp *}
<{$text|replace:'old':'new'}>
{* Zawijanie słów *}
<{{$text|wordwrap:80:"\n"}>
{* Wartość domyślna *}
<{$optional_var|default:'No value'}>
{* Formatowanie liczby *}
<{$price|string_format:"%.2f"}>
<{$count|number_format}>
{* Formatowanie daty *}
<{$timestamp|date_format:"%B %e, %Y"}>
<{$timestamp|date_format:"%Y-%m-%d %H:%M"}>
{* Policz elementy *}
<{$items|@count}> items
{* Połącz tablicę *}
<{$tags|@implode:', '}>
{* Koduj JSON *}
<{$data|@json_encode}>
<{$content|strip_tags|truncate:200:'...'|escape}>
{* Dołącz plik szablonu *}
<{include file="db:mymodule_header.tpl"}>
{* Dołącz ze zmiennymi *}
<{include file="db:mymodule_item.tpl" item=$currentItem}>
{* Dołącz ze zmiennymi przypisanymi *}
<{include file="db:sidebar.tpl" assign="sidebar_content"}>
<div class="sidebar"><{$sidebar_content}></div>
{* Insert wywołuje funkcję PHP dla dynamicznej zawartości *}
<{insert name="getBanner"}>
{* Proste przypisanie *}
<{assign var="page_title" value="Welcome"}>
<{$page_title = "Welcome"}>
{* Przypisanie z wyrażenia *}
<{assign var="full_name" value="`$first_name` `$last_name`"}>
{* Zawartość bloku przechwytywania *}
<{capture name="sidebar"}>
<h3>Sidebar</h3>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
<{/capture}>
<div class="sidebar"><{$smarty.capture.sidebar}></div>
{* Bieżący timestamp *}
<{$smarty.now|date_format:"%Y-%m-%d"}>
{* Zmienne żądania *}
<{$smarty.get.page}>
<{$smarty.post.username}>
<{$smarty.request.id}>
<{$smarty.cookies.session_id}>
<{$smarty.server.HTTP_HOST}>
{* Stałe *}
<{$smarty.const.XOOPS_URL}>
{* Zmienne konfiguracji *}
<{$smarty.config.var_name}>
{* Informacje szablonu *}
<{$smarty.template}>
<{$smarty.current_dir}>
{* Wersja Smarty *}
<{$smarty.version}>
{* Właściwości sekcji/foreach *}
<{$smarty.foreach.items.index}>
<{$smarty.foreach.items.iteration}>
<{$smarty.foreach.items.first}>
<{$smarty.foreach.items.last}>

Dla JavaScript z nawiasami klamrowymi:

<{literal}>
<script>
var config = {
url: 'https://example.com',
count: 10
};
if (config.count > 5) {
console.log('Many items');
}
</script>
<{/literal}>

Lub używaj zmiennych Smarty w JavaScript:

<script>
var moduleUrl = '<{$xoops_url}>/modules/mymodule';
var items = <{$items_json}>;
</script>

XOOPS zapewnia niestandardowe funkcje Smarty:

{* URL obrazu XOOPS *}
<img src="<{xoImgUrl}>images/logo.png" alt="Logo">
{* URL modułu XOOPS *}
<a href="<{xoModuleUrl}>">Module Home</a>
{* URL aplikacji *}
<a href="<{xoAppUrl 'item.php'}>?id=<{$item.id}>">View Item</a>
{* Dla zawartości generowanej przez użytkownika, zawsze zescapuj *}
<p><{$user_comment|escape}></p>
{* Dla zawartości HTML, użyj odpowiedniej metody *}
<div><{$content}></div> {* Tylko jeśli zawartość jest wstępnie czyszczona *}
// Dobrze
$GLOBALS['xoopsTpl']->assign('article_title', $title);
$GLOBALS['xoopsTpl']->assign('article_items', $items);
// Unikaj
$GLOBALS['xoopsTpl']->assign('t', $title);
$GLOBALS['xoopsTpl']->assign('arr', $items);

Szablony powinny skoncentrować się na prezentacji. Przenieś złożoną logikę do PHP:

{* Unikaj złożonej logiki w szablonach *}
{* Źle *}
<{if $user && $user->getVar('level') > 5 && $user->getVar('status') == 'active' && $permissions|in_array:'edit'}>
{* Dobrze - oblicz w PHP i przekaż prostą flagę *}
<{if $can_edit}>

Dla spójnych układów, użyj dziedziczenia szablonów (patrz Theme-Development).

{* Pokaż wszystkie przypisane zmienne *}
<{debug}>
{* Debuguj konkretną zmienną *}
<pre><{$variable|@print_r}></pre>
<pre><{$variable|@var_export}></pre>
{* Nagłówek modułu *}
<div class="mymodule">
<h2><{$module_name}></h2>
{* Breadcrumb *}
<{if $breadcrumb}>
<nav class="breadcrumb">
<{foreach $breadcrumb as $crumb}>
<{if $crumb@last}>
<span><{$crumb.title}></span>
<{else}>
<a href="<{$crumb.link}>"><{$crumb.title}></a> &raquo;
<{/if}>
<{/foreach}>
</nav>
<{/if}>
{* Zawartość *}
<div class="content">
<{$content}>
</div>
</div>
<{if $page_nav}>
<div class="pagination">
<{$page_nav}>
</div>
<{/if}>
<{if $form}>
<div class="form-container">
<{$form}>
</div>
<{/if}>

#smarty #szablony #xoops #frontend #silnik-szablonów