퍼그 HTML 템플릿 엔진 : 초보자 가이드-CSS 튜토리얼-php.cn

퍼그 HTML 템플릿 엔진 : 초보자 가이드 웹 디자이너 또는 개발자로서 우리는 모두 HTML에 대한 공정한 몫을 써야 할 것입니다. 그리고 이것은 가장 어려운 작업은 아니지만 종종 조금 지루하거나 반복적으로 느낄 수 있습니다. Pug HTML Preprocessor가 들어오는 곳입니다.

html도 정적입니다. 즉, 동적 데이터를 표시하려면 (예 : API에서 가져 오면) JavaScript 내부의 HTML 좀 맛이 나옵니다. 이것은 디버깅하고 유지하는 악몽 일 수 있습니다. 퍼그는 노드 및 브라우저 용 템플릿 엔진입니다. HTML로 컴파일하고 단순화 된 구문이있어 생산성을 높이고 코드를 읽을 수 있습니다. PUG는 재사용 가능한 HTML을 작성하고 데이터베이스 또는 API에서 데이터를 가져 오는 것을 쉽게 만들 수 있습니다. 이 안내서에서는 퍼그로 일어나고 달리는 방법을 보여 드리겠습니다. NPM에서 설치하여 기본 구문을 살펴보고 PUG에서 JavaScript를 사용하는 몇 가지 예를 살펴 보겠습니다. 마지막으로 PUG를 템플릿 엔진으로 사용하는 간단한 노드/익스프레스 프로젝트를 구축하여 PUG의 고급 기능을 탐색합니다. 키 테이크 아웃

이전에 Jade로 알려진 Pug는 HTML에 컴파일하는 템플릿 엔진입니다. 특히 동적 컨텐츠를 처리 할 때 클리너, 더 읽기 쉬운 코드를 작성하는 데 유용합니다. 는 동적 데이터의 HTML에 통합을 단순화하므로 작은 정적 사이트 나 최소한의 동적 콘텐츠에는 필요하지 않지만 데이터 중심 애플리케이션에 적합한 선택입니다. 설치에는 노드, NPM 및 PUG-CLI 패키지를 설정해야하며, 개발의 용이성을 위해 편집기에서 구문 강조 표시가 있습니다. Pug는 닫는 태그가없는 단순화 된 구문을 사용하고 HTML 문서를 구조화하기 위해 들여 쓰기에 의존하여 서면 코드의 양을 크게 줄일 수 있습니다. 는 동적 템플릿을위한 JavaScript 통합을 지원하여 퍼그 파일에서 변수, 반복 및 조건부를 직접 허용합니다. 튜토리얼은 노드/익스프레스 프로젝트에서 PUG를 사용하여 직원 디렉토리를 생성하여 템플릿 상속 및 재사용 가능한 코드를위한 믹스 인과 같은 고급 기능을 보여주는 실질적인 데모로 마무리됩니다.

퍼그는 무엇에 사용됩니까? 퍼그를보기 시작하기 전에 관련된 개념을 이해하기 위해 잠시 시간을 내겠습니다. 템플릿 엔진은 템플릿 (여러 언어 중 하나를 사용하여 작성할 수 있음)을 HTML로 컴파일하는 것을 담당하는 프로그램입니다. 템플릿 엔진은 일반적으로 외부 소스에서 데이터를 수신하여 컴파일하는 템플릿에 주입됩니다. 이것은 다음 다이어그램으로 설명됩니다. 퍼그 HTML 템플릿 엔진 : 초보자 가이드

