초보자를위한 Jade 튜토리얼

예쁜 깔끔한가?

Codepen 에서이 예를 봅니다 그러나 여기서 멈추지 않습니다. Jade는 ID 및 클래스에 특별한 속기를 제공하여 친숙한 표기법을 사용하여 마크 업을 더욱 단순화합니다.

Codepen 에서이 예를 봅니다 보시다시피, Jade는 CSS 선택기를 작성할 때 이미 익숙한 것과 동일한 구문을 사용하므로 클래스를 더 쉽게 발견 할 수 있습니다. 텍스트 블록 단락 태그가 있고 큰 텍스트 블록을 놓고 싶다고 가정 해 봅시다. Jade는 모든 줄의 첫 번째 단어를 HTML 태그로 취급합니다. 이 기사의 첫 번째 코드 예제에서 무고한 기간을 발견했을 것입니다. 태그 후 기간 (전체 정지) 추가는 해당 태그 내부의 모든 것이 텍스트이고 Jade는 각 줄의 첫 번째 단어를 HTML 태그로 처리하지 않음을 나타냅니다.

<span><span><span><div> class<span>="movie-card"</span> id<span>="oceans-11"</span>>
  <span><span><span><h1 id="class-span-movie-title-span-gt"> class<span>="movie-title"</span>></h1></span>Ocean's 11<span><span></span>></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="/img/oceans-11.png" class="lazy" alt="초보자를위한 Jade 튜토리얼" > src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul> class<span>="genre-list"</span>></ul></span>
</span>    <span><span><span><li>></li></span>Comedy<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Thriller<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

Codepen 에서이 예를 봅니다 그리고 포인트를 집으로 운전하기 위해,이 예제에서 P 태그 이후 기간을 제거하려면, 컴파일 된 HTML은“I”라는 단어로“I”를 오프닝 태그로 취급합니다. 사례, 그것은 태그가 될 것입니다

강력한 기능 이제 우리는 기본 사항을 다루었으므로 마크 업을 더 똑똑하게 만들 수있는 강력한 기능을 살펴 보겠습니다. 이 튜토리얼의 나머지 기능에서 다음 기능을 살펴 보겠습니다.

루프 javaScript 보간

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster()
  ul.genre-list
    li Comedy
    li Thriller

믹스 인

에서 JavaScript를 사용합니다 Jade는 JavaScript로 구현되므로 Jade에서 JavaScript를 사용하는 것이 매우 중요합니다. 예는 다음과 같습니다.

우리는 여기서 무엇을 했습니까?! 하이픈으로 라인을 시작함으로써 Jade Compiler에 JavaScript를 사용하려는 것을 나타냅니다. 예상대로 작동합니다. 위의 옥 코드를 html로 컴파일 할 때 얻을 수있는 것은 다음과 같습니다.

Codepen 에서이 예를 봅니다 코드가 출력을 직접 추가하지 않으면 하이픈을 사용합니다. JavaScript를 사용하여 Jade에서 무언가를 출력하려면 =입니다. 일련 번호를 보여주기 위해 위의 코드를 조정 해 봅시다.

및 voilà, 우리는 이제 일련 번호가 있습니다

Codepen 에서이 예를 봅니다 물론 이 경우 주문 목록이 훨씬 더 적합하지만 요점을 얻습니다. 이제 XSS와 HTML 이스케이프에 대해 걱정이되면 문서를 읽으십시오. 자세한 내용은

입니다.

루프 Jade는 우수한 루핑 구문을 제공하여 JavaScript에 의지 할 필요가 없습니다. 배열을 반복하자 :

그리고 이것은 다음과 같이 컴파일됩니다 :

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

Codepen 에서이 예를 봅니다 당신은 객체를 반복하고 루프를 사용하는 동안 사용할 수 있습니다. 자세한 내용은 문서를 확인하십시오.

보간 javaScript 가이 p = "hi there", profilename "과 같은 텍스트에 텍스트에 혼합하는 것이 짜증나게 될 수 있습니다. 어떻게 지내십니까?". Jade는이를위한 우아한 솔루션을 가지고 있습니까? 당신은 내기.

Codepen 에서이 예를 봅니다 는 깔끔하지 않습니까?

믹스 인 믹스 인은 기능과 같습니다. 매개 변수를 입력으로 취하고 마크 업을 출력으로 제공합니다. Mixin은 Mixin 키워드를 사용하여 정의됩니다

믹스 인이 정의되면 구문으로 믹스 인을 호출 할 수 있습니다.

<span><span><span><div> class<span>="movie-card"</span> id<span>="oceans-11"</span>>
  <span><span><span><h1 id="class-span-movie-title-span-gt"> class<span>="movie-title"</span>></h1></span>Ocean's 11<span><span></span>></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="/img/oceans-11.png" class="lazy" alt="초보자를위한 Jade 튜토리얼" > src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul> class<span>="genre-list"</span>></ul></span>
