Question

有没有办法检查你在Jade的哪个页面并包含基于该页面的内容（部分页面或特定的CSS样式）？例如：

如果我在homepage，请仅包含HOMEPAGE-head.jade

否则 - 包括NORMAL-head.jade

这是一个上下文示例：

doctype html
html
  body
    if HOMEPAGE
      include ./includes/HOMEPAGE-head.jade
    else
      include ./includes/NORMAL-head.jade

    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

谢谢！

Answer 1

或者，您可以构建您的Jade以使用继承来实现您想要的。

如，

layout.jade：

doctype html
html
  body
    block header
    block content
      h1 My Site
      p Welcome to my super lame site.
    block footer
      include ./includes/foot.jade

homepage.jade：

extends ./layout.jade

block header
  include ./includes/HOMEPAGE-head.jade

normal.jade：

extends ./layout.jade

block header
  include ./includes/NORMAL-head.jade

然后让所有普通网页使用normal.jade和您的主页使用homepage.jade。

Answer 2

我知道有两种方法。

选项A：2个布局并扩展

制作两个布局：layout.jade和layout-homepage.jade，相应地更改include行。您的大多数网页都会extends layout，但index.jade会extends layout-homepage。

选项B：变量块

layout.jade中的

：

- var HOMEPAGE = false;
block variables
doctype html
html
  body
    if HOMEPAGE
      include ./includes/HOMEPAGE-head.jade
    else
      include ./includes/NORMAL-head.jade

    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

然后在index.jade：

block variables
  - HOMEPAGE = true;
h1 This is your home page template...

您网页的所有其余部分将默认为HOMEPAGE = false，因此他们无需进行任何更改即可使此方法有效。

Answer 3

我建议的选项是使用单独的布局。它利用了Harp已有的系统，并有助于维护“不同内容，不同文件”的概念。使用Harp，您可以为 _data.json 或 _harp.json 文件中的任何给定页面指定显式布局。

来自http://harpjs.com/docs/development/layout

可以在_data.json中指定_layout以外的布局。这是如果您需要更好地控制布局，或者如果您需要，则非常有用将您的布局命名为_layout以外的其他内容。

myapp.harp.io/
    |- _layout.ejs
    |- index.ejs
    |- about.md
    +- articles/
      |- _data.json
      |- _an-example-layout.ejs
      |- _another-one.jade
      |- article-one.md
      +- article-two.md

在这里，可以通过在该文件夹的_data.json文件中指定布局来使article-one.md使用_an-example-layout.ejs：

{
  "article-one": {
    "layout": "_an-example-layout",
    "title": "Example Title"
  },
  "article-two": {
    "layout": "_another-one",
    "title": "Another Example Title"
  }
}

现在，每篇文章都将使用指定的布局。

如果您想要制作一个微小的差异，并且您无法证明拥有一个完全独立的模板，那么如果您使用Harp的partial()函数而不是Jade的{{1}，您也可以将数据传递给include。 }关键字。然后，处理不同变量值的逻辑将在单个include文件中。您的示例可能如下所示。

foo.jade：

head.jade

head.jade 现在应该可以访问页面变量。

第三个选项可以利用Harp注入模板的doctype html html body != partial("./includes/head.jade", { page: bar }) h1 My Site p Welcome to my super lame site. include ./includes/foot.jade对象。如果您正在访问current，//site.com/foo/bar和current.source === "bar"。您可以使用此对象动态设置类名等。您可以在此处阅读更多相关信息：http://harpjs.com/docs/development/current

Jade包含检查实际页面的条件

3 个答案:

选项A：2个布局并扩展

选项B：变量块