신용 : Dreftymac, Tempengweb016, CC By-SA 3.0 이 방법을 사용하면 데이터를 기반으로 동적 요소를 정의하면서 정적 웹 페이지 요소를 재사용 할 수 있습니다. 또한 응용 프로그램 논리를 디스플레이 로직에서 격리 시켜서 우려 사항의 분리를 용이하게합니다. 사이트 또는 웹 애플리케이션이 데이터 중심 인 경우 템플릿 엔진의 혜택을 누릴 가능성이 더 높습니다 (예 : 직원 관리를위한 직원 디렉토리, 사용자가 구매할 수있는 다양한 제품을 나열하는 웹 스토어 또는 동적 사이트) 검색 기능. API에서 소량의 데이터를 가져 오는 경우 템플릿 엔진이 필요하지 않습니다 (이 경우 JavaScript의 기본 템플릿 문자열 만 사용할 수 있음) 또는 작은 정적 사이트를 만드는 경우 작은 역사 2015 년 상표 청구로 인해 이름을 변경해야 할 때까지 퍼그가 Jade라고 불렀다는 점도 주목할 가치가 있습니다. 이름 변경은 버전 2.0으로 적용되었습니다. 온라인에서 사용할 수있는 비취 관련 자료가 여전히 많이 있습니다. 그리고 그 중 일부는 여전히 유효하지만, 이름 변경이 주요 버전 범프와 일치한다는 사실은 Pug의 구문이 전임자와 비교하여 몇 가지 차이점, 감가 상징 및 제거가 있음을 의미합니다. 이것들은 여기에 문서화되어 있습니다.

더 많은 정보를 찾는 데 관심이 있다면이 GitHub 문제에서 원래 이름 변경 발표를 읽을 수 있습니다. 그렇지 않으면 PUCHES로 가득 찬 결과를 피하기 위해 PUG 관련 Google 검색에 "템플릿"이라는 단어를 추가하십시오. 퍼그 설치 퍼그를 작성하기 전에 Node, NPM (노드로 번들로 제공됨) 및 퍼그 클리 패키지를 설치해야합니다. 노드/npm 설치를위한 몇 가지 옵션이 있습니다. 프로젝트의 홈페이지로 가서 시스템의 올바른 바이너리를 다운로드하거나 NVM과 같은 버전 관리자를 사용하십시오. 가능한 경우 버전 관리자를 사용하는 것이 좋습니다.이를 통해 다른 노드 버전을 설치하고 마음대로 전환 할 수 있습니다. 또한 많은 잠재적 권한 오류를 무효화 할 것입니다.

보다 심층적 인 가이드를 위해“Node.js의 여러 버전의 Node.js 설치”를 확인할 수 있습니다. 노드와 NPM이 시스템에 설치되면 Pug-Cli 패키지를 설치할 수 있습니다.

PUG (Version)를 터미널에 입력하여 설치 프로세스가 올바르게 실행되었는지 확인할 수 있습니다. 이것은 Pug의 버전과 설치 한 CLI 버전을 출력합니다. 글을 쓰는 시점에서 이것은 다음과 같습니다

에디터에서 구문 강조 표시 편집자가 PUG에 대한 구문 강조 표시를 제공하지 않으면이 기능을 추가하기 위해 확장을 찾는 것이 좋습니다.

. 나는 현재 Sublime Text 3을 사용하고 있습니다.

이를 해결하려면 숭고한 퍼그 패키지를 설치할 수 있습니다.

구문 강조 표시는 퍼그 파일, 특히 길이의 파일로 작업하는 것이 훨씬 쉽게 만들 수 있습니다.

를 설치하지 않고 Pug HTML을 사용해보십시오 이 튜토리얼의 간단한 예제를 따르고 싶다면 다양한 온라인 코드 놀이터에서도 실행할 수도 있습니다. 예를 들어 코드 펜은 퍼그 지지대가 구워졌습니다. 새 펜을 만들 간단히 새 펜을 만들고 > 를 선택하고 전처리 자로 퍼그를 선택하십시오. 이렇게하면 HTML 창에 퍼그 코드를 입력하고 결과가 실시간으로 나타납니다. 추가 보너스로 HTML 창의 아래쪽 화살표를 클릭하고 view compiled html