</span>    <span><span><span><li>></li></span>Comedy<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Thriller<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

는 다음과 같이 html을 출력 할 것입니다 :

모든 것을 합쳐

지금까지 배운 모든 것을 함께합시다. 영화 제목, 캐스트 (서브 어레이), 등급, 장르, IMDB 페이지 링크 및 영화 포스터의 이미지 경로가 포함 된 각 항목이 포함 된 멋진 영화가 있다고 가정 해 봅시다. 배열은 이와 비슷한 것으로 보입니다 (가독성을 위해 공백이 추가) :

우리는 10 편의 영화를 가지고 있으며 그들 각각에 대한 멋진 영화 카드를 만들고 싶습니다. 처음에는 IMDB 링크를 사용할 계획이 없습니다. 영화가 5 이상으로 평가되면 엄지 손가락을 부여합니다. 그렇지 않으면 엄지 손가락을 내립니다. 우리는 Jade의 모든 멋진 기능을 사용하여 다음을 수행하기 위해 모듈 식 코드를 작성합니다.

영화 카드의 믹스 인을 만듭니다

캐스트 목록을 반복하고 배우를 표시합니다. 우리는 장르와 똑같이 할 것입니다.

등급을 확인하고 엄지 손가락을 올리거나 엄지 손가락을 표시할지 여부를 결정하십시오. 영화 목록을 반복하고 믹스 인을 사용하여 영화 당 하나의 카드를 만듭니다.

따라서 먼저 믹스 인을 만들어 봅시다

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster()
  ul.genre-list
    li Comedy
    li Thriller

거기에는 많은 일이 일어나고 있지만 익숙해 보인다 - 우리는이 튜토리얼 에서이 모든 것을 다루었 다. 이제 우리는 단지 우리의 믹스 인을 루프에 사용해야합니다 :

<.> 그게 다야. 우아합니까? 최종 코드는 다음과 같습니다.

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

그리고 다음은 컴파일 된 html : 입니다

하지만 잠시만 기다리십시오. 영화 제목을 클릭 할 때 영화의 IMDB 페이지로 이동하려면 어떻게해야합니까? 우리는 믹스 인에 한 줄을 추가 할 수 있습니다

