나뭇가지 구문

마스터 애드온 위젯 빌더 를 통해 위젯의 HTML, CSS 및 JavaScript를 렌더링합니다 나뭇가지 구문 템플릿 엔진니다. 만약 당신이 목재 또는 공예 CMS 에서 나뭇가지를 만졌다면,구문은 친숙하게 느껴질 것입니다: {{ tokens }} 필드 값을 인쇄하고, {% if %} 블록은 마크업을 표시하거나 숨깁니다 {% for %} 반복기 행을 통해 루프가 걸어갑니다.

이것은 전체 Twig 라이브러리가 아닌 플러그인에 내장 된 안전한 하위 집합입니다. 그 뒤에는 eval 이없고 컴파일 된 PHP 가 없으며 모든 인쇄 된 값은 필드 유형에 따라 이스케이프됩니다. 페이지 빌더를 보안 문제로 만들 수있는 부분없이 위젯 템플릿에 중요한 Twig 부분을 얻습니다.

템플릿 코드를 작성하는 곳 #

위젯 빌더 편집기에는 세 개의 코드 탭이 있으며, 엔진은 모두: 에서 실행됩니다

• HTML: 위젯의 마크업. 토큰,조건, 루프가 모두 여기에 있습니다.
• CSS: 위젯의 스타일. 토큰은 속성 값 내에서 작동하므로 색상 필드가 피드를 제공할 수 있습니다 background: 직접.
• JS: 선택적 JavaScript.토큰은 여기에서도 작동하므로 필드 값을 스크립트로 전달하는 데 편리합니다.

위젯의 옵션 패널에 추가하는 모든 컨트롤은 필드의 이름을 딴 템플릿 변수가 됩니다 이름 설정. a를 추가합니다 텍스트 필드 명명된 title 그리고 {{ title }} 사용자가 입력한 것은 무엇이든 인쇄합니다. 코드 편집기 옆에 있는 문서 사이드바에는 추가할 때 각 필드의 토큰이 나열되므로 철자를 추측할 필요가 없습니다.

참고: HTML 템플릿은 모든 빌드에서 렌더링되지만 CSS 및 JS 출력은 다음과 같이 제공됩니다 마스터 애드온 프로전체 위젯 빌더 자체와 동일합니다.

토큰으로 값을 인쇄합니다 #

가장 간단한 템플릿은 마크업과 토큰: 입니다

<div class="hero">
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
  <a href="{{ button_link }}">{{ button_text }}</a>
</div>

알 가치가 있는 몇 가지 규칙:

• 점선 경로 구조화된 가치에 도달: {{ item.name }} 루프 내부 또는 {{ tabs.tab_1.person }} 탭 컨트롤의 경우.
• 미디어 필드는 URL을 인쇄합니다. 토큰에 이미지나 비디오 배열이 있으면 엔진은 다음을 출력합니다 url 자동으로 부분, 그래서 <img src="{{ photo }}"> 그냥 작동합니다.
• 이스케이프하는 것은 필드 유형을 따릅니다. URL 필드는 URL 이스케이프를 거치고,WYSIWYG 와 Code 필드는 안전한 HTML 을 허용하며,그 외의 모든 것은 HTML 이스케이프 처리됩니다. 어떤 것도 직접 소독할 필요가 없습니다.

필터 #

파이프 문자가 있는 토큰에 필터를 추가합니다. 엔진은 5: 를 지원합니다

• {{ title|upper }} 값을 대문자로 인쇄합니다.
• {{ title|lower }} 소문자로 인쇄합니다.
• {{ title|trim }} 양쪽 끝에서 공백을 제거합니다.
• {{ content|raw }} 이스케이프를 건너뛰고 값을 있는 그대로 인쇄합니다.
• {{ content|e }} (또는 |escape) a 이후에 다시 탈출하는 힘 raw.

치료하다 |raw 날카로운 도구로서. 필드가 의도적으로 마크업을 보유하는 경우에 존재하며 일반 텍스트 필드에 이를 사용한다는 것은 페이지 편집기가 입력한 내용이 이스케이프되지 않은 상태로 페이지에 도착한다는 것을 의미합니다. 필드가 거의 필요하지 않은 WYSIWYG 또는 코드 유형인 경우 raw 전혀, 그 유형들은 이미 안전한 HTML 태그를 통과하게 해주기 때문입니다.