를 선택할 수 있습니다. Pug HTML의 기본 구문 이제 퍼그가 설치되었으므로 시도해 봅시다. Pug-emaMples라는 새 디렉토리를 만들고 변경하십시오. 그런 다음 html이라는 추가 디렉토리를 만들고 index.pug :

라는 파일을 만듭니다.

참고 : 터치 명령은 Linux/MacOS 특이 적입니다. Windows 사용자는 Echo.> index.pug를 수행합니다. 이것이 작동하는 방식은 Pug 코드를 index.pug에 작성하고 Pug-Cli 가이 파일을 변경하여 변경하는 것입니다. 어떤 것을 감지하면, index.pug의 내용을 가져 와서 HTML 디렉토리에서 HTML로 렌더링합니다. 를 시작하려면 Pug-Eamples 디렉토리에서 터미널을 열고 다음을 입력하십시오.

당신은 다음과 같은 것을 볼 수 있어야합니다 :

참고 : 위의 명령에서 -w 옵션은 시계를 나타냅니다. Dot은 Pug에게 현재 디렉토리의 모든 것을 시청하라고 지시합니다. -o ./html -P 옵션은 출력을 예열합니다 이제 위의 스크린 샷에서 페이지를 만들어 봅시다 (구문 강조 표시 부족에 대해 불평하는 사람). 다음을 index.pug에 입력하십시오

<.> pug.index를 저장 한 다음 ./html/index.html의 내용을 검사하십시오. 다음을 볼 수 있습니다 :

나쁘지 않아? 퍼그 CLI는 퍼그 파일을 가져 와서 정기적으로 HTML로 렌더링했습니다. 이 예제는 퍼그에 대한 몇 가지 중요한 점을 강조하는 역할을합니다. 첫째, 그것은 공백에 민감합니다. 즉, 퍼그는 들여 쓰기를 사용하여 서로 내부에 어떤 태그가 중첩되어 있는지 알아냅니다. 예를 들면 : 위의 코드는 이것을 생성합니다 이제이 코드를 가져옵니다 : 이것은 다음을 생성합니다

사용하는 수준의 압입 수준은 중요하지 않습니다 (필요한 경우 탭을 사용할 수도 있음). 이 기사에서는 두 개의 공간을 사용할 것입니다.

둘째, 퍼그에는 닫는 태그가 없습니다. 이것은 분명히 당신에게 공정한 몇 개의 키 스트로크를 절약하고 깨끗하고 읽기 쉬운 구문을 퍼그로 제공합니다. . 이제 우리는 기본 퍼그를 다루었으므로 구문을 빨리 살펴 보겠습니다. 이 중 하나가 혼란스러워 보이거나 더 심도있게 가고 싶다면 프로젝트의 훌륭한 문서를 참조하십시오.

. doctype

당신은 퍼그를 사용하여 여러 문서 유형 선언을 생성 할 수 있습니다. 예를 들어 DocType HTML은 표준 HTML5 DocType 인 으로 컴파일되는 반면 DocType Strict는 . Pug는 출력이 문서 유형에 유효하도록하기 위해 최선을 다할 것입니다.

태그 언급 한 바와 같이, Pug는 닫는 태그가 없으며 중첩을위한 들여 쓰기에 의존합니다. 이렇게하면 익숙해지면 소량이 필요할 수 있지만, 일단 그렇게하면 깨끗하고 읽을 수있는 코드가됩니다. 예를 통해 예를 들어 :

위의 코드는 다음과 같이 컴파일합니다

PUG는 자체 폐쇄 태그 (예 : element)를 닫을만큼 똑똑하다는 점에 주목하십시오. 클래스, ID 및 속성 클래스와 ID는 .className 및 #IdName 표기법을 사용하여 표현됩니다. 예를 들면 :

Pug는 또한 우리에게 편리한 바로 가기를 제공합니다. 태그가 지정되지 않으면

요소를 가정합니다. 이 두 컴파일은 다음과 같습니다

속성은 괄호를 사용하여 추가됩니다

이것은 다음과 같은 결과를 초래합니다

