jade模板简单使用及页面之间嵌套关系

html-css013

jade模板简单使用及页面之间嵌套关系,第1张

Jade既然是模板引擎,页面中有公用的部分肯定是要封装成一个模板,在其他页面需要使用的时候直接调用就好。调用的时候有两种方法:

一    使用include引入模板,模板中的css,js可以正常加载,但是如果想在当前页面再引入css,js文件页面就会报错,目前还不知道怎么解决

    demo01.jade

  head.jade

footer.jade

demo01.jade生成的html

二是用extends引入模板

  index页面

      page6.jade

下面是生成的html页面

这样引入既可以把相同的css和js写到一个模板里面多次使用,同时也可以在引用模板的index.jade页面再引入单个的css和js,并可以直接写内部样式和js逻辑。值得注意的是,模板page06.jade中引入的js要放到block append scripts上面,如果放到下面渲染出来的页面公用js会在又引入的js文件下面(就会出现你虽然引入jquery了,但是你index.jade模板中使用$依然报错)。

另外,index.jade页面的block append scripts(这个scripts是个名字,随便命名),是模板中引入的js放到index.jade页面引入js的前面,还有一种block prepend scripts的写法,模板中引入的js放到index.jade页面引入的js后面(不推荐使用)。

温馨提示:jade语法对缩进要求非常严格,所以父级和子级的缩进是两个字符,缩进有问题会报错吆

css的parent样式如何用

directly?)

一般来说,当我们有一些应该一起设置样式的子元素时,我们应该将该样式放到父级并让继承工作,还是给孩子们自己? 例如,如果我们有如下结构:

<div class="foo">

<p>should be 2em</p>

<ul>

<li>should be 2em</li>

<li>should be 2em</li>

</ul>

</div>

然后我应该这样做:

.foo {font-size: 2em}

或类似的东西?:

.foo p, .foo li {font-size: 2em}

我认为这个问题非常基本,但很抱歉我找不到任何好的谷歌搜索结果。

Generally speaking, when we have some child elements that should be styled together, should we put that style to the parent and let the inheritance work, or to the children themselves? For example, if we have a structure as below:

<div class="foo">

<p>should be 2em</p>

<ul>

<li>should be 2em</li>

<li>should be 2em</li>

</ul>

</div>

then should I make it as this:

.foo {font-size: 2em}

or something like this?:

.foo p, .foo li {font-size: 2em}

I think this question is very basic, but sorry I couldn't find any good google result.