if 블록을 사용한 조건부 마크업 #

안 {% if %} block 은 조건이 통과할 때만 내용을 렌더링합니다. 이것은 panel-side Conditions 옵션의 프론트엔드 파트너입니다: Conditions 는 Elementor 패널에서 컨트롤을 숨기고,the if block 은 페이지에서 일치하는 마크업을 제거합니다.

{% if show_badge %}
  <span class="badge">{{ badge_text }}</span>
{% endif %}

베어 변수의 진실성 확인, 나뭇가지 스타일: 빈 문자열, 0, 빈 목록과 설정되지 않은 값은 false로 계산됩니다. a부터 스위처 필드 상점 yes 켜져 있을 때와 꺼져 있을 때 빈 값, {% if show_badge %} 토글에 필요한 것은 이것뿐입니다.

전체 분기 작업도:

{% if layout == "card" %}
  <div class="item item--card">...</div>
{% elseif layout == "list" %}
  <div class="item item--list">...</div>
{% else %}
  <div class="item">...</div>
{% endif %}

조건에서 사용할 수 있는 연산자 #

• 비교: ==, !=, >, <, >=, <=. 값은 양변이 숫자일 때 숫자로 비교되며, 그렇지 않은 경우 텍스트와 비교됩니다.
• 논리: and, or, not는, 소문자로 쓰여 있습니다.
• 리터럴: 인용된 문자열("card" 또는 'card'), 숫자, true, false, 그리고 null.

자유롭게 결합하세요: {% if show_price and price > 0 %}, 또는 {% if not hide_footer %}, 또는 {% if plan == "pro" or plan == "agency" %}.

중계기 행을 통해 루핑합니다 #

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 리피터 필드 는 어디에 {% for %} 그것의 유지를 번다. 라는 이름의 중계기 menu_items 하위 필드와 dish, price, 그리고 photo 다음과 같은 렌더링:

<ul class="menu">
{% for item in menu_items %}
  <li class="menu__row">
    <img src="{{ item.photo }}" alt="{{ item.dish }}">
    <span class="menu__dish">{{ item.dish }}</span>
    <span class="menu__price">{{ item.price }}</span>
  </li>
{% endfor %}
</ul>

루프 변수(여기) item하지만 어떤 단어든 작동한다) 는 한 번에 한 행씩 보유하며,각 하위 필드는 당신이 부여한 이름 아래 점선 경로를 통해 사용할 수 있다. 조건은 루프 내부에서 작동하므로 행당 토글은 하나의 중첩 블록 떨어져 있다:

{% for member in team %}
  <div class="member">
    <h3>{{ member.name }}</h3>
    {% if member.role %}<p class="role">{{ member.role }}</p>{% endif %}
  </div>
{% endfor %}

탭 및 팝오버 필드 읽기 #

두 가지 구조적 컨트롤은 특수 토큰 모양을 통해 자식 값을 노출합니다:

• 탭: 아이들은 세 부분으로 구성된 경로로 읽혀집니다: {{ tabs_name.tab_name.field_name }}. 탭 컨트롤이 명명되었습니다 tabs a와 함께 tab_1 탭을 들고 있습니다 person 필드는 다음과 같이 인쇄됩니다 {{ tabs.tab_1.person }}. 루프가 필요하지 않습니다.
• 팝오버 토글: 팝오버 안의 각 필드는 결합된 토큰을 얻습니다: 토글의 이름, 밑줄, 그리고 필드 이름.라는 이름의 팝오버 overlay 와 함께 opacity 내부 필드는 다음과 같이 인쇄됩니다 {{ overlay_opacity }}.

CSS의 토큰 #

CSS 탭은 동일한 엔진을 통해 실행되므로 스타일 필드는 속성 값에 바로 연결됩니다:

.hero {
  background: {{ bg_color }};
  color: {{ text_color }};
}