- var x = 5;
div
  ul
    - for (var i=1; i

<on> Codepen  에서이 예를 봅니다
<h2 id="결론"> 결론 </h2>
<knowing> 우리는 jade에 대해 아무것도 알지 못하는 것에서 아름다운 모듈 식 영화 카드를 만들었습니다. Jade에는 더 많은 것이 있지만, 물건을 단순하게 유지하기 위해 몇 가지 개념을 윤활했습니다. 그래서이 튜토리얼이 당신의 호기심을 더 많이 배우기를 바랍니다. <p>
<as> 중요한 참고 : 일부 여러분 중 일부가 알고 있듯이, Jade는 소프트웨어 상표 주장으로 인해 Pug로 이름이 바뀌 었습니다. 앞으로 Jade에 관한 기사는 새 이름 "Pug"또는 "Pugjs"를 사용할 것입니다.<questions> 초보자를위한 Jade 튜토리얼 에 대한 자주 묻는 질문 (FAQ)



<ade> jade 란 무엇이며 웹 개발에서 중요한 이유는 무엇입니까?  <h2 id="PUG라고도하는-Jade는-HAML의-영향을-많이받는-고성능-템플릿-엔진이며-Node-js-및-브라우저-용-JavaScript로-구현됩니다-개발자가-훨씬-간결한-방식으로-HTML-템플릿을-작성할-수있는-깨끗하고-우아한-구문을-제공합니다-Jade는-HTML-코드를-작성하는-데-소요되는-시간을-줄이고-개발-프로세스를보다-효율적으로-만들기-때문에-웹-개발에서-중요합니다-또한-동적-코드를-지원합니다-즉-HTML을-렌더링하면서-평가되는-변수-및-표현식을-포함시킬-수-있습니다"> PUG라고도하는 Jade는 HAML의 영향을 많이받는 고성능 템플릿 엔진이며 Node.js 및 브라우저 용 JavaScript로 구현됩니다. 개발자가 훨씬 간결한 방식으로 HTML 템플릿을 작성할 수있는 깨끗하고 우아한 구문을 제공합니다. Jade는 HTML 코드를 작성하는 데 소요되는 시간을 줄이고 개발 프로세스를보다 효율적으로 만들기 때문에 웹 개발에서 중요합니다. 또한 동적 코드를 지원합니다. 즉, HTML을 렌더링하면서 평가되는 변수 및 표현식을 포함시킬 수 있습니다.  </h2> Jade를 설치하려면 어떻게해야합니까?  <h3 id="Jade를-설치하려면-노드가-필요합니다-컴퓨터에-JS-및-NPM-Node-Package-Manager-이-설치되었습니다-일단-있으면-터미널-또는-명령-프롬프트에서-npm-install-jade-g를-실행하여-시스템에-전-세계적으로-Jade를-설치할-수-있습니다-이렇게하면-컴퓨터의-모든-디렉토리에서-jade를-사용할-수-있습니다"> Jade를 설치하려면 노드가 필요합니다. 컴퓨터에 JS 및 NPM (Node Package Manager)이 설치되었습니다. 일단 있으면 터미널 또는 명령 프롬프트에서 npm install jade -g를 실행하여 시스템에 전 세계적으로 Jade를 설치할 수 있습니다. 이렇게하면 컴퓨터의 모든 디렉토리에서 jade를 사용할 수 있습니다. </h3> <p> html을 Jade로 변환하는 방법?  </p> html을 Jade로 변환하거나 html2jade.org와 같은 온라인 도구를 사용할 수 있습니다. . 수동으로 수행하려면 Jade 구문과 HTML에 어떻게 매핑되는지 이해해야합니다. 예를 들어, HTML 태그는 Jade 요소가되고 HTML 속성은 Jade 속성 등이됩니다. 온라인 도구는이 프로세스를 자동화 할 수 있지만 기본 변환 규칙을 이해하는 것이 여전히 중요합니다.  <h3 id="Jade와-HTML의-주요-차이점은-무엇입니까"> Jade와 HTML의 주요 차이점은 무엇입니까?  </h3> Jade와 HTML의 주요 차이점은 그들의 주요 차이점이 있습니다. 통사론. Jade는 들여 쓰기를 사용하여 중첩 요소를 나타내며 닫는 태그가 필요하지 않으므로 HTML보다 간결합니다. 그러나 HTML은 더 널리 사용되고 이해되고 일부 개발자는 명시 적 마감 태그와 압입 규칙 부족을 읽고 이해하기 쉽다는 것을 알게됩니다.  <p> Jade에서 변수를 어떻게 사용합니까? </p> <h3 id="변수-Jade에서-Syntax를-사용하여-정의-할-수-있습니다-예를-들어-var-title-home-은-home-값의-이름이-지정된-변수를-정의합니다-그런-다음-로-접두사로-Jade-템플릿-에서이-변수를-사용할-수-있습니다-예를-들어-h-제목은-html에서-h-home-h-로-렌더링됩니다"> 변수 Jade에서 - -Syntax를 사용하여 정의 할 수 있습니다. 예를 들어 - var title = 'home'은 'home'값의 이름이 지정된 변수를 정의합니다. 그런 다음 #{}로 접두사로 Jade 템플릿 에서이 변수를 사용할 수 있습니다. 예를 들어, h1 = 제목은 html에서 <h1> home </h1>로 렌더링됩니다.  </h3> Jade Templates에서 JavaScript를 사용할 수 있습니까?  <p> 예, Jade Templates에서 JavaScript를 사용할 수 있습니다. Jade는 변수, 표현식, 제어 구조 (IF-ELSE 명령문 및 루프) 및 기능을 포함한 다양한 JavaScript 구성을 지원합니다. Jade 템플릿에 JavaScript 코드를 포함 시키려면 -. </p> <h3 id="Jade에-부분을-포함시키는-방법은-무엇입니까"> Jade에 부분을 포함시키는 방법은 무엇입니까?  </h3> Jade 코드의 재사용 가능한 덩어리를 다른 Jade 템플릿에 포함시킬 수 있습니다. 포함 키워드 사용. 예를 들어, 포함 헤더는 템플릿의 해당 시점에 헤더. 제이드 파일의 내용을 포함합니다.<comment> jade에서 댓글을 달리는 방법은 무엇입니까? <h3> </h3> jade의 댓글은 //를 사용하여 추가 할 수 있습니다. 예를 들어, // 댓글은 Jade 코드에 주석을 추가합니다. 이 주석은 렌더링 된 HTML에 포함되지 않습니다.  <p> Jade의 텍스트를 어떻게 형식화합니까?  </p> jade의 텍스트는 HTML 유사 태그를 사용하여 포맷 할 수 있습니다. 예를 들어, p 이것은 일부 텍스트가 <p>로 렌더링됩니다. 이것은 html의 일부 텍스트 </p>입니다. 다음과 같이 텍스트를 접두사하여 Jade에서 Markdown 구문을 사용할 수 있습니다.  <h3 id="Jade의-오류를-어떻게-처리합니까"> Jade의 오류를 어떻게 처리합니까?  </h3> Jade의 오류는 JavaScript에서 Try-Catch 블록을 사용하여 처리 할 수 ​​있습니다. 암호. Jade 템플릿을 렌더링하는 동안 오류가 발생하면 Jade는 적절하게 잡아서 처리 할 수 ​​있다는 예외를 던집니다.</comment></ade></questions></as></p></knowing></on>

위 내용은 초보자를위한 Jade 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!