I'm trying to create a modular layout using jade template. I would like to append a script block from a child into its parents parent. I'm not quite sure if its possible at all.
Here is my structure
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}
My desired html output should be:
<!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>
This should be possible, and there are examples in the jade documentation that do exactly this. Your code all looks fine except you need to indent your script
tag in users.jade
so it is indented below the block append script
directive.
I tried to use the same approach to define a tab-control. I defined the pages in separate jade-files. Each jade-file appended a block that contained the tab-page which was included. It also did not work until I appended something to the block in my 'index.jade' as below:
extends layout
append scripts
//- dummy
block content
h1 Hello
include users
However I also would like to add that since I added multiple .jade files I ran in the following. Each file inclued jade-template used block append to add a tab-page but the order in which the pages were added was reversed.