{% if enable_shadow %}
.hero {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
{% endif %}

안 if 전체 규칙 주위의 블록은 선택적 스타일링을 발송하는 깔끔한 방법입니다: 규칙은 토글이 켜져 있을 때만 출력에 존재합니다. 예를 들어 미디어 필드는 여기에서도 작동합니다 background-image: url("{{ hero_image }}");토큰이 파일 URL로 확인되므로.

자바스크립트의 토큰 #

JS 탭을 사용하면 패널 값을 스크립트에 전달할 수 있습니다. 문자열 값을 인용하고,토글을 위해 진실성에 기대어 보세요:

var speed = {{ slide_speed }};
var autoplay = "{{ autoplay }}" === "yes";

if (autoplay) {
  startSlider(speed);
}

JS에 인쇄된 값은 다른 토큰과 마찬가지로 이스케이프되므로 사용자는 텍스트 필드에 따옴표를 입력하여 스크립트에서 벗어날 수 없습니다.

실용적인 요리법 #

거의 모든 위젯에 나타나는 몇 가지 패턴:

• 선택적 두 번째 버튼: 앵커 전체를 감싸세요 {% if second_button_text %} 따라서 텍스트 필드가 비어 있으면 버튼이 사라집니다. 전환기가 필요하지 않습니다.
• 선택 항목의 레이아웃 클래스: 필드를 클래스 속성에 바로 인쇄합니다: <div class="pricing pricing--{{ layout }}">그런 다음 CSS의 각 변형을 스타일링합니다.
• 대체 콘텐츠: {% if caption %}{{ caption }}{% else %}Untitled{% endif %} 마크업이 빈 요소를 렌더링하지 않도록 합니다.
• 번호가 매겨진 가격 등급: {% if price >= 100 %}<span class="premium-tag">Premium</span>{% endif %} 숫자 필드의 값에 반응합니다.
• 대문자 라벨: {{ eyebrow|upper }} CSS를 자유롭게 유지하세요 text-transform 디자인이 한 자리에만 캡을 요구하는 경우.
• 리피터 기반 갤러리, 메뉴, 타임라인 및 사용후기: 하나 {% for %} 루프와 중계기는 고정된 수의 복사 붙여넣기 블록을 대체합니다.

엔진이 지원하지 않는 것 #

가장자리를 알면 디버깅 시간이 절약됩니다. 이것은 고의적인 부분 집합이므로 몇 가지 full-Twig 기능이 없습니다:

• 아니요 {% set %}매크로, 포함 또는 템플릿 상속.
• 표현식 내부에 수학이 없습니다: 값을 비교하지만 CSS에서 계산합니다 calc() 또는 JS 탭에서.
• 그 이상의 필터는 없습니다 raw, escape/e, upper, lower, 그리고 trim.
• 아니요 loop.index 또는 내부의 다른 루프 메타데이터 {% for %}.
• 그룹화 논리에 대한 괄호가 없습니다. 주문하기 your and/or 올바르게 읽을 수 있도록 체인을 연결하거나 중첩된 체인으로 분할합니다 if 블록.

템플릿에 이보다 더 무거운 논리가 필요한 경우 이는 일반적으로 결정을 패널로 이동하기 위한 기호입니다. 예를 들어 옵션에 계산하려는 값이 포함된 선택 필드가 있습니다.

자주 묻는 질문 #

감싸는 #

Twig 구문 엔진은 Widget Builder 필드를 마크업에 연결하는 것입니다: {{ tokens }} 인쇄 패널 값, {% if %} 꺼져 있을 때 선택적 마크업을 제거합니다 {% for %} HTML 의 한 블록이 무제한 리피터를 제공하게 합니다. 일반 토큰으로 시작하여 첫 번째 토글에 if 블록을 추가한 다음 디자인이 반복되면 루프로 졸업합니다. 거기에서 리피터, 선택, 그리고 스위처 필드는 이제까지 구축해야 할 대부분의 동적 위젯을 다룹니다. 빌더 자체에 새로운? The 위젯 빌더 개요 편집기를 살펴봅니다 가격 페이지 각 계획에 포함 된 내용을 보여줍니다.