속성에 대해 더 많은 말이 있습니다. 예를 들어, JavaScript를 사용하여 속성에 변수를 포함하거나 값 배열을 속성에 할당 할 수 있습니다. 다음 섹션에서 Pug에서 JavaScript를 사용합니다.

일반 텍스트 및 텍스트 블록 PUG는 렌더링 된 HTML에 일반 텍스트를 직접 추가하는 다양한 방법을 제공합니다. 우리는 이미 평범한 텍스트를 인라인으로 추가하는 방법을 이미 보았습니다 :

또 다른 방법은 파이프 문자 (|)와 라인을 접두사하는 것입니다.

이것은 우리에게 다음을 제공합니다 :

<span>npm i -g pug-cli
</span>

로그인 후 복사

큰 텍스트 블록을 처리 할 때는 점을 더 이상 알 수 있습니다. 태그 이름 직후 또는 닫는 괄호 후에 태그에 속성이있는 경우 :

<:> 이것은 다음과 같은 결과를 초래합니다

$ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>

로그인 후 복사

주석

마지막으로 댓글을 추가 할 수 있습니다

이 주석은 렌더링 된 html : 에 추가됩니다

당신은 다음과 같은 댓글을 시작합니다 :

이렇게하면 주석이 퍼그 파일에 남아 있지만 html에는 나타나지 않습니다. 주석은 자신의 라인에 나타나야합니다. 여기서 주석은 평범한 텍스트로 취급됩니다 :

다중 댓글도 가능합니다

<span>npm i -g pug-cli
</span>

로그인 후 복사

기본 구문 데모 아래에서 지금까지 논의한 기술을 보여주는 부트 스트랩 스타일 레이아웃의 데모를 찾을 수 있습니다. Codepen에서 SitePoint (@SitePoint)의 기본 퍼그 데모를 참조하십시오. 퍼그 html 템플릿에서 javaScript를 사용하는 퍼그의 가장 큰 장점 중 하나는 템플릿에서 JavaScript를 실행하는 기능입니다. 이를 통해 변수를 템플릿에 쉽게 삽입하고, 배열 및 객체를 반복하고, 조건부로 HTML을 렌더링하는 등. 버퍼와 부패하지 않은 코드 이것은 퍼그에서 JavaScript를 사용하기 전에 알아야 할 중요한 차이점입니다. undufered 코드는 마이너스 (-)로 시작합니다. 출력에 직접 추가되지는 않지만 PUG 내에서 값을 사용할 수 있습니다.

반면에 버퍼 코드는 평등 (=)으로 시작합니다. JavaScript 표현식을 평가하고 결과를 출력합니다
위의 코드는 다음과 같이 컴파일합니다
보안의 이유로 버퍼링 된 코드는 HTML이 빠져 나옵니다

위의 코드는 다음과 같이 컴파일합니다

보간

문자열 보간은 템플릿에서 하나 이상의 자리 표시자를 해당 값으로 교체하는 과정입니다. 방금 보았 듯이 버퍼 입력은이 작업을 수행하는 한 가지 방법을 제공합니다. 다른 하나는 #{}를 사용하고 있습니다. 여기에서 Pug는 곱슬 괄호 사이의 코드를 평가하고 탈출하여 템플릿으로 렌더링합니다.

위의 코드는 다음과 같이 컴파일합니다

Curly Brackets에는 유효한 JavaScript 표현식이 포함될 수 있으므로 다양한 가능성이 열립니다.

이것은 다음과 같이 컴파일합니다

! {}를 사용하여 템플릿에 값을 삭제하지 않은 값을 렌더링 할 수도 있습니다. 그러나 입력이 신뢰할 수없는 소스에서 발생하는 경우 이것은 최선의 아이디어가 아닙니다.

참고 : 변수에있는 값을 요소 속성에 할당하려면 #{}를 생략 할 수 있습니다. 예를 들면 : img (alt = name)

