1

有没有办法检查您在 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

谢谢！

4

3 回答 3

2

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

例如，

布局.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

主页.jade：

extends ./layout.jade

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

正常的玉：

extends ./layout.jade

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

然后让你所有的正常页面使用normal.jade和你的主页使用homepage.jade。

于 2014-08-04T05:57:12.353 回答
1

我知道有两种方法。

选项 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因此它们不需要任何更改即可使此方法起作用。

于 2014-08-04T03:21:34.620 回答
0

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

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

_layout 以外的布局可以在 _data.json 中指定。如果您需要更好地控制布局，或者如果您想将布局命名为 _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 的include关键字，您也可以将数据传递给包含。然后处理不同变量值的逻辑将在一个head.jade文件中。您的示例可能如下所示。

foo.jade：

doctype html
html
  body
    != partial("./includes/head.jade", { page: bar })

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

head.jade现在应该可以访问page变量了。

第三个选项可以利用currentHarp 注入模板的对象。如果您正在访问//site.com/foo/bar,current.source === "bar"和current.path === ["foo", "bar"]. 您可以使用此对象来动态设置类名等。您可以在此处阅读更多信息：http: //harpjs.com/docs/development/current

于 2018-02-17T08:14:34.833 回答