블록 특정 JS (및 CSS)를 추가하는 방법-_right

그래서 나는 몇 시간 동안 인터넷 검색, 독서, 공부법에 시간을 보냈지 만 아무도 Alan Storm조차도 나를 철자하지 않았습니다. 전체 인터넷이 Magento 2 의 특정 페이지 에 JS 또는 CSS를 추가하는 데 관심이있는 것 같습니다. 하지만 내가 찾고있는 것은 특정 블록에 JS / CSS를 추가하는 것 입니다.

그래서 간단히 말해서 내 질문은 다음과 같습니다.

특정 블록 에 JS (및 추가로 CSS)를 추가하는 가장 좋은 방법은 무엇입니까? 블록이 페이지 (*)에 있으면 JS / CSS 가로 드되고 블록이 없으면 CSS / JS가없는 것입니까? ?

* 이것은 블록 / 페이지의 toHtml 메소드 또는 가장 중요하게 범주의 WYSIWYG에 포함 된 블록을 통해 내 모듈의 사용자 정의 페이지에서 layout.xml을 통해 페이지 / 템플릿에서 블록을 설정할 수 있음을 의미합니다 / 제품 설명 / CMS 차단 / CMS 페이지.

나는 Alan의 위대한 기사 (이 사람에게 Kudos 다시!)를 많이 읽었 지만 이것에 관한 다른 기사 의 연재물은 언급하지 않았지만 모든 사람들이 페이지, 특정 페이지에 추가하고 싶어한다는 느낌을 얻었습니다. 블록이 사용됩니다.

나는 다양한 기술에 익숙하다고 생각하지만 여기에 뭔가 빠져있을 수 있으므로 커뮤니티의 합의를 원할 것입니다. 아마도 모든 프론트 엔드에 대한 약간의 사인 포스트를 찾고 있습니다. 비슷한 질문을하고 옵션을 숙고합니다.

이전에는 Magento 1에서 블록 생성자를 찾고, 레이아웃을 가져오고, 헤드 참조를 가져오고 addJs / addCss를 호출하거나 가능한 경우 layout.xml의 메소드를 사용합니다. 이것은 테마 레벨이 헤드 블록을 출력하기 전에 JS가 블록 생성자의 resourse 목록에 "추가" 되었음을 의미 합니다. 그러나 이것은 현재 불가능 해 보입니다.

JS / CSS를 추가하는 방법을 읽었습니다 (이것은 단순한 "어떻게합니까 ???"가 아닙니다. 더 정확한 "정확한 / mag2 방법은 무엇입니까 ???") 기술 :

<head></head>루트 요소를 사용하는 /view/[area]/layout/[default/page_id].xml 기술
내 블록이로드되었는지에 관한 일종의 논리와 함께 head.additional에 적용 된 내 모듈에 헤드 블록 추가
\ Asset \ GroupedCollection 및 \ Asset \ Repository 객체를 사용하여 페이지 / 템플릿의 custructor에서 주입합니다 (이것은 블록으로 오크가 아닌 것 같습니다).
RequireJS 사용 및 모듈에 requireJS 구성 적용

내가 놓친 것이 있습니까 ??

올바른 방법은 RequireJS 라이브러리와 x-magento-init 속성 또는 require("my_module", function(){ ... })인라인 스크립트 의 구문이 있는 스크립트를 사용하는 것이 올바른 방법이라고 생각합니다 . 그러나 이것은 나에게 멍청한 것 같아? 스크립트를로드하기 위해 스크립트를 설정해야하고 적어도 내 JS 중 일부를 인라인해야하지만 "내 블록이 있습니다. 이제 내 JS가 필요합니다"라고 말하는 가장 생생한 방법으로 내 phtml 에이를 삽입하십시오.

그러나 나는 PHP를 통해 이것을 할 수 있기를 정말로 원합니다. 백엔드 / 스택 프로그래머로서 이상적으로 JS를 캡슐화하고 (이상적으로) 프런트 엔드 팀이 원하는대로 이것을 쓸 수있게하고 싶습니다. 간단히 말해서 로딩을 처리하십시오 (백엔드 개발에서 Frond End Dev 로의 "여기서 phtml은 여기에서 js 파일, 종속 라이브러리 및 블록에 대한 CSS를 원하는 경우 테마에서 재정의하십시오").

