이번에는 노드 프런트엔드 템플릿 엔진에서 Jade 태그 사용에 대해 자세히 설명을 들고 왔습니다. 다음은 실제 사례입니다. 살펴보겠습니다. 1. 문서 선언
HTML 페이지 작성을 시작하면 먼저 DOCTYPE 문서 선언을 작성해야 합니다. 이제 일반적으로 HTML5 문서 선언 방법을 사용하므로 Jade에서는 어떻게 작성해야 할까요? jade에서 문서 선언을 작성하는 방법은 두 가지가 있습니다:
jade 파일에 직접 doctype html을 작성할 수 있습니다.
jade에서는 간단한 작성 방법을 제공하지만, (jade를 업그레이드한 후에는 이 방법이 필요한 것 같습니다.) -_-||| )
물론 jade는 기본적으로 다른 유형의 문서 선언도 지원합니다. 아래 옵션을 따르려면 doctype을 사용하세요. Jade는 기본적으로 다음을 지원합니다.
var doctypes = exports.doctypes = {
'5': '<!DOCTYPE html>',
'xml': '<?xml version="1.0" encoding="utf-8" ?>',
'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
'1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};doctype Default doctype default
예: XHTML 1.0 Strict 문서 선언을 작성하려면 다음과 같이 작성할 수 있습니다.
doctype strict
컴파일 결과는 다음과 같습니다.
코드 복사코드는 다음과 같습니다.
2, tag
jade 태그 작성은 매우 간단하며 단 한 단어입니다. 위 코드는 다음과 같이 컴파일됩니다. doctype html
html
head
title
body
로그인 후 복사
<!DOCTYPE html> <html> <head> <title></title> </head> <body></body> </html>
jade는 엄격한 들여쓰기를 사용하여 태그의 시작과 끝을 구분합니다. 기본값은 들여쓰기를 나타내는 2개의 공백입니다.
콘텐츠가 포함된 라벨을 작성하려면, 예를 들어 제목을 작성하려면 라벨 단어 뒤에 공백을 추가하고 내용을 따르기만 하면 됩니다.
h1 this is a title. p this is a paragraph.
편집 결과는 다음과 같습니다.
이것은 단락입니다.
때때로 출력해야 할 경우도 있습니다. 일부 특별히 형식화된 텍스트 또는 코드의 가독성을 향상시키기 위해 다음 효과가 표시되어야 합니다:
1. 001
2. 0023. 0034. 004
jade에서는 어떻게 작성해야 할까요? 여기서 jade는 두 가지 방법을 제공합니다. 첫 번째는 각 줄 앞에 |와 공백을 추가하는 것입니다.두 번째 방법은 다음과 같습니다. 이름 뒤에는 . 그런 다음 이 태그 아래의 콘텐츠는 jade에 의해 코드 세그먼트로 구문 분석됩니다.p | 1. 001 | 2. 002 | 3. 003 | 4. 004로그인 후 복사
p. 1. 001 2. 002 3. 003 4. 004
지금 일부 학생들은 이 두 가지 방법의 차이점이 무엇인가요? 여기서는 태그 혼합에 대해 이야기해야 합니다. 이러한 요구 사항이 있는 경우 위 코드에서 1 뒤에 강력한 태그를 추가해야 합니다.
우선 첫 번째 경우인 우리의 작성 방법에 대해 이야기해 보겠습니다.
p | 1. 001 strong aaa | 2. 002 | 3. 003 | 4. 004
두 번째 작성 방법이라면 다음과 같이 작성해야 합니다.
p. 1. 001 <strong>aaa</strong> 2. 002 3. 003 4. 004</p> <p style="text-align: left;">컴파일 결과는 다음과 같습니다. </p> <p style="text-align: left;"></p>< ;p><p style="text-align: left;"> 1. 001 </p> <strong>aaa</strong><blockquote style="text-align: left;"> 2. 002<p style="text-align: left;"> 3. 003<br> 4. 004<br></p><br><br><br><br></p>3. 속성 값</blockquote> <p style="text-align: left;"><span style="color: #ff0000"> <strong>h1 p etc. 우리는 보통 이런 태그에 id, class 속성을 작성하는데, 이것을 jade에서는 어떻게 작성해야 할까요? zen 코딩과 동일한 구문으로 다음과 같이 작성하면 됩니다: <a href="//m.sbmmt.com/wiki/169.html" target="_blank"><pre class="brush:php;toolbar:false">h1#id.class this is a title. p#j-text.text this is a paragraph.
等等，那我要是想添加多个 class 怎么办呢？这样办：
h1#id.class1.class2.class3 this is a title. p#j-text.text this is a paragraph.
编译结果为：
this is a title.
this is a paragraph.
什么？写 p 写烦了？那就不写咯。
#id.class #id.class1.class2 this is a p without tags.
编译结果为：
this is a p without tags.
这里要说明一下，在 jade 的语法里面，只有 p 标签能够省略不写.
说完了 id 和 class，我们再来说一下标签其他的属性应该怎么添加。jade 里添加其他属性和值的语法也和 zen coding 类似，我们需要在标签后面加上小括号()，然后按照(属性名=属性值)的格式写就好了，如果有多个属性，中间以逗号进行分割。
比如上面的 id 和 class 的写法我们就可以改写成：
h1(id="id", class="class") this is a title. p(id="j-text", class="text") this is a paragraph.
结果是一样的：
this is a title.
this is a paragraph.
说来说去还是这两个属性，烦了？那我们换一个吧：
a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html
编译结果为：
那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：
input(type="checkbox", name="all", checked, value="全选")
编译结果为：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 노드 프런트엔드 템플릿 엔진의 Jade 태그 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
