Development Tip

jade 템플릿간에 변수를 전달하는 방법

yourdevel 2021. 1. 10. 19:39
반응형

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

반응형