파그 템플릿 엔진 4부분 사용하기 - 포함 및 혼합

13764 단어 nodetutorialjavascriptbeginners
이제 우리는 templating,logic와layouts를 논의했으니 마지막 주요 삽살개인 포함과 혼합을 논의할 때가 되었다.이런 개념도 무미건조한 범주에 속해 개발자의 생활을 더욱 가볍게 하는 데 도움이 된다.먼저?포함하다.

파그에서includes를 어떻게 사용합니까


상상해 보아라. 당신의 사이트의 일부분은 당신의 사이트의 다른 곳에서 사용될 것이다. 예를 들어 연락처 등이다.만약 두 개의 다른 페이지에서 폼을 만들고 싶다면, 폼이 완전히 같더라도, 모든 페이지에서 수동으로 폼을 만들어야 한다.마찬가지로 여러 위치에서 일부 내용을 업데이트해야 하는 문제를 초래할 수 있다.누가 이렇게 하려고 합니까?

이것이 바로 파그가 우리에게includes를 사용하는 능력을 부여한 이유다.Includes에서는 동적 데이터가 없는 정적 코드를 작성하여 템플릿에 필요한 곳에 배치할 수 있습니다.우리의 폼 예시에서, 폼 코드는 표준적인 파그 템플릿일 뿐이다.다음 코드는 나의 폼 템플릿의 내용을 보여 줍니다.
// includes/form.pug
form(action='/action-goes-here' method='post')
    label(for='name') Name:
    input(type='text' name='name' id='name')
    label(for='message') Message:
    textarea(name='message' id='message')
    input(type='submit' value='Submit')
이름 입력, 메시지 입력, 제출 단추를 포함하는 간단한 폼을 만들었습니다.내가 원하는 곳에 쓰거나 복사해서 붙이는 것보다, 나는 그것을 포함할 수 있다.나는 지난 글의 페이지 예시를 사용하여 사물이 어떻게 결합되었는지 설명할 것이다.다음은 내 hello.pug 페이지에 이 표를 포함하는 방법을 보여 주는 예이다.
// hello.pug
extends layout.pug

block content
    h1 Hello, world!
    include includes/form.pug

block scripts
    script console.log('Hello, world!')
h1 태그 아래에 줄include 키워드를 추가한 다음 태그에 포함시키고 싶은 파일 경로를 추가했습니다.이제 페이지의 태그는 다음과 같습니다.
<!-- output -->
<html>
    <head>
        <title>My Site</title>
    </head>
    <body>
        <header>
            <a href='/'>Home</a>
        </header>

        <h1>Hello, world!</h1>
        <form action="/action-goes-here" method="post">
          <label for="name">Name:</label>
          <input type="text" name="name" id="name">
          <textarea name="message" id="message"></textarea>
          <input type="submit" value="Submit">
        </form>

        <footer>
            <p>Site Footer</p>
        </footer>
        <script>console.log('Hello, world!')</script>
    </body>
</html>
솔직히 말하면, 이것이include에 관한 모든 지식입니다.너는 코드를 쓴 후에 그것을 어딘가에 두어라.주의해야 할 것은includes를 사용할 때 전체 파일이 포함됩니다.어떤 방법도 일부 부품만 꺼내서 중복 사용할 수 없다.이것은 또한 다른 데이터 (예:mixin) 를 현재 파일로 끌어올리는 방식입니다.만약 당신이 이런 생각을 필요로 한다면, 동적 데이터가 필요합니까?이것이 바로 믹스가 역할을 발휘하는 곳이다.

삽살개의 조미료는 무엇에 쓰입니까?


mixin은 동적 데이터를 포함하거나 포함하지 않는 파그 태그 블록을 작성한 다음 필요한 곳에 이 태그를 사용할 수 있습니다.이것은 구성 요소의 '모델' 을 작성한 다음 관련 데이터로 그것을 채울 수 있도록 합니다.이 개념의 흔한 예는 소셜 미디어 사이트의 카드다.게시물마다 같은 기본 카드가 있어 내용과 사용자 정보를 넣을 수 있지만, 매번 다른 정보로 구성 요소를 채울 뿐, 매번 나타날 때마다 쓰여지는 것이 아니다.
그러면 어떻게 믹스를 만듭니까?다음은 어떤 댓글을 표시하는 데 사용되는 믹스 예시입니다.
// mixins/post.pug
mixin post(title, content)
    article
        h2= title
        p= content
