예쁜 깔끔한가? A Jade Tutorial for Beginners

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

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

<span><span><span><div</span> class<span>="movie-card"</span> id<span>="oceans-11"</span>></span>
</span>  <span><span><span><h1</span> class<span>="movie-title"</span>></span>Ocean's 11<span><span></h1</span>></span>
</span>  <span><span><span><img</span> src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul</span> class<span>="genre-list"</span>></span>
</span>    <span><span><span><li</span>></span>Comedy<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Thriller<span><span></li</span>></span>
</span>  <span><span><span></ul</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(src="/img/oceans-11.png")
  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</span> class<span>="movie-card"</span> id<span>="oceans-11"</span>></span>
</span>  <span><span><span><h1</span> class<span>="movie-title"</span>></span>Ocean's 11<span><span></h1</span>></span>
</span>  <span><span><span><img</span> src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul</span> class<span>="genre-list"</span>></span>
</span>    <span><span><span><li</span>></span>Comedy<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Thriller<span><span></li</span>></span>
</span>  <span><span><span></ul</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(src="/img/oceans-11.png")
  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<=x; i++) {
      li Hello
    - }

로그인 후 복사

Codepen 에서이 예를 봅니다

결론

우리는 jade에 대해 아무것도 알지 못하는 것에서 아름다운 모듈 식 영화 카드를 만들었습니다. Jade에는 더 많은 것이 있지만, 물건을 단순하게 유지하기 위해 몇 가지 개념을 윤활했습니다. 그래서이 튜토리얼이 당신의 호기심을 더 많이 배우기를 바랍니다.

중요한 참고 : 일부 여러분 중 일부가 알고 있듯이, Jade는 소프트웨어 상표 주장으로 인해 Pug로 이름이 바뀌 었습니다. 앞으로 Jade에 관한 기사는 새 이름 "Pug"또는 "Pugjs"를 사용할 것입니다. 초보자를위한 Jade 튜토리얼 에 대한 자주 묻는 질문 (FAQ) jade 란 무엇이며 웹 개발에서 중요한 이유는 무엇입니까?

PUG라고도하는 Jade는 HAML의 영향을 많이받는 고성능 템플릿 엔진이며 Node.js 및 브라우저 용 JavaScript로 구현됩니다. 개발자가 훨씬 간결한 방식으로 HTML 템플릿을 작성할 수있는 깨끗하고 우아한 구문을 제공합니다. Jade는 HTML 코드를 작성하는 데 소요되는 시간을 줄이고 개발 프로세스를보다 효율적으로 만들기 때문에 웹 개발에서 중요합니다. 또한 동적 코드를 지원합니다. 즉, HTML을 렌더링하면서 평가되는 변수 및 표현식을 포함시킬 수 있습니다.

Jade를 설치하려면 어떻게해야합니까?

Jade를 설치하려면 노드가 필요합니다. 컴퓨터에 JS 및 NPM (Node Package Manager)이 설치되었습니다. 일단 있으면 터미널 또는 명령 프롬프트에서 npm install jade -g를 실행하여 시스템에 전 세계적으로 Jade를 설치할 수 있습니다. 이렇게하면 컴퓨터의 모든 디렉토리에서 jade를 사용할 수 있습니다.

html을 Jade로 변환하는 방법?

html을 Jade로 변환하거나 html2jade.org와 같은 온라인 도구를 사용할 수 있습니다. . 수동으로 수행하려면 Jade 구문과 HTML에 어떻게 매핑되는지 이해해야합니다. 예를 들어, HTML 태그는 Jade 요소가되고 HTML 속성은 Jade 속성 등이됩니다. 온라인 도구는이 프로세스를 자동화 할 수 있지만 기본 변환 규칙을 이해하는 것이 여전히 중요합니다.

Jade와 HTML의 주요 차이점은 무엇입니까?

Jade와 HTML의 주요 차이점은 그들의 주요 차이점이 있습니다. 통사론. Jade는 들여 쓰기를 사용하여 중첩 요소를 나타내며 닫는 태그가 필요하지 않으므로 HTML보다 간결합니다. 그러나 HTML은 더 널리 사용되고 이해되고 일부 개발자는 명시 적 마감 태그와 압입 규칙 부족을 읽고 이해하기 쉽다는 것을 알게됩니다.

Jade에서 변수를 어떻게 사용합니까?

변수 Jade에서 - -Syntax를 사용하여 정의 할 수 있습니다. 예를 들어 - var title = 'home'은 'home'값의 이름이 지정된 변수를 정의합니다. 그런 다음 #{}로 접두사로 Jade 템플릿 에서이 변수를 사용할 수 있습니다. 예를 들어, h1 = 제목은 html에서

home

로 렌더링됩니다. Jade Templates에서 JavaScript를 사용할 수 있습니까?

예, Jade Templates에서 JavaScript를 사용할 수 있습니다. Jade는 변수, 표현식, 제어 구조 (IF-ELSE 명령문 및 루프) 및 기능을 포함한 다양한 JavaScript 구성을 지원합니다. Jade 템플릿에 JavaScript 코드를 포함 시키려면 -.