퍼그는 Node.js를 플랫폼을 위해 특별히 개발 된 강력하고, 유연하고 기능이 풍부한 HTML 템플릿 엔진이다. 퍼그는 옥에서 진화 이름이 변경되었습니다.
들여 쓰기하여 컴파일시, 태그가 질문을 폐쇄 고려할 필요가 없습니다, 절차 적 코드를 작성하는 방법 (라벨 사이의 중첩 관계를 표시). 당신은 코드를 작성의 속도를 가속화 할뿐만 아니라, 편리한 코드 재사용을 제공 할 수 있습니다.
장점 :
1 끝 태그 없음
2, 강제 들여 쓰기
3, 코드 재사용 및 유지 보수
네, 같은 레이블은 CSS 작성
퍼그 환경을 구축 :
1, Node.js를 다운로드의 NPM
2, 다운로드 흙, 명령 NPM 설치 흙-CLI -g
확인 :
/ ************************************************* ******* 재산 기본적인 사용 **************************************** ******************************* /
A (href를 = ' Baidu.com ' ) 바이 상당 -> <a href= "Baidu.com"> 바이 </a>를 A (클래스 = '버튼'은 HREF = "Baidu.com ') 바이 추천 > -에 해당합니다 <a class="button" href="baidu.com"> 바이 </a>를
표현의 JS 형태
// - 로깅 - VAR 인증 된 = true로 몸 ( 클래스 = 인증 된? ' Authed ' : ' 익명 ' ) 와 동일로 -> <신체 클래스 = " authed " > </ BODY>
여러 줄 특성
입력 ( 타입 = ' 체크 박스 ' 이름 = " 합의 " 체크 ) 于等价 -> <input 타입 = " 체크 박스 " NAME = " 계약 " 체크 = " 체크 " />
속성 삽입 :
- var에 URL은 = ' PUG - 더 test.html를 ' ; A (href를 = ' / ' + URL) 링크 | | - = URL ' https://example.com/ ' A (href를 = URL) 다른 링크는 동일합니다 -> <a href= "/pug-test.html"> 링크 </a>에 <a href= "https://example.com/"> 다른 링크 </a>에
부울 속성 :
입력 (유형 = ' 체크 박스 ' 검사 ) | | 입력 (유형 = ' 체크 박스 ' 확인 = 진정한 ) | | 입력 (유형 = ' 체크 박스 ' 확인 = 거짓 ) | | 입력 (타입 = ' 체크 박스 ' 체크 = 사실 로 .toString을 ()) 等价于 -> <입력 타입 = " 체크 박스 " 체크 = " 체크 "/> = <입력 타입 " 체크 박스 " 체크는 = " 체크 " /> <input 타입 = " 체크 박스 " /> <input 타입 = " 체크 박스 " 체크 = " 참 " />을
스타일 속성 :
style(스타일) 속성은 객체가 될 수있다 (다만 다른 일반적인 속성과 같은) 문자열을 할 수 있습니다
A (스타일 = {색상 : ' 빨간색 ' , 배경 : ' 녹색 ' })
等价于 ->
<a style= "color:red;background:green;"> </a>를
클래스 속성 :
class(클래스) 속성은 둘 이상의 클래스 이름을 포함하는 배열 될 수있다 (다만 다른 일반적인 속성 같은) 문자열을 할 수 있습니다
- var에 클래스 = [ ' foo는 ' , ' 바 ' , ' 바즈 ' ] A ( 클래스 = 클래스) | | // - class 속성은 병합 배열로 반복 될 수있다 a.bang ( 클래스 = 클래스의 클래스 = ' 빙 ' ]) 等价于 > - <a 클래스 = "foo에 바 바즈"> </a>를 <A 클래스 = " 쾅 foo는 바 바즈 빙 " >
또한 클래스 이름에 매핑 할 수 있습니다 true 또는 false 조건부 클래스를 사용할 때 유용 객체.
- var에 CURRENTURL = ' 에 대한 / ' A ( 클래스 = {활성 : CURRENTURL === ' / ' } HREF = ' / ' ) 홈 | | A ( 클래스 = {활성 : CURRENTURL === ' / 대한 ' } HREF = ' / 약 ' )에 대해 等价于 -> <a href= "/"> 홈 </a>을 <A 클래스 = " 활성화 " HREF = " /에 대해 " >
/ ************************************************* ****** 문자 ****************************************** ****************** /
클래스 리터럴 :
.ClassName과 클래스 구문을 정의 할 수 있습니다 : a.button 에 해당 -> <a 클래스 = "the Button">가 </A> 이 동작의 이름으로 DIV 태그의 사용을 고려하면 생략 그렇다면, 일반적인 있도록이다 : 레이블 이름 떨어져, 다음은 기본값입니다 .content 에 해당 ---> <DIV 클래스 = " 내용 " > </ DIV>은
ID 리터럴 :
#Idname ID 구문 정의 할 수 있습니다 : 번호 주 - 링크 에 해당를 -> <a id= "main-link"> </a>에 이 동작의 이름이 일반적인 있도록 같이 DIV 태그의 사용을 고려, 당신이 태그 이름을 생략하면 그래서 기본값 인 경우 : #content 에 해당 -> <div 언급 된 ID 위 = " 내용 " > </ DIV>