2011-09-29 6 views
2

내가 Node.js를익스프레스 & 제이드,

내가의 말을하자, 레이아웃 파일이 함께 익스프레스 사이트와 장난하고있어 다음과 같습니다 레이아웃에 코드를 추가 템플릿 :

html 
    title foo 
body!= body 

내가 이해할 수있는 것부터, 템플릿의 출력은 body이라는 변수에 삽입되며 3 행의 레이아웃에 추가됩니다. 그러나 템플릿을 요소에 <meta> 태그와 같이 추가하려는 경우 어떻게해야합니까?

템플릿을 확장하고 블록을 사용하는 것에 대한 설명을 보았지만 레이아웃을 사용하는 방법과 관련이 있는지 잘 모르겠습니다. 템플릿 자체가 레이아웃을 확장해서는 안됩니다. 맞습니까? 또는 템플릿 상속으로 인해 레이아웃이 전혀 필요하지 않습니까? 나는 의심하지 않지만 확실하지 않습니다.

나는 여기에 있기 때문에 사용할 다른 레이아웃을 지정하거나 레이아웃을 전혀 사용하지 않는 방법을 지정합니다. 현재 조회수는 다음과 같이 렌더링됩니다.

res.render('templateName', { myTemplateVars : 'foo' }); 

답변

3

귀하가 요청한 것은 3 일 전에 출시되었습니다.

http://tjholowaychuk.com/post/10695801204/jade-stylus-0-16-0-released

나는 개인적으로 몇 주 동안 그것을 사용하고 최근에 추가를 사랑하고있다. block 문을 사용하면 기본 내용을 지정할 수 있으며 모든 확장 템플릿은 명명 된 블록을 재정의 할 수 있습니다.

기본적으로 블록은 덮어 쓰고 append와 extend는 부모 템플릿을 선택합니다.

+0

확인, 레이아웃은'내부 블록 meta'하고 아무것도해야 내 경우에는, 그래서 그런 다음 템플릿은'블록 메타 '를 쓸 수 있으며 원하는 태그를 추가 할 수 있습니까? – nickf

+0

예를 들어, 블록 문은 중첩 된 내용없이 선언 할 수 있으며 내용 자리 표시 자 역할을합니다. 템플릿을 상속하면 내용없이 블록을 선언 할 수 있지만 부모 블록을 혼동하지 않도록 조심하십시오. – collinwat

+0

Grr ... bad enter key :) 따라서 메타 블록을 추가하고 상속 템플릿에 메타 블록을 정의하고 해당 템플릿의 블록에 원하는 태그를 추가하십시오. 또한 body 변수를 삭제하고 하위 템플릿에서 재정의 할 블록으로 만듭니다. 도움이 되길 바랍니다. – collinwat

1

시도해보십시오. dust 템플릿 엔진.
훨씬 재미 있고 디자이너 친화적입니다.

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <title>kiss.js example</title> 
    <link rel="stylesheet" href="/css/css1.css" /> 
    <link rel="stylesheet" href="/css/css2.css" /> 
    <script type="text/javascript" src="/js/js1.js"></script> 
    <script type="text/javascript" src="/js/js2.js"></script> 
    {+head/} 
</head> 
<body> 
    <div style="height: 100%"> 
     <div id="header"> 
      <h1>kiss.js example - {+header}{/header}</h1> 
      {+header_buttons}{/header_buttons} 
     </div> 
     <div id="content"> 
      {+content}{/content} 
     </div> 
     <div id="footer"> 
      <table> 
       <tr> 
        <td> 
         &nbsp;&nbsp; 
        </td> 
        <td style="width: 100%; text-align: center;">made with kiss.js</td> 
        <td>{+footer_buttons}{/footer_buttons}</td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</body> 

및 view.html : 먼지에서
당신은 base.html을 쓸 수

{>base.html/} {<content} <h2>name: {name}</h2> <h3>{foo}</h3> {#numbers} <div>{.}</div> {/numbers} {/content}
+0

먼지 템플릿을 사용하도록 app.js를 구성하는 방법을 붙여 넣을 수 있습니까? – chovy

관련 문제