반응형
jade 템플릿간에 변수를 전달하는 방법
나는 템플릿을 기본으로 사용하고 있으며 그것을 사용하는 페이지에 설정된 일부 변수를 인식하고 싶습니다.
파일 : template.jade
vars = vars || {some:"variables"}
!!! 5
head
title vars.some
파일 : page.jade
vars = {some:"things"} //- this does not get used from within template.jade
extends template
컴파일 된 page.jade에 "things"라는 제목이 있어야합니다.
변수로 블록 전달
template.jade :
!!!
html
block vars
head
title #{pageTitle} - default www title
body
page.jade
extends template
block vars
- var pageTitle = 'Home'
블록을 사용할 수 있습니다.
template.jade :
!!! 5
head
block title
title variables
page.jade :
extends template
block title
title things
그렇지 않으면 스크립트에서 변수를 정의해야합니다 (예 : express). 내가 아는 한, 변수는 포함을 통해서만 전달할 수 있지만 레이아웃 (귀하의 경우 template.jade) 위로는 전달할 수 없습니다.
여러 곳에서 변수를 사용해야했기 때문에 블록이 작동하지 않을 것이라고 생각했습니다.
// base.jade
pageTitleVar = "Parent's Title"
!!!
title !{pageTitleVar}
h1 !{pageTitleVar}
실제로 부모 템플릿에서 동일한 블록을 두 번 지정할 수 있으며 자식 템플릿이 전달하는 모든 것이 복제됩니다.
// base.jade
pageTitleVar = "Parent's Title"
!!!
title
block pageTitleBlock
!{pageTitleVar}
h1
block pageTitleBlock
!{pageTitleVar}
// child.jade
extends base
pageTitleVar = "Child's Title"
block pageTitleBlock
!{pageTitleVar}
블록 FTW
A great and commented solution to add title like this:
"My Project - The Page".
Or just this:
"My Project"
template: template.jade
doctype 5
html(lang="en")
head
//- setting the page title to be dynamic
block vars
- var defaultTitle = "My Project"
- var pageTitle = pageTitle
title #{defaultTitle}#{pageTitle}
some page: page.jade
extends base
//- custom page title
block append vars
pageTitle = " - The Page"
How about using template includes?
// vars.jade
- var name = "Chris"
#{ nick = "StackOverflow" }
// page.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
h1= title
include vars
p Welcome to #{title} #{name} #{nick}
ReferenceURL : https://stackoverflow.com/questions/12646451/how-to-pass-variables-between-jade-templates
반응형
'Development Tip' 카테고리의 다른 글
Apache POI에서 열 너비 설정 (0) | 2021.01.10 |
---|---|
IIS에서 ASP.NET MVC에 대해 HTTP PUT 및 DELETE를 활성화하려면 어떻게합니까? (0) | 2021.01.10 |
Node.js에서 CSV를 JSON으로 변환하는 방법 (0) | 2021.01.10 |
composer bower-asset / jquery를 통해 yii2를 업데이트 할 수 없습니다. 찾을 수 없습니다. (0) | 2021.01.10 |
ProgressBar가 Android에서 표시되는 동안 사용자 상호 작용을 비활성화하는 방법은 무엇입니까? (0) | 2021.01.10 |