'대서양'테마를 사용하여 Shopify의 페이지에 대한 세로 탭을 만드는 작업을하고 있습니다. 이 테마는 기본적으로 세로 탭이 없기 때문에 외부 JS 및 CSS "jquery-jvert-tabs"를 사용했습니다.Shopify에 사용자 정의 CSS 및 JS 추가
JS 및 CSS 파일을 애셋으로 업로드하는 경우 내 질문에 JS 및 CSS 파일을 애셋으로 업로드하면 어떻게 사용하고 싶은 페이지에 링크하고 어떻게 사용합니까? 특정 스타일 요소도 사용할 수 있습니까?
단순히 자산 폴더에 filename.js 파일을 업로드합니다. 그런데
{{ 'filename.js' | asset_url | script_tag }}
, 당신은 파일 이름을 변경하고 .liquid 확장을
filename.js.liquid
행운을 추가해야합니다 :
다음 섹션하여 theme.liquid머리에 다음 드롭!
정확하게 이해하면 asset_url filter이 당신이 찾고있는 것입니다.
{{ 'script.js' | asset_url | script_tag }}
을 그리고 CSS 파일 :
가 .liquid 파일에 JS 파일을 포함하려면 사용{{ 'style.css' | asset_url | stylesheet_tag }}
@ Steph-Sharp에서 업데이트 해 주셔서 감사합니다.이 파일을 테마가 아닌 "페이지"에 포함하려고했습니다. asset_url을 사용해 보았지만 거기서 작동하지 않습니다 ... – gagneet
@gagneet 모든 .liquid 파일에서 'asset_url' 필터를 사용할 수 있으므로 page.liquid에서 제대로 작동합니다. 그래도 문제가 있다면 코드 일부를 게시 할 수 있습니다. –
전역 네임 스페이스를 오염시키지 않으려면 JavaScript 또는 CSS를 특정 영역으로 제한 할 수 있습니다.
Shopify는 간단한 if 문을 페이지 핸들과 함께 사용합니다 (www.foo.com/abcd/bar의 경우 "bar"가 핸들이됩니다).
{% if page.handle == "bar" %}
{{ 'your_custom_javascript.js' | asset_url | script_tag }}
{{ 'your_custom_css.css' | asset_url | stylesheet_tag }}
{% endif %}
이것은 특정 페이지를 더 작게 변경하려는 경우 매우 유용합니다.
'.liquid' 확장자를 추가하면 어떤 이점이 있습니까? – Ronnie
@ r3wt 오, 좋아. 이 경우 OS 전체가'.liquid' 확장자 여야합니다. – Ronnie
@Ronnie .liquid 확장 프로그램을 사용하면 js 및 css 파일에서 액체를 사용할 수 있습니다. – JCharette