집

웹 프론트엔드

JS 튜토리얼

노드 프런트엔드 템플릿 엔진의 Jade 태그 사용에 대한 자세한 설명

php中世界最好的语言

May 22, 2018 am 10:27 AM

node 엔진

이번에는 노드 프런트엔드 템플릿 엔진에서 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. 002

3. 003
4. 004

jade에서는 어떻게 작성해야 할까요? 여기서 jade는 두 가지 방법을 제공합니다. 첫 번째는 각 줄 앞에 |와 공백을 추가하는 것입니다.
p
 | 1. 001
 | 2. 002
 | 3. 003
 | 4. 004
로그인 후 복사
두 번째 방법은 다음과 같습니다. 이름 뒤에는 . 그런 다음 이 태그 아래의 콘텐츠는 jade에 의해 코드 세그먼트로 구문 분석됩니다.

로그인 후 복사

지금 일부 학생들은 이 두 가지 방법의 차이점이 무엇인가요? 여기서는 태그 혼합에 대해 이야기해야 합니다. 이러한 요구 사항이 있는 경우 위 코드에서 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>&lt ;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="http://www.php.cn/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.

로그인 후 복사

컴파일 결과는 다음과 같습니다:

이것은 제목입니다.< ;p id="j-text" class="text">이것은 단락입니다.

等等，那我要是想添加多个 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

로그인 후 복사

编译结果为：

index.html

那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：

input(type="checkbox", name="all", checked, value="全选")

로그인 후 복사

编译结果为：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7465

Cakephp 튜토리얼

1376

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

nvm에서 노드를 삭제하는 방법 Dec 29, 2022 am 10:07 AM

nvm을 사용하여 노드를 삭제하는 방법: 1. "nvm-setup.zip"을 다운로드하여 C 드라이브에 설치합니다. 2. "nvm -v" 명령을 통해 환경 변수를 구성하고 버전 번호를 확인합니다. install" 명령 노드 설치; 4. "nvm uninstall" 명령을 통해 설치된 노드를 삭제합니다.

Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법 Mar 28, 2023 pm 07:28 PM

파일 업로드를 처리하는 방법은 무엇입니까? 다음 글에서는 Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

Node의 프로세스 관리 도구 'pm2”에 대한 심층 분석 Apr 03, 2023 pm 06:02 PM

이 기사에서는 Node의 프로세스 관리 도구인 "pm2"를 공유하고 pm2가 필요한 이유, pm2 설치 및 사용 방법에 대해 설명합니다. 모두에게 도움이 되기를 바랍니다!

PI 노드 교육 : PI 노드 란 무엇입니까? Pi 노드를 설치하고 설정하는 방법은 무엇입니까? Mar 05, 2025 pm 05:57 PM

Pinetwork 노드에 대한 자세한 설명 및 설치 안내서이 기사에서는 Pinetwork Ecosystem을 자세히 소개합니다. Pi 노드, Pinetwork 생태계의 주요 역할을 수행하고 설치 및 구성을위한 전체 단계를 제공합니다. Pinetwork 블록 체인 테스트 네트워크가 출시 된 후, PI 노드는 다가오는 주요 네트워크 릴리스를 준비하여 테스트에 적극적으로 참여하는 많은 개척자들의 중요한 부분이되었습니다. 아직 Pinetwork를 모른다면 Picoin이 무엇인지 참조하십시오. 리스팅 가격은 얼마입니까? PI 사용, 광업 및 보안 분석. Pinetwork 란 무엇입니까? Pinetwork 프로젝트는 2019 년에 시작되었으며 독점적 인 Cryptocurrency Pi Coin을 소유하고 있습니다. 이 프로젝트는 모든 사람이 참여할 수있는 사람을 만드는 것을 목표로합니다.

pkg를 사용하여 Node.js 프로젝트를 실행 파일로 패키징하는 방법에 대해 이야기해 보겠습니다. Dec 02, 2022 pm 09:06 PM

nodejs 실행 파일을 pkg로 패키징하는 방법은 무엇입니까? 다음 기사에서는 pkg를 사용하여 Node 프로젝트를 실행 파일로 패키징하는 방법을 소개합니다. 도움이 되기를 바랍니다.

npm node gyp가 실패하는 경우 수행할 작업 Dec 29, 2022 pm 02:42 PM

"node-gyp.js"와 "Node.js"의 버전이 일치하지 않아 npm node gyp가 실패했습니다. 해결 방법: 1. "npm 캐시 clean -f"를 통해 노드 캐시를 지웁니다. 2. "npm install - g n" n 모듈을 설치합니다. 3. "n v12.21.0" 명령을 통해 "node v12.21.0" 버전을 설치합니다.

싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까? Feb 24, 2023 pm 07:33 PM

싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까? 다음 글에서는 Node를 사용하여 Single Sign-On 시스템을 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

Angular 및 Node를 사용한 토큰 기반 인증 Sep 01, 2023 pm 02:01 PM

인증은 모든 웹 애플리케이션에서 가장 중요한 부분 중 하나입니다. 이 튜토리얼에서는 토큰 기반 인증 시스템과 기존 로그인 시스템과의 차이점에 대해 설명합니다. 이 튜토리얼이 끝나면 Angular와 Node.js로 작성된 완벽하게 작동하는 데모를 볼 수 있습니다. 기존 인증 시스템 토큰 기반 인증 시스템으로 넘어가기 전에 기존 인증 시스템을 살펴보겠습니다. 사용자는 로그인 양식에 사용자 이름과 비밀번호를 입력하고 로그인을 클릭합니다. 요청한 후 데이터베이스를 쿼리하여 백엔드에서 사용자를 인증합니다. 요청이 유효하면 데이터베이스에서 얻은 사용자 정보를 이용하여 세션을 생성하고, 세션 정보를 응답 헤더에 반환하여 브라우저에 세션 ID를 저장한다. 다음과 같은 애플리케이션에 대한 액세스를 제공합니다.

See all articles

노드 프런트엔드 템플릿 엔진의 Jade 태그 사용에 대한 자세한 설명

제목입니다.

this is a title.

this is a title.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제