>  기사  >  웹 프론트엔드  >  템플릿 엔진 Jade 기반 애플리케이션에 대한 자세한 설명

템플릿 엔진 Jade 기반 애플리케이션에 대한 자세한 설명

小云云
小云云원래의
2017-12-14 09:06:421732검색

이 글에서는 에디터가 템플릿 엔진 Jade를 기반으로 한 애플리케이션에 대해 자세히 설명할 예정입니다. 이 애플리케이션은 좋은 참고 가치가 있으며 모든 분들께 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

유용한 기호:

| 세로 막대 뒤의 문자는 그대로 출력됩니다. 점은 다음 레벨의 모든 문자가 그대로 출력되며 더 이상 인식되지 않음을 의미합니다. (|의 업그레이드 버전으로, 일괄 처리 가능) include는 외부 파일을 참조한다는 뜻입니다

대시(-)는 뒤에 오는 문자가 단지 코드 조각임을 나타냅니다(|와의 차이점은 | 뒤의 내용이 표시되지만 대시 후에는 직접 표시되지 않습니다!

include


애플리케이션은 변수를 호출하여 연산을 수행합니다

p의 클래스

'-' 애플리케이션

직접 참조 변수

span#{a}와span=a는 동일한 효과를 갖습니다.

jade

jade의 for 루프:

const jade = require('jade');
console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))

js 파일:

-for(var i=0;i<arr.length;i++)
 p=arr[i]
실행 결과:

'!'

console.log(jade.renderFile(&#39;./views/11.jade&#39;,{pretty:true,name:&#39;singsingasong&#39;,
 arr:[&#39;aaa&#39;,&#39;bbb&#39;,&#39;ccc&#39;,&#39;ddd&#39;]
}));

실행 결과 :

jade의 if...else...

html
 head
 body
 p(class=&#39;1&#39;)!=content
 p(class=&#39;2&#39;)

사례 설명

html
 head
 body
 -var a=19;
 if(a%2==0)
  p(style={background:&#39;red&#39;}) 偶数
 else
  p(style={background:&#39;green&#39;}) 奇数


포괄적인 것

팁: 이전 jade 파일에서는 DOCTYPE을 작성하지 않았습니다. 여기에


를 추가합니다. 실행 결과는 파일을 성공적으로 읽고 쓰면 'success'가 출력됩니다. '로 반환됩니다.

관련 권장 사항:

Jade_html/css_WEB-ITnose 알아보기


node+express+jade ​​​​간단한 website_node.js 만들기 가이드

Nodejs Express 프레임워크는 ejs 템플릿과 jade 템플릿을 모두 하나로 사용합니다. 프로젝트_ node.js

위 내용은 템플릿 엔진 Jade 기반 애플리케이션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.