자신의 HTML, CSS 및 Javascript를 사용하여 테마를 사용자 정의할 수 있는 것 외에도, Freshdesk는 Liquid 템플릿 엔진을 사용하여 지원 포털에서 구현할 수 있는 디자인 아이디어의 범위를 확장합니다. 이전에 들어본 적이 있거나 Shopify와 함께 사용한 적이 있다면, 이것이 좋은 소식인 이유를 알 것입니다. 그러나 이 아이디어가 처음이라면 계속 읽어보세요.
Liquid 시작하기
처음 사용자에게 Liquid는 HTML과 CSS의 기능을 단순한 정적 페이지를 넘어 확장하는 방법으로 설명될 수 있습니다. 동적 템플릿을 사용하여 다양한 유형의 페이지를 표현하며, 지원 포털의 개별 페이지에 대한 특정 HTML 파일을 수동으로 생성하지 않고도 원하는 작업을 수행할 수 있을 만큼 강력합니다.
예를 들어, Liquid 덕분에 Freshdesk에는 솔루션 아티클 보기라는 단일 템플릿이 있으며, 이를 변경하면 지원 포털 전반의 모든 솔루션 아티클의 레이아웃에 영향을 미칩니다. 솔루션 아티클의 이름, 내용 또는 세부 정보를 하드 코딩하고 모든 페이지에서 전체 프로세스를 반복할 필요가 없습니다. 대신, 템플릿 내에 플레이스홀더를 사용하여 아티클의 각 인스턴스와 함께 동적으로 변경됩니다.
<h2 class="heading">{{ 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>
위의 예에서 {{ article.title }}과 {{ article.body }}는 플레이스홀더입니다. Liquid 덕분에 솔루션 아티클을 열 때마다 관련 정보나 콘텐츠로 자동으로 대체됩니다. 따라서 포털에서 실제 아티클을 볼 때 (고객이든 본인이든) 플레이스홀더가 포함되지 않습니다. 대신 일반 정적 HTML 페이지처럼 렌더링됩니다.
동적 플레이스홀더 외에도 Liquid는 일반적으로 HTML에서 사용할 수 없는 제어 구조 및 고급 프로그래밍 기능을 사용할 수 있게 합니다. 예를 들어, 조건문, 반복 구조, 사용자 정의 변수 등과 같은 개념을 사용할 수 있으며, 이는 일반적으로 Ruby, Java 또는 C와 같은 백엔드 언어의 일부입니다. 하지만 Liquid는 HTML과 함께 사용되며 별도의 언어가 아니며 포털의 코드와 함께 작동합니다.
{% for category in portal.forum_categories %}
{% if category.forums_count > 0 %}
<div class="cs-s">
<h3 class="heading">
{{ category.name | link_to: category.url }}
</h3>
<div class="cs-g-c">
{% for forum in category.forums %}
<section class="cs-g topic-list">
<div class="list-lead badge-{{ forum.type_name }}">
{{ forum | link_to_forum_with_count }}
</div>
{{ forum | topic_list:5 }}
</section>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
Freshdesk에서 Liquid는 어떻게 작동하나요?
Freshdesk의 Liquid 통합은 포털 사용자 정의 섹션에서 볼 수 있는 코드 편집기와 함께 작동하도록 설정되어 있습니다. 사용한 Liquid 태그가 자동으로 변환되도록 보장합니다. 지원 포털의 거의 모든 페이지에는 편집할 수 있는 템플릿이 있으며, 충분한 플레이스홀더를 지원하여 광범위한 변경을 도울 수 있습니다.
이 구조는 많은 작업을 하지 않고도 지원 포털에서 많은 디자인 변경을 할 수 있도록 도와줍니다. 모든 것이 온라인 편집기를 통해 편집 가능하며, 별도의 HTML을 생성하거나 올바른 폴더 구조에 넣거나 수동으로 연결할 필요가 없습니다.