CMS para Designers
Last updated
Was this helpful?
Last updated
Was this helpful?
Este documento descreve a sintaxe e a semântica do mecanismo de template (CMS) e será mais útil como referência para aqueles que desejam criar e/ou editar templates na iSET.
representa Content Management System, ou Sistema de Gestão de Conteúdos. De forma bem direta, um CMS permite que você crie, organize, publique e apague conteúdos do seu site. Neste tutorial, você vai entender como e por que usar um CMS na sua estratégia digital.
Um template (.tpl) é um arquivo de texto normal. Ele contém variáveis ou expressões, que são substituídas por valores quando o template é renderizado/carregado, e tags, que controlam a lógica do template.
Abaixo está um template resumido que ilustra alguns princípios básicos. Abriremos mais detalhes mais tarde:
<!DOCTYPE html>
<html>
<head>
<title>{{store.name}}</title>
</head>
<body>
<ul id="navigation">
{% for category in categories %}
<li><a href="{{ category.url }}">{{ category.title }}</a></li>
{% endfor %}
</ul>
<h1>{{store.name}}</h1>
{{ a_variable }}
</body>
</html>
Existem dois tipos de delimitadores: {% ...%} e {{...}}. O primeiro é usado para executar instruções como for-loops, o último produz o resultado de uma expressão ou carregamento de uma variável.
A plataforma passa variáveis para os templates para manipulação no template. As variáveis podem ter atributos ou elementos que você também pode acessar. A representação visual de uma variável depende muito da sessão onde se faz o uso e se está relacionado a um serviço, como o de variáveis globais.
Use um ponto (.) Para acessar os atributos de uma variável (métodos ou propriedades de um objeto ou itens de uma matriz):
[html]{{ variavel.valor }}[/html]
Nota É importante saber que as chaves não fazem parte da variável, mas da instrução de impressão. Ao acessar variáveis dentro de tags, não coloque as chaves ao redor delas.
Por conveniência, ao utilizar
variavel.valor é processado pela plataforma na seguinte forma:
Verifica se variavel é um array e valor um elemento válido;
Caso contrário, e se variavel for um objeto, verifica se valor é uma propriedade válida;
Se não, e se variavel for um objeto, verifica se valor é um método válido (mesmo se variavel for o construtor daquele objeto);
Caso contrário, retorna um valor nulo.
{# equivalente ao variavel.data-valor não funcional #} {{ attribute (variavel, 'data-valor') }}
Você pode atribuir valores a variáveis dentro de blocos de código. As atribuições usam a tag set:
{% set variavel = 'valor' %}
{% set variavel = [1, 2] %}
{% set variavel = {'val1': 'val2'} %}
As variáveis podem ser modificadas por filtros. Os filtros são separados da variável por um símbolo de barra vertical (|). Vários filtros podem ser encadeados. A saída de um filtro é aplicada ao próximo.
O exemplo a seguir remove todas as tags HTML do nome e do título:
{{ name|striptags|title }}
Filtros que aceitam argumentos têm parênteses ao redor dos argumentos. Este exemplo une os elementos de uma lista por vírgulas:
{{ list|join(', ') }}
Funções podem ser chamadas para gerar conteúdo. As funções são chamadas por seus nomes seguidos de parênteses (()) e podem ter argumentos.
Por exemplo, a função de intervalo retorna uma lista contendo uma progressão aritmética de inteiros:
{% for i in range(0, 3) %}
{{ i }},
{% endfor %}
{% for i in range(low=1, high=10, step=2) %}
{{ i }},
{% endfor %}
Usar argumentos nomeados torna seus templates mais explícitos sobre o significado dos valores que você passa como argumentos:
{{ data|convert_encoding('UTF-8', 'iso-2022-jp') }}
{# contra #}
{{ data|convert_encoding(from='iso-2022-jp', to='UTF-8') }}
Os argumentos nomeados também permitem que você ignore alguns argumentos para os quais você não deseja alterar o valor padrão:
{# o primeiro argumento é o formato da data, que é padronizado para o formato de data global se null for passado #}
{{ "now"|date(null, "America/Sao_Paulo") }}
{# ou pule o valor do formato usando um argumento nomeado para o fuso horário #}
{{ "now"|date(timezone="America/Sao_Paulo") }}
Você também pode usar argumentos posicionais e nomeados em uma chamada, caso em que os argumentos posicionais devem sempre vir antes dos argumentos nomeados:
{{ "now"|date('d/m/Y H:i', timezone="America/Sao_Paulo") }}
Dica: cada tutorial de função e filtro possui uma seção onde os nomes de todos os argumentos são listados quando suportados.
Uma estrutura de controle se refere a todas as coisas que controlam o fluxo de um programa - condicionais (ou seja, if / elseif / else), loops for, bem como coisas como blocos. Estruturas de controle aparecem dentro de blocos {% ...%}.
Por exemplo, para exibir uma lista de usuários fornecida em uma variável chamada usuários, use a tag for:
<h1>Categorias</h1>
<ul>
{% for category in categories %}
<li>{{ category.name|e }}</li>
{% endfor %}
</ul>
A tag if pode ser usada para testar uma expressão:
{% if categories|length > 0 %}
<ul>
{% for category in categories %}
<li>{{ category.name|e }}</li>
{% endfor %}
</ul>
{% endif %}
A função de
{{ include('menu.tpl') }}
Por padrão, os templates incluídos têm acesso ao mesmo contexto que o modelo que os inclui. Isso significa que qualquer variável definida no modelo principal também estará disponível no modelo incluído:
{% for box in boxes %}
{{ include('render_box.tpl) }}
{% endfor %}
O template render_box.tpl incluído é capaz de acessar a variável box.
O nome do template sempre possui extensão .tpl criado previamente a partir do CMS. Você pode acessar templates em subdiretórios com uma barra:
{{ include('snippets/collection/sidebar.html') }}
É permitido o uso de expressões em todos os lugares.
Nota A precedência do operador é a seguinte, com os operadores de precedência mais baixa listados primeiro: ?: (Operador ternário), b-and, b-xor, b-or, or, and, ==, !=, <=>, < ,>, >=, <=, in, matches, starts with, ends with, .., +, -, ~, *, /, //, %, is (testes),**, ??, | (filters), [], and .:
{% set greeting = 'Hello ' %} {% set name = Fabio %}
{{ greeting ~ name|lower }} {# Hello fábio #}
{# use parênteses para mudar a precedência #} {{ (greeting ~ name)|lower }} {# hello fábio #}
As formas mais simples de expressão são literais. Literais são representações de tipos PHP, como strings, números e arrays. Existem os seguintes literais:
"Hello World": tudo o que estiver entre duas aspas duplas ou simples é uma string. Eles são úteis sempre que você precisa de uma string no modelo (por exemplo, como argumentos para chamadas de função, filtros ou apenas para estender ou incluir um template). Uma string pode conter um delimitador se for precedida por uma barra invertida (\) - como em 'Domino\'s pizza'. Se a string contiver uma barra invertida (por exemplo, 'c:\Arquivos de programas'), faça o escape duplicando-a (por exemplo, 'c:\\Arquivos de programas').
42 / 42.23: Inteiros e números de ponto flutuante são criados escrevendo o número. Se um ponto estiver presente, o número é um float, caso contrário, um inteiro.
["valor1", "valor2"]: As matrizes são definidas por uma sequência de expressões separadas por uma vírgula (,) e delimitadas por colchetes ([]).
{"chave": "valor"}: Hashes são definidos por uma lista de chaves e valores separados por uma vírgula (,) e agrupados com chaves ({}):
{# chaves como string #}
{ 'chave': 'casa', 'chave2': 'valor2' }
{# chaves como nomes (equivalente ao hash anterior) #}
{ chave: 'valor', chave2: 'valor2' }
{# chaves como inteiro #}
{ 2: 'valor1', 4: 'valor4' }
{# as chaves podem ser omitidas se forem iguais ao nome da variável #}
{ chave }
{# é equivalente ao seguinte#}
{ 'chave': chave }
{# chaves como expressões (a expressão deve ser colocada entre parênteses)#}
{% set chave = 'valor' %}
{ (chave): 'valor', (1 + 1): 'chave2', (chave ~ 'b'): 'valor2' }
true / false: true representa o valor verdadeiro, falso representa o valor falso.
null: null não representa nenhum valor específico. Este é o valor retornado quando uma variável não existe. none é um apelido para null.
Matrizes e hashes podem ser aninhados:
{% set chave = [1, {"chave": "valor"}] %}
A plataforma permite que você faça matemática em templates; os seguintes operadores são suportados:
+: Adiciona dois números (os operandos são convertidos em números). {{1 + 1}} é 2.
-: Subtrai o segundo número do primeiro. {{3 - 2}} é 1.
/: Divide dois números. O valor retornado será um número de ponto flutuante. {{1/2}} é {{0.5}}.
%: Calcula o restante de uma divisão inteira. {{11% 7}} é 4.
*: Multiplica o operando esquerdo pelo direito. {{2 * 2}} retornaria 4.
**: Eleva o operando esquerdo à potência do operando direito. {{2 ** 3}} retornaria 8.
Você pode combinar várias expressões com os seguintes operadores:
and: Retorna verdadeiro se os operandos esquerdo e direito forem ambos verdadeiros.
or: Retorna verdadeiro se o operando esquerdo ou direito for verdadeiro.
not: nega uma declaração.
(expr): Agrupa uma expressão.
Nota Também oferece suporte a operadores (b-and, b-xor, e b-or). Os operadores diferenciam maiúsculas de minúsculas.
Os seguintes operadores de comparação são suportados em qualquer expressão: ==,! =, <,>,> = E <=.
Você também pode verificar se uma string começa ou termina com outra string:
{% if 'Fabio' starts with 'F' %}
{% endif %}
{% if 'Fabio' ends with 'o' %}
{% endif %}
O operador in executa o teste de contenção. Ele retorna verdadeiro (true) se o operando esquerdo estiver contido no direito:
{# retorna true #}
{{ 1 in [1, 2, 3] }}
{{ 'cd' in 'abcde' }}
Para realizar um teste negativo, use o operador not in:
{% if 1 not in [1, 2, 3] %}
{# é equivalente a #}
{% if not (1 in [1, 2, 3]) %}
O operador is executa testes. Os testes podem ser usados para testar uma variável em relação a uma expressão comum. O operando certo é o nome do teste:
{# descobrir se uma variável existe ou foi definida #}
{{ product.id is defined }}
Os testes podem ser negados usando o operador is not:
{% if product.id is not defined %}
{# é equivalente a #}
{% if not product.id %}
Os seguintes operadores não se enquadram em nenhuma das outras categorias:
|: Aplica um filtro.
{{1..5}}
{# equivalente a #}
{{intervalo (1, 5)}}
Observe que você deve usar parênteses ao combiná-lo com o operador de filtro devido às regras de precedência do operador:
(1..5) | junção (',')
~: Converte todos os operandos em strings e os concatena.
{{ "Olá"~ name ~"! "}} retornaria (assumindo que o name é 'João') Olá João!.
., []: Obtém um atributo de uma variável.
? :: O operador ternário:
{{variavel?: 'no'}} é o mesmo que {{variavel? variavel: 'não'}}
{{variavel? 'yes'}} é o mesmo que {{variavel? 'sim' : '' }}
??: O operador de coalescência nula:
{# retorna o valor de variavel se estiver definido e não nulo, 'não' caso contrário #}
{{variavel ?? 'não' }}
A interpolação de string (# {expression}) permite que qualquer expressão válida apareça dentro de uma string entre aspas. O resultado da avaliação dessa expressão é inserido na string:
{{ "a variavel tem #{variavel} como valor" }}
{{ "a soma tem resultado de #{1 + 2} como valor" }}
Nota Se você deseja acessar um atributo dinâmico de uma variável, use a função de . A função pode ser usada para acessar um atributo "dinâmico" de uma variável. A função de também é útil quando o atributo contém caracteres especiais (como "-" que seriam interpretados como o operador menos):
Vá para o para saber mais sobre os filtros integrados.
Vá para o para aprender mais sobre as funções integradas.
Vá para o tutorial de para saber mais sobre as tags integradas.
é útil para incluir um template (.tpl) e retornar o conteúdo renderizado desse modelo para o atual:
//: divide dois números e retorna o resultado de número inteiro com base. {{20 // 7}} é 2, {{-20 // 7}} é -3 (isso é apenas resumo sintático para o ).
Nota Para comparações de strings complexas, o operador match permite que você use : {% if phone matches '/^[\\d\\.]+$/' %} {% endif %}
..: Cria uma sequência com base no operando antes e depois do operador (este é o resumo sintático para a ):
{{variavel? 'sim' : '' }}