봐라!이렇게 하면post 구성 요소가 있습니다.mixin을 호출할 때 제목과 내용 파라미터를 입력하고 표시할 수 있습니다.멋있죠?현재 Post mixin은 페이지에서 사용할 준비가 되어 있습니다.
// hello.pug
extends layout.pug
include mixins/post.pug

block content
    h1 Hello, world!
    include includes/form.pug

    +post('This is the title', 'This is the content')

block scripts
    script console.log('Hello, world!')
hello.pug 페이지는 보기에 이전과 거의 같지만 약간의 변화가 있다.우선, extends layout.pug 줄 아래에include 문장이 있습니다.이것이 바로 우리가 믹스를 포함하는 파일을 포함하는 방식입니다.이것은 단순히 태그가 아니라mixin이기 때문에 실제로는 포함된 위치에 어떤 내용도 표시하지 않습니다.반대로, 당신은 믹스를 호출하기 위해 플러스 번호를 사용해야 합니다.
보시다시피, 위의 예시는postmixin+post()을 호출하고 두 개의 인자를 전송합니다.템플릿에서 mixin을 사용하는 것은 JavaScript 함수를 작성하는 것과 비슷할 정도로 간단합니다.이 예에서 title 매개 변수는 "This is the title", content 매개 변수는 "This is the content"입니다.

템플릿에서 mixin을 사용하면 컴파일된 태그는 다음과 같습니다.
<!-- output -->
<html>
    <head>
        <title>My Site</title>
    </head>
    <body>
        <header>
            <a href='/'>Home</a>
        </header>

        <h1>Hello, world!</h1>
        <form action="/action-goes-here" method="post">
          <label for="name">Name:</label>
          <input type="text" name="name" id="name">
          <textarea name="message" id="message"></textarea>
          <input type="submit" value="Submit">
        </form>

        <article>
            <h2>This is the title</h2>
            <p>This is the content</p>
        </article>

        <footer>
            <p>Site Footer</p>
        </footer>
        <script>console.log('Hello, world!')</script>
    </body>
</html>
이런 능력이 어떻게 개발 속도를 더욱 빠르게 하는지 알기 어렵지 않다.이런 방식을 통해 코드 블록 사이에서 데이터를 전달하거나 댓글을 교체하여 프로그래밍 방식으로 데이터를 뱉는 것이 훨씬 쉽다.전반적으로 파그를 템플릿 엔진으로 대부분의 것을 구축하는 데 필요한 모든 기능을 갖추어야 하지만, 본문을 끝내기 전에 한 가지 더 이야기하고 싶습니다.

포건 개념


우리가 토론한 모든 개념은 함께 사용할 수 있다.예를 들어, include에서 블록을 생성할 수 있습니다.너는 혼합기에 한 조각을 넣을 수 있다.너는 심지어 한 블록을 다른 믹스의include에 넣을 수도 있다.가능성은 무한하다. 비록 네가 깊이 들어갈수록 프로젝트를 유지하는 것은 더욱 어려워진다.
템플릿을 만들 때 파그가 얼마나 유연하고 당신의 요구를 충족시킬 수 있는지 설명하고 싶었을 뿐입니다.

결론


Pug는 강력한 템플릿 엔진으로 Nodejs 응용 프로그램에 적용됩니다.나는 가능한 한 동적 사이트나 응용 프로그램을 쉽게 구축하는 데 필요한 모든 것을 소개했다.아마도 너의 다음 항목에는 파그의 앞부분이 있을 것이다. 아마도 없을 것이다.어쨌든 네가 예전보다 더 많이 알고 있는 것은 좋은 일이다.
질문이 있습니까?너는 트위터에서 나를 찾을 수 있다.
VScode에서 Rust의 보완 기능을 사용하려고 하는데 이동할 수 없습니다
새 제출 및 전송 시퀀스 이후github에서 제출을 볼 수 없습니다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage