如何在Jade中创建一个可重复使用的标记

Question

What I'm trying to accomplish.

What I'm trying to do is actually really simple and the Jade template engine should be able to help me out quite a bit with it, but I'm running into some snags.

I'm building a site that uses a lot of semi-transparent elements like the one in this jsFiddle: http://jsfiddle.net/Chevex/UfKnM/
In order to make the container background be semi-transparent but keep the text opaque this involves 3 elements:

• A container DIV with position: relative
• A child DIV with position: absolute , a background color, height/width set to 100%, and its opacity set to the desired level.
• Another child DIV for the content with no special positioning.

It's pretty simple and I use it fairly effectively on CodeTunnel.com .

How I want to simplify it.

I'm re-writing CodeTunnel.com in node.js and the Jade template engine seems like it could greatly simplify this piece of markup that I re-use over and over again. Jade mixins look promising so here's what I did:

1. I defined a mixin so I could just use it wherever I need it.

    mixin container .container(id=attributes.id) // attributes is an implicit argument that contains any attributes passed in. .translucentFrame .contentFrame block // block is an implicit argument that contains all content from the block passed into the mixin. 

2. Use the mixin, passing in a block of content:

    +container#myContainer h1 Some test content 

   Generates:

    <div id="myContainer" class="container"> <div class="translucentFrame"></div> <div class="contentFrame"> <h1>Some test content</h1> </div> </div> 

So far everything works great! There is just one problem. I want to use this mixin in a layout.jade template and I want the child template to be able to use block inheritance. My layout.jade file looks like this:

doctype 5
mixin container
    .container(id=attributes.id)
        .translucentFrame
        .contentFrame
            block
html
    head
        title Container mixin text
    body
        +container#bodyContent
            block bodyContent

Then in another jade file (index.jade) I extend layout.jade:

extends layout

block bodyContent
    h1 Some test Content

Everything looks to be in order but the jade parser fails:

I assume it has something to do with the block keyword conflicting. Inside a mixin block is an implicit argument containing the block passed into the mixin, but when extending a jade template block is a keyword that identifies a block of markup that is to be substituted in the equivalent block in the parent template.

If I replace the block bodyContent that I'm passing into the mixin with any other markup then everything works fine. It's only when I try to pass in a block definition that it gets upset.

Any ideas?

Answer 1

I'd suspect that, because mixins define their own functions , the block bodyContent is being defined in different scope inaccessible from index.jade .

What you can try instead is to move the use of the mixin to the inheriting view since mixins are "hoisted" :

layout.jade :

doctype 5

mixin container
    .container(id=attributes.id)
        .translucentFrame
        .contentFrame
            block

html
    head
        title Container mixin text
    body
        block bodyContent

index.jade :

extends layout

block bodyContent
    +container#myContainer
        h1 Some test content