이것은 __construct자산 시스템에 주입 된 의존성 이있는 방법을 제안합니다 . 그러나이 작업을 수행 할 수는 없지만 Alan Storms 빠른 기사에서 확인 된 것 같습니다 .Magento Quickies : Magento 2 : 프로그래밍 방식으로 프런트 엔드 자산 파일 추가

오프 기호 참고 "그래서 그들과 함께 자신의 프론트 엔드 자산을 가지고 블록을 생성하는 어떤 생각이 창 밖입니다." ... 버머 :(

시간을내어 읽어 주셔서 감사합니다 . 답변을 기다리겠습니다.

PS> 분명히 이것은 StackExchange이므로 답변을 달성하려는 최선의 과정으로 표시합니다 (특정 리소스로드 차단).하지만 게시물의 맨 아래에 모든 답변을 참조로 나열하려고 노력할 것입니다 토론에 추가하거나 확실한 솔루션을 제안하십시오!

— 고니 디지털
소스

js의 경우 magento 2가을 사용하기 때문에 쉬워야합니다 require.js.
따라서 필요할 때 즉시 JS를 포함시킬 수 있습니다.

블록은 템플릿에 의해 (대부분의 경우) 렌더링되어야합니다.
따라서 템플릿에 이것을 추가해야합니다.

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

이제 view/adminhtml|frontend/web/js/filename_here.js모든 js 코드가있는 곳에 js 파일을 만드십시오 .

require.js 요청시 파일을 가져 오는 방법을 알게됩니다.

CSS 파일의 경우 가능한지 모르겠습니다.
CSS 파일은 head페이지 의 섹션으로 이동해야 하지만 예를 들어 cms 페이지의 내용 안에 블록이있는 경우 cms 페이지 {{block class="..." template="..."}}의 내용을 처리해야 할 때 해당 지점까지의 html이 이미 렌더링됩니다 따라서 PHP를 통해 헤드 블록에 다른 것을 추가 할 수 없습니다. 템플릿에 템플릿을 추가하려고 할 수 <style...있지만 원하는 것은 아닙니다.

— 마리우스
소스

감사합니다 Marius, 나는 위에 나열된 possabilities 중 하나로서 requireJS 경로를 탐색하고 있지만 consise 예제에 감사드립니다! 그러나 CSS 문제에 대한 해결책을 제공하지는 않지만 Magento의 Less 컴파일러 방식으로 인해 음소거가 될 수 있습니다. 또한 다소 추상적이지만 requireJS를 사용하여 JS를로드 할 수 있다고 가정합니다.이 스타일 시트에 대한 링크를 DOM에 추가 할 수 있습니다.

— cygnus digital

실제로 requirejs 페이지에서 RequireJS로 CSS를로드하는 방법을 찾을 수 있습니다! : requirejs.org/docs/faq-advanced.html#css

— cygnus digital

@cygnusdigital. 좋은. 그래서 문제가 해결되었습니다 :)

— Marius

안녕하세요 Marius, 예, 아니오, 솔루션에 대한 훌륭한 후보이며, 요구 사항에 부합하므로 의견을 보내 주셔서 감사하지만 토론과 대안을 찾고 있습니다. 어쩌면 그저 공룡 일지 모르지만 생성자 내에서 JS / CSS를로드하는 것이 더 낫다고 생각합니다. "블록이 조립 / 포함 된 경우이를 헤드에 추가하십시오." : DI는 head.additional 블록을 조건부로 추가 할 수 있는지 궁금합니다. (즉, 블록 생성자 단계에서 내 모듈에서 head.additional로 헤드 블록을 추가하십시오).

— cygnus digital

레이아웃 파일을 통해 추가 된 일반 블록 으로이 작업을 수행 할 수 있지만 설명했듯이 {{block}}지시문을 통해 페이지 내용에 포함 된 블록에 대해서는이 작업을 수행 할 수 없습니다 . 블록 클래스가 인스턴스화 될 때 헤드 섹션이 이미 렌더링되기 때문입니다.

— Marius

블록 특정 JS (및 CSS)를 추가하는 방법-_right_ 방법?