logo标签列表

如何使用jade模板将块添加到父级

node.jsinheritanceincludeappendpug
10

我正在尝试使用jade模板创建一个模块化布局。我想从子元素向其父级的父级中添加一个脚本块。我不确定是否可能。

这是我的结构

layout.jade

head.jade

index.jade

users.jade

layout.jade: doctype html#html include head

    body
        block content

head.jade:

head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    block scripts

index.jade:

extends layout

block content
    h1 Hello

    include users

users.jade

block append scripts
    script(src='/javascripts/user.js')  

ul
    each user, i in users
        li(class=i+"-"+user) #{user}

我期望得到的HTML输出应该是：

<!DOCTYPE html>
<html id="html">
    <head>
        <title>Index</title>
        <link href="/stylesheets/style.css" rel="stylesheet">
        <script src="/javascripts/user.js">  <!--// append this from user.jade into head.jade //-->
    </head>
    <body>

        <h1>Hello bob</h1>
        <li class="0-user1">user1</li>
https://github.com/visionmedia/jade/issues/864 -- 看起来它并没有得到真正的支持。 - jcollum
2个回答
4
这是可能的，而且在jade文档中有 示例 可以完全做到这一点。你的代码看起来都很好，除了你需要缩进 users.jade 中的 script 标签，使其缩进到 block append script 指令下方。
嘿，彼得，感谢你的回复。好吧，似乎它不起作用，所以我不确定我做错了什么。意图在复制和粘贴时丢失了，但还是谢谢你的提示。 - Alx
请提供更多细节。请修复您的格式或为文件创建gist。空格很重要，因此我们需要准确的表示才能帮助您。您是在express中还是在命令行中执行此操作？您的实际输出HTML是什么？ - Peter Lyons
我已经编辑过了。输出结果如预期，只是脚本部分缺失。我正在使用命令行（supervisor app.js）。 在users.jade中扩展会导致layout.jade被插入两次。因此，在子级中从其父级的父级进行扩展显然是错误的。 - Alx
2
尝试使用“追加脚本”而不是“块追加脚本”？ - a paid nerd
1
我尝试使用相同的方法来定义一个标签控件。 我在不同的jade文件中定义了页面。 每个jade文件都附加了一个包含所包含的选项卡页的块。 直到我在我的'index.jade'中向该块附加了一些内容，它才起作用，如下所示：
extends layout

append scripts
    //- dummy

block content
    h1 Hello

    include users

然而，我也想补充一点，自从我添加了多个.jade文件后，我遇到了以下问题。每个文件都包含jade模板，使用block append添加选项卡页，但添加页面的顺序被颠倒了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接