반복 Pug의 각 키워드는 배열을 쉽게 반복 할 수 있도록합니다.

이것은 다음과 같은 결과를 초래합니다

당신은 그것을 사용하여 객체의 키를 반복 할 수 있습니다 : .

<:> 이것은 다음과 같은 결과를 초래합니다

퍼그는 또한 배열이나 객체가 비어있는 경우 실행될 다른 블록을 제공 할 수 있습니다.

$ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>

로그인 후 복사

마지막으로, 각각의 별칭으로 사용할 수 있습니다.

. 조건부 조건부는 JavaScript 표현식의 결과에 따라 다른 HTML을 렌더링하는 매우 편리한 방법을 제공합니다.

<span>npm i -g pug-cli
</span>

로그인 후 복사

이 예에서는 직원 객체에 extn 속성이 있는지 확인한 다음 해당 속성의 값 (존재하는 경우) 또는 텍스트 "N/A"를 출력합니다. 퍼그 데모 의 JavaScript 아래에서는이 섹션에서 논의한 일부 기술의 데모를 찾을 수 있습니다. 이것은 Pug의 혜택이 이전 데모보다 다소 많은 것을 보여줍니다. 직원을 추가하기 위해해야 할 일은 SitePointemployees 어레이에 추가 객체를 추가하는 것입니다. . Codepen에서 sitepoint (@sitepoint)에 의해 퍼그 데모의 javaScript를 참조하십시오.

실습 예 이제 우리는 Pug의 구문과 작동 방식에 대한 합리적인 아이디어를 얻었으므로 Small Express.js 앱을 구축하여 Pug의 고급 기능을 보여 주어 마무리합시다. 이 예제의 코드는 github에서 사용할 수 있습니다

참고 : 이전에 Express를 사용하지 않은 경우 걱정하지 마십시오. Node.js 용 웹 프레임 워크로 웹 앱을 구축 할 수있는 강력한 기능 세트를 제공합니다. 자세한 내용을 확인하려면 Express Tutorial을 시작하는 시작을 확인하십시오. 먼저, 새 프로젝트를 만들고 Express를 설치합시다 :

다음 Pug-Express 폴더에서 app.js 파일을 만듭니다 :

그런 다음 다음을 추가하십시오
여기서 우리는 경로 (/)를 선언하고 있으며, 이는“안녕하세요, 세계!”텍스트로 GET 요청에 응답합니다. Node app.js로 서버를 시작한 다음 http : // localhost : 3000. 를 방문하여 브라우저에서 테스트 할 수 있습니다. 당신이 이런 것을 본다면, 상황이 계획을 세웠습니다 :

일부 데이터 추가 이 Express 앱은 너무 훌륭하지 않습니다. 데이터베이스에서 직원 목록을 가져오고 테이블에 표시하는 간단한 직원 디렉토리를 구축 할 예정입니다. 이를 위해서는 데이터베이스와 일부 데이터가 필요합니다.

그러나… 데이터베이스를 설치하고 구성하는 것은이 작은 예제에 약간 무겁기 때문에 JSON-Server라는 패키지를 사용하겠습니다. 이를 통해 DB.JSON 파일을 만들 수 있으며,이 파일은 CRUD 작업을 수행 할 수있는 REST API로 변할 수 있습니다. 설치하자 :

이제 프로젝트의 루트에서 위에서 언급 한 DB.JSON 파일을 만듭니다 :

마지막으로, 우리는 그것을 채우려면 약간의 json이 필요합니다. 무작위 사용자 데이터를 생성하기위한 무료 오픈 소스 API 인 Random 사용자 생성기를 사용합니다. 25 명의 사람들이 우리의 예를 위해해야하므로 https://randomuser.me/api/?results=25로 가서 결과를 db.json에 복사하십시오. 마지막으로 : 와 함께 두 번째 터미널 창에서 서버를 시작하십시오.

이로 인해 JSON-SERVER가 포트 3001에서 시작하여 데이터베이스 파일을 변경하여 변경됩니다. 템플릿 엔진으로 퍼그를 설정 Express는 퍼그 사용을 탁월한 지원을 제공하므로 구성이 거의 필요하지 않습니다. 먼저, 프로젝트에 퍼그를 추가합시다 :

<span>npm i -g pug-cli
</span>

로그인 후 복사

그런 다음 app.js에서는 퍼그를 사용하도록 Express를 알려야합니다.

다음, views 디렉토리를 만들고 뷰 디렉토리에서 index.pug 파일을 추가하십시오 :

해당 파일에 일부 내용을 추가하십시오

그런 다음 app.js와 같은 app.js를 변경하십시오

마지막으로, 노드 서버를 다시 시작한 다음 브라우저를 새로 고치면 다음을 볼 수 있습니다.

그리고 그게 다야. 당신은 갈 수 있습니다. 직원 디렉토리 구축 목록의 다음 작업은 일부 데이터를 퍼그 템플릿에 전달하여 표시하는 것입니다. 이를 위해서는 JSON-Server에서 데이터를 가져 오는 방법이 필요합니다. 불행히도 Fetch API는 노드에서 구현되지 않았으므로 대신 인기있는 HTTP 클라이언트 인 Axios를 사용해 보겠습니다.

그런 다음 app.js와 같은 app.js를 변경하십시오

$ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>

로그인 후 복사

여기에는 몇 가지 일이 있습니다. 우리는 경로 핸들러를 비동기 기능으로 전환하여 직원 데이터를 템플릿으로 넘겨주기 전에 JSON-Server에서 반환 될 때까지 기다릴 수 있습니다. 그런 다음 우리는 이전과 같이 색인을 렌더링하지만 이번에는 모든 데이터를 포함하는 객체 문자 그대로 전달합니다. 참고 : App.js로 변경할 때마다 노드 서버를 다시 시작해야합니다. 이것이 성가 시게되기 시작하면 Nodemon을 확인하십시오.

이제 퍼그를 위해. index.pug를 다음과 같이 보이게합니다

여기에는 놀라운 일이 없습니다. 우리는 몇 가지 스타일뿐만 아니라 우리 자신의 스타일을 위해 Semantic-UI-CSS를 사용하고 있습니다.

<span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>

로그인 후 복사

템플릿 상속 이것은 이미 꽤 좋지만, 일을 마무리하기 위해서는 프로젝트가 성장함에 따라 최대의 유연성을 제공하기 위해 우리의 견해를 구성하는 방법을 보여 드리겠습니다.

pug <span>-w . -o ./html -P
</span>

로그인 후 복사

. views 디렉토리에서 레이아웃을 만들어 시작하겠습니다.

그런 다음 다음을 추가하십시오

여기서 수행 한 작업은 프로젝트 내 다른 퍼그 파일에서 확장 할 수있는 것보다 레이아웃 파일을 만드는 것입니다. 많은 수의 퍼그 파일이 있으면 상당한 양의 코드가 저장됩니다.

watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html

로그인 후 복사

이것이 작동하는 방식은 어린이 템플릿이 대체 할 수있는 두 개의 컨텐츠 블록 (블록 컨텐츠 및 블록 바닥 글)을 정의했다는 것입니다. 바닥 글 블록의 경우, 우리는 또한 자식 템플릿 이이 블록을 재정의하지 않으면 렌더링 될 일부 폴백 컨텐츠를 정의했습니다.

. 이제 우리는 index.pug 파일을 레이아웃에서 상속하라고 말할 수 있습니다.

결과는 이전과 동일하지만 코드는 이제 더 나은 구조를 가지고 있습니다. .

믹스 인 믹스 인을 사용하면 재사용 가능한 퍼그 블록을 만들 수 있습니다. 우리는 이것을 사용하여 테이블 행을 자체 파일로 추출 할 수 있습니다.

