413236-3158 / 3079-5158
Subaru, Honda, Suzuki, Toyota, Mitsubishi, Nissan

pug 예제

Pug의 가장 강력한 기능 중 하나는 인라인 자바 스크립트를 사용하여 HTML을 쉽게 동으로 만들 수있는 기능입니다. 몇 가지 예를 살펴보겠습니다: 좋아, 이제 HTML 코드가 매우 깔끔한 방식으로 작성되었으므로 이해하기 쉽지만 확장하여 일반 클래스 및 데이터 속성을 추가해 보겠습니다. 예를 들어 링크 태그를 사용하자: 프로그래밍 언어 파이썬처럼, Pug는 이 예제와 같이 들여쓰기 또는 공백으로 작동합니다: 결과적으로 퍼그 블록과 퍼그 엔진에서 얻은 정리를 사용하는 조직은 Pug와 같은 템플릿 엔진에서 얻은 속도를 높입니다. 디버깅, 당신은 오류에 대한 약간의 기회와 믹스를 사용하여 빠르게 개발할 수 있으며, 논리와 태그 사이의 좋은 분리를 제공합니다. 예를 들어 Angular와 같은 클라이언트 측 프레임 워크와 함께 사용할 수있는 완벽한 조합입니다. 마음에 들지 않는 것은 무엇입니까? 그것을 시도, 그것은 좋은. 이미 일반 HTML을 작성하고 특성을 지정할 수 있으므로 스타일 시트를 추가하고 자바 스크립트 파일을 가져 오겠습니다. 이렇게 하려면 일반 html 태그와 마찬가지로 스크립트 및 스타일 속성을 동일한 방식으로 전달합니다. Express는 아래와 같이 모듈을 내부적으로 로드합니다(위의 예참조). 당신은 이전 템플릿 예제에서 발견 확장 선언, Pug는 단지 마스터 보기와 의 전체 무리를 갖는 것처럼, 웹 뷰를 구축하는 모듈 식 접근 방식을 달성하는 데 사용할 수있는 확장 명령을 제공하여 HTML 구조를 상속 할 수 있습니다 마스터 뷰를 확장하는 하위 보기입니다.

Pug.js, 그 이름에서와 같이 자바 스크립트 라이브러리입니다. 따라서 브라우저 내부 또는 node.js에서 실행할 수 있습니다. 여기서는 node.js를 사용하여 몇 가지 예제를 보여 줍니다. 아직도 이유를 묻는가? 표준 HTML 대신 템플릿 엔진을 사용하는 것을 볼 수 있듯이 코드에 조직과 일관성을 도입할 수 있는 좋은 방법입니다. 이렇게 하면 Pug가 더 깨끗한 코드를 작성하는 데 도움을 주므로 작업을 수행하는 것이 지루하지 않습니다. 심지어 파이썬, 루비, 노드와 같은 다른 언어와 함께 작동, ExpressJS 예제를 살펴, 그것은 그것을 사용하기 위해 너무 죽은 간단합니다. 지금까지 우리는 인라인 자바 스크립트 코드를 보았지만 날 믿어, 당신은 그것을 사용하여 강건한 것입니다. 대신 데이터는 모든 소스에서 제공될 수 있으며 본질적으로 동적일 수 있습니다. 따라서 전자 메일 서버와 같은 응용 프로그램을 실행하는 동안 일부 이벤트가 발생하면 사용자 데이터가 하드 코딩된 컴파일된 전자 메일 코드를 사용하여 사용자에게 해당 전자 메일을 보낼 수 있도록 하려고 합니다. 여기, 퍼그 – cli당신을 도울 수 없습니다. 퍼그 패키지를 사용하여 퍼그 코드를 즉석에서 HTML로 컴파일해야합니다.

우리가 여기에서 살펴 본 특징은 정말 빙산의 일각입니다! 전체 사양에 대 한 체크 아웃 PugJS.org – 시작 하기. 퍼그 (이전의 비취)는 HTML을 작성하는 작업을 단순화하는 전처리기입니다. 또한 자바 스크립트 개체, 조건부, 루프, mixins 및 템플릿과 같은 많은 기능을 추가합니다. 구문은 틀림없이 읽을 수있는 훨씬 깨끗하며 많은 HTML (특히 부트 스트랩, 파운데이션 등)으로 작업 할 때 실시간 절약 이 될 수 있습니다. 그런 다음 index.pug 파일을 렌더링하는 경로를 만듭니다. 뷰 엔진 속성이 설정되지 않은 경우 뷰 파일의 확장을 지정해야 합니다. 그렇지 않으면 생략할 수 있습니다. 이 이름은 2016년 프로젝트가 버전 2를 출시했을 때 상표 문제로 인해 Jade에서 Pug로 변경되었습니다. 당신은 여전히 비취를 사용할 수 있습니다, 일명 퍼그 1.0, 하지만 앞으로, 그것은 Pug를 사용하는 것이 가장 좋습니다 2.0 이제 퍼그의 기능 풍부한 부분에, 이 멋진 기능을 사용하면 매우 빠르게 html의 재사용 블록을 만들 수 있습니다. 프로젝트 구조를 깨끗하게 유지하려면 mixins를 분리된 파일에 배치하고 필요한 경우에만 로드해야 합니다.

일부 퍼그 구문을 들여다 보고 일반 HTML과 비교할 수 있습니다. 포함하면 한 Pug 파일의 내용을 다른 Pug 파일로 삽입할 수 있습니다. 당신이해야 할 모든 다음과 같이, 메인 퍼그 파일에 포함 지시문을 추가하는 것입니다 :이 발언 섹션은 또한 퍼그 내에서 큰 주제를 언급하고, 관련 주제에 밖으로 연결해야합니다.

Comments are closed.