핸들 막대 부분에 html 블록을 삽입하는 방법

Question

간단한 Node.js 프로젝트에 Handlebars를 사용하고 개 이상의 변수를 부분적으로 입력하면이됩니다.

나는 내 html 페이지 (html 및 head 태그)의 기본 프레임을 포함하는 layout을 가지고 있습니다. 내가 렌더링 페이지는 일반적으로 모두 동일하며, 다음 코드를 포함 :

{{> default/header 
    help_title="This is the title of my help modal." 
    help_body="<p>This is the body.</p>" 
}} 

<main class="vertical-center"> 
    <div class="container-fluid"> 
    <div class="row justify-content-center"> 
     <div class="col-12 col-lg-8 justify-content-center align-items-center"> 
     <!-- THE CONTENT THERE --> 
     </div> 
    </div> 
    </div> 
</main> 

{{> default/footer}} 

이 페이지 자체에 따라, 나는 헤더 및/또는 바닥 글을 표시하지 않도록 할 수 있습니다 (그리고 나는 결과적으로 줄을 제거).

내 필요 : 나는에 main 부분을 포장하고 싶은 부분합니다 (<!-- THE CONTENT THERE -->하지만 모든 것이 불변이기 때문에) 또는 어떤 일을 할과 (헤더에 같은) 그것뿐만 아니라 몇 가지 단어를 제공 할 수 하지만 잠재적으로 많은 html 코드가 있습니다. 그리고 나는 문서에서 그것을 할 수있는 방법을 찾을 수 없습니다. 이런 식으로 뭔가, 즉 기본적으로 레이아웃처럼 조금 작동합니다 :

{{> default/main 
    <!-- THE RAW HTML CONTENT THERE --> 
}} 

Answer 1

핸들 바는 partial blocks의 형태로 묘사하는 것을 정확히을 지원합니다. 부분 블록의 기본 동작은 을 부분을 찾을 수없는 경우 렌더링하는 것입니다. 그러나 특별한 내장 헬퍼 인 @partial-block은 에 부분에 내용을 주입합니다. 문서에서

:

블록이 구문은 또한 특별히 @partial-block 부분 이름에 의해 실행될 수있는 부분 템플릿을 전달하기 위해 사용될 수있다.

부분 내에는 콘텐츠를 삽입 할 곳인 {{> @partial-block }}이 추가됩니다. 그런 다음

<main class="vertical-center"> 
    <div class="container-fluid"> 
     <div class="row justify-content-center"> 
      <div class="col-12 col-lg-8 justify-content-center align-items-center"> 
       {{> @partial-block }} 
      </div> 
     </div> 
    </div> 
</main> 

부분 풋에 주입하는 내용에 블록 구문을 사용 할 것 "메인"부분을 호출하는 페이지 : 귀하의 경우, 귀하의 "주"부분과 같을 것이다 블록 태그 내부 :

{{#> main}} 
    <p>THE RAW HTML CONTENT HERE</p> 
{{/main}} 

참조 용으로 fiddle을 만들었습니다.