파그 템플릿 엔진 제1부분 사용하기 - 태그

Drupal, Laravel, Adonis 같은 도구를 사용한 적이 있다면, 템플릿 엔진을 만났을 수도 있습니다.템플릿 엔진은 웹 사이트나 웹 앱의 전단을 구축하는 데 도움을 줄 수 있는 프레임워크입니다.상술한 공구에서 사용하는 엔진은 각각 가는 가지, 칼날과 가장자리이다.이러한 언어는 HTML과 유사한 구조를 작성할 수 있으며 구조에 변수를 삽입하고 논리를 사용하는 능력을 보존할 수 있습니다.오늘 나는 노드에서 가장 유행하는 템플릿 언어 중의 하나를 토론할 것이다.js 응용 프로그램, 파그.
파그의 원래 이름은 제이드로 몇 년의 개발 끝에 2013년 12월 22일에 1.0.0 버전을 발표했다.그것은 이미 많은 사이트에서 광범위하게 사용되는 템플릿 엔진이 되었다. 이유는 충분하다. HTML을 어떻게 만드는지 알면, 이것은 HTML의 간략한 버전처럼 느껴질 것이다.Pug를 작성하는 관건은 들여쓰기입니다. Pug가 HTML로 컴파일되었을 때, 들여쓰기는 요소를 어떻게 끼워 넣는지 결정하기 때문입니다.작성할 때, 다른 항목도 약간 다르지만, 요소, 속성, 구조는 모두 표준 HTML과 같다.

파그에서 원소를 만드는 방법
파그에서 웹 페이지에 표시를 하는 것은 처음에는 좀 이상하게 느껴질 수도 있지만 시간이 지나면 직관적으로 느껴지기 시작한다.일부 원인은 태그를 닫는 것을 걱정할 필요가 없기 때문에 더 깨끗한 파일을 만드는 데 도움이 됩니다.먼저 h1를 만들겠습니다. 위에'안녕하세요, 파그'라고 쓰여 있습니다.

h1 Hello Pug

믿거나 말거나, 위의 코드는 h1 탭을 만들 것입니다. 그 안에 'Hello Pug' 라는 텍스트가 있습니다.금방 그렇죠?이제 우리 p꼬리표(아이가 아닌 형제자매로서)를 붙여보자. 그 위에'얼마나 아름다운 날인가!'라고 쓰여 있다.다음 코드를 보지 않고 그것을 완성할 수 있는지 보세요.준비가 되면 코드는 다음과 같습니다.

h1 Hello Pug
p What a beautiful day!

요소에 클래스 및 ID 추가
만약 우리가 p 표시에 특정한 스타일을 제공하기 위해 종류를 추가하고 싶다면 어떻게 해야 합니까?emmet이라는 도구를 잘 알면 아주 익숙해집니다.없으면 그래도 괜찮아요.이것도 오래 걸리지 않아도 익숙해질 수 있다.클래스를 p 요소에 추가하려면 다음과 같이 CSS에서 사용하는 선택기를 요소에 추가하십시오.

h1 Hello Pug
p.some-selector What a beautiful day!

태그에 ID를 추가하는 방법은 기본적으로 같습니다.h1 태그에 ID를 추가하려면 다음과 같이 하십시오.

h1#some-id Hello Pug
p.some-selector What a beautiful day!

몇 가지 종류를 추가해야 합니까?파그도 그곳에서 너를 엄호한다.요소 뒤에 선택기를 추가할 필요가 없습니다. 왼쪽 괄호와 오른쪽 괄호를 넣고 HTML에서 요소의 클래스를 작성하는 것처럼 클래스를 작성할 수 있습니다.그런데 큰 차이가 있어요...파그는 클래스 목록을 문자열 (예: HTML) 이나 그룹으로 받아들일 수 있으며, 자바스크립트에서 클래스 이름 목록을 가져올 때 매우 편리하다.다음 예는 여러 종류의 요소를 수조와 문자열로 동시에 작성하는 방법을 보여 줍니다.

div(class="box box-shadow") Some content
// or
div(class=['box', 'box-shadow']) Some content

추가 속성 추가
좋아, 쿨...그런데 여러 개의 속성을 추가해야 한다면?class, src 및 alt 태그가 있는 이미지를 추가합니다.모든 유형의 속성을 추가하는 방법은 클래스와 ID 등에도 가능합니다.이것은 표준 HTML에 요소를 추가할 때의 작성 방식과 매우 유사하게 느껴져야 한다.다음 예에서는 요소에 속성을 추가하는 방법을 볼 수 있습니다.

h1#some-id Hello Pug
p.some-selector What a beautiful day!
img(class='image' src='https://placeimg.com/300/300' alt='Test Image')

객체를 속성으로 사용
어떤 경우, 모든 속성을 쓰는 것이 아니라 속성 대상을 사용하기를 원할 수도 있습니다.이 기능은 JavaScript에서 속성 데이터를 가져와 요소로만 전달하려는 경우에 유용합니다.아마도 프로그래밍 방식으로 속성을 구축하고 있을 것입니다. 매번 교체될 때마다 한두 가지 일만 변경되었을 것입니다. 누가 알겠습니까?어떤 방식으로든 속성은 &attributes이나'and속성'을 대상으로 원소에 전달할 수 있다.이런 기술을 사용할 때는 이런 방식으로 전달된 데이터는 소독을 거치지 않았기 때문에 사용 전에 처리해야 한다.다음은 우리가 만든 이미지의 예&attribute입니다.

h1#some-id Hello Pug
p.some-selector What a beautiful day!
img&attributes({class:'image', src: 'https://placeimg.com/300/300', alt: 'Test Image'})

왜 둥지를 짓는 것이 중요합니까?
또 하나의 개념을 《기초》에서 소개하고 싶은데, 그것은 바로 끼워 넣는 것이다.내가 전에 말했듯이 부모와 아이에게 컴파일러는 이렇게 DOM의 구조를 결정한다.이 점을 설명하기 위해서 나는 방금 만든 figure 원소 주위에 img 원소를 놓을 것이다.

h1#some-id Hello Pug
p.some-selector What a beautiful day!
figure
    img(class='image' src='https://placeimg.com/300/300' alt='Test Image')

위의 코드는 이전과 크게 다르지 않은 것처럼 보이지만, 최종 표기에서 작용했다.나는 figure 탭 아래에 p 요소를 추가한 다음 figure 탭 아래에 그림을 축소했다.figure 태그 아래에 한 번 들여쓴 내용은 해당 태그의 직접 자 피쳐가 됩니다.만약 내가 img를 아무런 움푹 패인 위치에 두면, 그것은 figure의 형제로 나타날 것이다.이것이 바로 눌린 자국이 삽살개의 구조를 확정하는 데 매우 중요한 이유다.

마무리
비록 이것은 매우 빠른 소개 템플릿과 파그이지만, 이것은 HTML을 어떻게 비교하는지, 그리고 그것이 어떻게 매우 유익한 가독성과 속도를 얻을 수 있는지 기본적으로 이해하게 해야 한다.In the next post 템플릿에서 변수와 논리를 사용하여 매우 동적으로 만드는 방법을 보여 드리겠습니다.
만약 당신에게 문제가 있거나 문제가 생기면 트위터에서 나를 찾을 수 있다.