web-dev-qa-db-ja.com

ヒスイテンプレート間で変数を渡す方法

私はテンプレートをベースとして使用しており、それを使用しているページに設定されているいくつかの変数を認識してほしい...

ファイル：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に「もの」というタイトルを付けたい

templatesvariablespug
54
Billy Moon

私は解決策を見つけます ここ

ブロックを変数で渡す

template.jade：

!!!
html
  block vars
  head
      title #{pageTitle} - default www title
  body

page.jade

extends template
block vars
  - var pageTitle = 'Home'
116
Roman Rhrn Nesterov

ブロックを使用できます：

template.jade：

!!! 5
head
    block title
        title variables

page.jade：

extends template
block title
    title things

それ以外の場合は、スクリプトで変数を定義する必要があります（エクスプレスなど）。私の知る限り、変数はインクルードを介してのみ渡すことができますが、レイアウト（テンプレートの場合はtemplate.jade）に渡すことはできません。

4
roka

テンプレートを含む を使用してはどうですか？

// 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}
2
Chris Jeong

次のようなタイトルを追加するための優れたコメント付きソリューション：
「マイプロジェクト-ページ」。

またはこれだけ：
「マイプロジェクト」

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}

一部のページ：page.jade

extends base
//- custom page title
block append vars
    pageTitle = " - The Page"
2
romulobastos

複数の場所で変数を使用する必要があるため、ブロックは機能しないと考えました。

// base.jade
pageTitleVar = "Parent's Title"
!!!
title !{pageTitleVar}
h1 !{pageTitleVar}

実際には、親テンプレートで同じブロックを2回指定でき、子テンプレートが渡すものはすべて複製されます。

// 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

2
Jesse Hattabaugh