【问题标题】:Jade template engine: show and hide a certain blockJade模板引擎:显示和隐藏某个块
【发布时间】:2015-04-27 09:17:23
【问题描述】:

我有一个玉模板

extends _base
block content
  include ./partials/_main-header
  .Template2RightBig
    .container
      .row
        block content2RightBig
          .col-md-3.Template2RightBig--left.column
            block left-column
          .col-md-9.Template2RightBig--right.column
            .Template2RightBig--right-header
              block right-column-header
            .Template2RightBig--right-annotation
              block right-column-annotation
            block right-column
  include ./partials/_footer

我想在页面中显示或隐藏右列注释块及其父容器(.Template2RightBig--right-annotation),这将扩展此页面。

我怎样才能用翡翠之力做到这一点?

【问题讨论】:

    标签: html pug template-engine


    【解决方案1】:

    您可以通过新块将子页面中的变量传递到此模板中,以便有条件地控制此模板中的任何内容。

    _your-template.jade

    extends _base
    block content
      include ./partials/_main-header
      .Template2RightBig
        .container
          .row
            block content2RightBig
              block page-variables
              .col-md-3.Template2RightBig--left.column
                block left-column
              .col-md-9.Template2RightBig--right.column
                .Template2RightBig--right-header
                  block right-column-header
                if rightAnnotationVisible === true
                  .Template2RightBig--right-annotation
                    block right-column-annotation
                block right-column
      include ./partials/_footer
    

    _your-page.jade

    extends _your-template
    
    block page-variables
      - var rightAnnotationVisible = true
      //- annotation and parent wrapper will render
    

    _your-other-page.jade

    extends _your-template
    
    block page-variables
      - var rightAnnotationVisible = false
      //- annotation and parent wrapper won't render
    

    只需确保新块的范围被包含在父块中的正确位置即可。

    【讨论】:

    • 为我工作。我只想为新手补充一点,“block is scoped....”意味着将“block page-variables”放在 _base 模板中 - 在我的模板中,它只是如下。 “文档类型 html”
    猜你喜欢
    • 2021-01-13
    • 2013-07-22
    • 1970-01-01
    • 1970-01-01
    • 2011-11-14
    • 2012-04-17
    • 2011-06-26
    • 2017-12-21
    • 2013-03-14
    相关资源
    最近更新 更多