Twig에서 구성 요소 에뮬레이션

구성 요소는 Vue와 같은 내가 가장 좋아하는 JavaScript 프레임워크 중 하나입니다.js.태그의 중복 코드를 삭제함으로써 무미건조한 원칙을 따를 수 있고 개발자 체험을 제공할 수 있습니다.내가 Twig 템플릿을 사용할 때 진정한 구성 요소에 접근할 수 없는 것은 틀림없이 내가 가장 그리워하는 일 중의 하나일 것이다.그렇기 때문에, 나는 줄곧 이 문제를 해결할 방법을 찾고 있다.
내가 시도한 해결 방안과 내가 찾은 해결 방안에 대해 이야기하기 전에, 나는 먼저 구성 요소나 구성 요소 교체에서 어떤 기능을 얻어야 하는지를 설명하는 기준을 제시할 것이다.

표준

아이템: 명명 매개 변수 (일반적으로 "아이템"이라고 함) 를 구성 요소에 전달할 수 있어야 합니다.

슬롯: 태그 블록 (HTML, 텍스트 등) 을 구성 요소에 전달할 수 있어야 합니다. 구성 요소는 이 태그를 어떻게 처리해야 하는지 확인해야 합니다.

베일 경험 있으면js나 다른 구성 요소 기반 프레임워크는 이러한 개념에 익숙해야 합니다.만약 없다면, 저를 믿어야 합니다. 이 구성 요소 특성을 사용한다면, 그것들이 없는 상황에서 태그를 작성하는 것은 매우 고통스럽습니다.😂

솔루션 탐색

나는 Twig에서 유사한 구성 요소의 기능을 실현할 수 있는 두 가지 주요 Twig 특성이 있다고 생각한다. 그것이 바로 매크로와 Includes이다.

웅대하다

그래서 나는 宏으로 실험을 시작했다.만약 네가 익숙하지 않다면, 宏은 가는 가지의 기능이다.다음은 매크로 예제Twig docs의 자세한 내용을 참조하십시오.

{% import _self as components %}

{% macro button(props) %}
    <button>{{ props.content }}</button>
{% endmacro %}

<p>{{ components.button({ content: 'Click Me' }) }}</p>

매크로를 사용하면 도구를 전달하는 표준을 충족시켰지만, 명명 플러그인을 통해 '구성 요소' 로 표시를 전달하고자 하는 문제를 해결하지 못했다.

포함

이어서 나는 시도했다Twig's Includes.Includes는 코드를 여러 파일로 분해하는 방법입니다. 저는 자주 그것들을 사용하여 페이지 템플릿을 분해합니다. 이렇게 하면 코드가 더욱 작고 검색과 검색이 쉽습니다.단, 위아래 문장 (즉 변수) 을include에 전달할 수 있는 내장 기능 "with"가 있습니다. 이것은 내가 그것들을 구성 요소로 사용할 수 있기를 바랍니다.
그러나 마찬가지로 그들은 첫 번째 기준만 만족시킨다.구성 요소의 태그에 표시할 태그 블록을 전달하는 (내장) 방법이 없습니다.
방주: 기술적으로 말하자면宏이나include에 대해 나는 저속한 일을 할 수 있다. 예를 들어 하나의 변수를 한 그룹의 표시에 분배한 다음에 이 변수에 전달할 수 있다. 그러나 이 느낌은 매우 틀리고 직관적이지 않다.

최종 솔루션

희망을 포기한 후, 나는 마침내 우연히 작은 나뭇가지의 삽입물을 발견하였다.나는 문서를 읽고 즉시 흥분했다. 왜냐하면 엠버디스는 이 두 가지 기준을 즉시 만족시킨 것 같았기 때문이다.나는 즉시 Twigfidle(TwigFiddle.com)에 예시를 작성했다. 나는 삽입이 나의 두 가지 기준에 완전히 부합되는 것을 발견했다.'with'기능과'block'을 사용하면 도구와 큰 블록을 삽입에 전달할 수 있다.
다음은 포함된 선언의 예와 사용 예입니다.

{% embed "page.twig" with {
    social: ['facebook', 'twitter', 'snapchat']
} %}
    {% block header %}
        <div>Header Content</div>
    {% endblock %}

    {% block main %}
        <div>Main Content</div>
    {% endblock %}
{% endembed %}

{# File: page.twig #}

<div class="page-component">
    <header>{% block header %}Default Header Content{% endblock %}</header>

    <main>{% block main %}Default Main Content{% endblock %}</main>

    <footer>{% block footer %}Default Footer Content{% endblock %}</footer>

    {% if social is defined %}
        <ul class="social">
            {% for item in social %}<li>{{ item }}</li>{% endfor %}
        </ul>
    {% endif %}
</div>

이런 Twig에서 구성 요소를 시뮬레이션하는 방법은 결점이 없는 것은 아니지만, 나는 그것이 대부분의 장면에 적용된다고 생각한다.다음은 내장형 시스템의 이점과 단점에 대한 참고 사항입니다.

찬성 의견

아이템(변수)과 슬롯(블록)을 동시에 전송할 수 있습니다.

각 블록에 대한 기본 컨텐트를 지정할 수 있습니다.

[전용] 기능을 사용하여 어셈블리를 암시적으로 사용하는 컨텍스트에서 변수를 받지 않도록 패키지화할 수 있습니다.

기만하다

매번

를 사용할 때마다 삽입된 파일 경로를 특별히 인용해야 한다

부모 템플릿의 변수가 구성 요소에 누설되지 않도록 'only' 키를 사용해야 합니다.

마지막 생각

나는 끼워 넣는 것이 매우 좋은 장기적인 해결 방안이라고 생각하지 않는다. 나는 Twig에서 고유한 구성 요소 기능을 원하지만, 나는 내가 필요로 하는 것을 찾고, 내가 좋아하는 방식으로 템플릿을 청소할 수 있도록 허락해 줘서 매우 기쁘다.
나는 또한 Twig Components Bundle에 관심이 있다. 이것은 Symfony 패키지인데 이것은 마치 Twig에 Vue 구성 요소 시스템을 기반으로 하는 구성 요소 기능을 추가한 것 같다.js.하지만, 나는 아직 해 본 적이 없다.나는 반드시 돌아가서 도착 보고를 해야 한다.
저는 굿워크라는 아주 좋은 회사에서 일합니다.우리는 인터넷 개발자로 구성된 전문가 팀으로 기구, 브랜드와 초창기 회사의 디자인 팀을 도와 네트워크와 모바일 기기를 위해 제품을 구축한다.
만약 당신이 당신의 인터넷 프로젝트에서 합작할 수 있는 사람을 찾고 있다면 망설이지 마세요reach out!