views 폴더에서 mixins라는 폴더를 만들고 해당 폴더에서 _tablerow.pug라는 파일을 만듭니다.

<span>npm i -g pug-cli
</span>

로그인 후 복사

믹스 인은 mixin 키워드를 사용하여 선언됩니다. 그들은 기능에 편집되어 있으며 논쟁을 할 수 있습니다. 보기/믹스 인/_tablerow.pug : 이제 index.pug like so :

보시다시피, 우리는 파일 상단에서 믹스 인을 가져오고 있습니다. 그런 다음 플러스 기호로 이름을 접두사로 호출하고 직원 개체를 표시하도록 전달합니다. 이것은 우리의 작은 앱에 대한 과잉이지만, 재사용 가능한 코드를 작성할 수있는 PUG의 매우 유용한 기능을 보여줍니다.

결론 당신이 지금까지 만들었다면 잘 했어요! 우리는이 튜토리얼에서 많은 근거를 다루었습니다. 우리는 기본 구문, JavaScript 지원 및 반복 및 조건부 렌더링을위한 구성을 설치하는 것을 살펴 보았습니다. 마지막으로, 우리는 원격 소스에서 데이터를 가져 와서 퍼그 템플릿에 공급하는 완전히 작동하는 Express 앱을 구축했습니다. 퍼그가 할 수있는 것이 훨씬 더 많습니다. 훌륭한 문서를 확인하고 프로젝트에서 사용을 시작하는 것이 좋습니다. React 또는 Vue와 같은 몇 가지 현대식 JS 프레임 워크와 함께 사용할 수 있으며 다른 여러 언어로 포팅되었습니다.

. 도전을 찾고 있다면 누락 된 CRUD 기능을 추가하기 위해 직원 디렉토리를 확장 해보십시오. 구문에 갇히면 도움이 항상 손에 든다는 것을 잊지 마십시오.

Pug HTML 템플릿에 대한 FAQS PREPROCESSOR 퍼그에 대한 자주 묻는 질문이 있습니다 PUG HTML 템플릿 전 처리기 란 무엇입니까?

이전에 Jade로 알려진 Pug는 고성능 HTML 템플릿 사전 처리기입니다. 보다 간결하고 표현력있는 구문을 제공하여 HTML을 작성하는 과정을 단순화하고 향상시킵니다.

$ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>

로그인 후 복사

왜 HTML 대신 PUG를 사용 하는가?

PUG는 기존 HTML에 비해보다 컴팩트하고 읽기 쉬운 구문을 제공합니다. 그것은 들여 쓰기 기반 구조화를 허용하며, 이는 종종 더 깨끗하고 조직화 된 코드로 이어집니다. Pug는 또한 변수, Mixins 및 포함하여 템플릿 작성을보다 효율적으로 지원합니다. html 퍼그에 사용되는 것은 무엇입니까?

퍼그는보다 간결하고 체계적이며 효율적인 방식으로 HTML 마크 업을 생성하는 데 사용됩니다. PUG는 종종 웹 개발 프로젝트에 사용되어 읽기, 쓰기 및 유지하기 쉬운 HTML 템플릿을 만들기 위해 종종 사용됩니다.

PUG 사용에 대한 제한 사항이나 단점이 있습니까? PUG는 많은 장점을 제공하지만 기존 HTML에 익숙한 경우 주요 제한은 학습 곡선입니다. 또한, 모든 사람이 퍼그에 익숙하지 않은 팀에서 일하는 팀에서 일하는 경우 약간 조정이 필요할 수 있습니다.

반응 또는 Angular와 같은 프론트 엔드 프레임 워크와 함께 퍼그를 사용할 수 있습니까? PUG는 주로 HTML을 생성하도록 설계되었지만 React, Angular 또는 Vue.js와 같은 다양한 프론트 엔드 프레임 워크와 함께 사용할 수 있습니다. 그러나 이러한 프레임 워크를 사용하여 PUG를 사용하면 추가 구성 및 도구가 필요할 수 있습니다.