Introdução ao Liquid
Para usuários iniciantes, o Liquid pode ser descrito como uma forma de estender os recursos de HTML e CSS além de apenas páginas estáticas. Ele usa modelos dinâmicos para representar diferentes tipos de páginas e é robusto o suficiente para permitir que você faça o que quiser sem criar manualmente arquivos HTML específicos para páginas separadas em seu portal de suporte.
Por exemplo, graças ao Liquid, há um único modelo chamado Solution Article View no Freshdesk, e fazer alterações nele afetará o layout de todos os artigos de solução em todo o portal de suporte. Você não terá que codificar o nome do artigo da solução, seu conteúdo ou qualquer um dos detalhes e repetir todo o processo em cada página. Em vez disso, você usará marcadores de posição dentro do seu modelo, que mudarão dinamicamente com cada instância do seu artigo.
<h2 class = "header"> {{article.title}} </h2>
<p> {% translate portal.article.modified_on%} {{article.modified_on | short_day_with_time}} </p>
<article class = "article-body" id = "article-body">
{{article.body}}
</article>
No exemplo acima, {{article.title}} e {{article.body}} são marcadores de posição. Graças ao Liquid, cada vez que você abre um artigo de solução, ele será automaticamente substituído pela informação ou conteúdo relevante. Portanto, quando você (ou seus clientes) olham para o artigo real no portal, ele não inclui nenhum dos marcadores de posição. Em vez disso, seria renderizado como uma página HTML estática normal.
Além de marcadores de posição dinâmicos, Liquid também permite que você use estruturas de controle e recursos de programação avançados que normalmente não estão disponíveis em HTML. Por exemplo, você pode usar conceitos como instruções condicionais, estruturas de loop, variáveis personalizadas e muito mais, que normalmente fazem parte de linguagens de back-end como Ruby, Java ou C. Mas observe que você usará Liquid junto com seu HTML. Não é um idioma separado e funciona em conjunto com o código do portal.
{% para a categoria em portal.forum_categories%}
{% if category.forums_count> 0%}
<div class = "cs-s">
<h3 class = "header">
{{category.name | link_to: categoria.url}}
</h3>
<div class = "cs-gc">
{% para fórum em category.forums%}
<section class = "cs-g topic-list">
<div class = "emblema list-lead - {{forum.type_name}}">
{{fórum | link_to_forum_with_count}}
</div>
{{fórum | lista de tópicos: 5}}
</section>
{% endfor%}
</div>
</div>
{% fim se %}
{% endfor%}
Como o Liquid funciona no Freshdesk?
A integração com o Liquid do Freshdesk é configurada para funcionar com os editores de código que você vê na seção de personalização do portal. Ele garante que as tags Liquid que você usa sejam convertidas automaticamente. Quase todas as páginas do portal de suporte têm um modelo que pode ser editado e suporta marcadores de posição suficientes para ajudá-lo a mudar as coisas extensivamente.
Essa estrutura ajuda você a realizar muitas alterações de design em seu portal de suporte sem fazer muito trabalho. Tudo pode ser editado online por meio dos editores, e você não precisa se preocupar em criar HTMLs separados, colocando-os na estrutura de pastas certa ou vinculando-os manualmente.
Aqui está um vídeo rápido para mostrar os fundamentos do Liquid. Mas lembre-se de que não há arquivos no Freshdesk, apenas editores online para diferentes tipos de página.