将html元素传递到jade文件中

发布于 2024-12-04 11:39:41 字数 888 浏览 2 评论 0原文

是否可以将 HTML 元素传递到 jade 文件中,例如,我希望以下内容用文本填充 p 元素,以及一个代码元素,其中包含一些嵌套在 p 元素内的文本。

包含字符串的 JSON

var news = {
  one : {
    title : "Using JSON",
     body : "Using JSON is a great way of passing information into the jade template files."+
            "It can be looped over using jades each syntax <code>test</code>"
  },
  two : {
    title : "",
    body : ""
  }
}

路由 HTTP 请求

// Routes
app.get(navigation.home.uri, function(req, res){ //Home
  res.render(navigation.home.url, {
    title: navigation.home.title,
    navigation: navigation,
    news: news
  });
});

Jade 文件片段,每个新闻项都有一个循环

  section#news
    - each item in news
      article(class="news")
        header
          h2 #{item.title}
        p #{item.body}

Is it possible to pass HTML elements into a jade file e.g. I would like for the following to populate the p element with text, and a code element with some contained text nested inside the p element.

JSON containing strings

var news = {
  one : {
    title : "Using JSON",
     body : "Using JSON is a great way of passing information into the jade template files."+
            "It can be looped over using jades each syntax <code>test</code>"
  },
  two : {
    title : "",
    body : ""
  }
}

Routing the HTTP request

// Routes
app.get(navigation.home.uri, function(req, res){ //Home
  res.render(navigation.home.url, {
    title: navigation.home.title,
    navigation: navigation,
    news: news
  });
});

Jade file snippet, with a loop for each news item

  section#news
    - each item in news
      article(class="news")
        header
          h2 #{item.title}
        p #{item.body}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

肥爪爪 2024-12-11 11:39:41

使用 !{item.body} 而不是 #

Use !{item.body} instead of #

痴者 2024-12-11 11:39:41

对于 @Jack 给出的示例,接受的答案确实是正确的,但是我在没有初始 p 标记的情况下使用了它:

block content
    .jumbotron
        !{template.sections.welcome}
    .panel.panel-default
        !{template.sections.headline}

这是不正确的,并且会抛出一些 Jade 警告,例如

Warning: missing space before text for line 6 of jade file "~/demo/views/home.jade"

This is because 而不是使用未转义缓冲代码它使用插值,旨在与长字符串一起使用。

因此,正确的语法(如此处所述)是:

block content
    .jumbotron
        != template.sections.welcome
    .panel.panel-default
        != template.sections.headline

希望这可以节省一些尝试时间深入了解这些警告!

The accepted answer is indeed correct for the example given by @Jack, however I used this without an initial p tag:

block content
    .jumbotron
        !{template.sections.welcome}
    .panel.panel-default
        !{template.sections.headline}

And this is not correct and will throw up some Jade warnings like

Warning: missing space before text for line 6 of jade file "~/demo/views/home.jade"

This is because instead of using Unescaped Buffered Code it is using interpolated and is intended for use with long strings.

So the correct syntax (as explained here) would be:

block content
    .jumbotron
        != template.sections.welcome
    .panel.panel-default
        != template.sections.headline

Hope this saves someone some time trying to get to the bottom of those warnings!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文