Jade模板之间怎么传参

发布于 2022-09-05 03:44:38 字数 745 浏览 17 评论 0

母版页 layout.jade

//- layout.jade
doctype html
html
  head
    meta(charset="utf-8")
    block title 
      title 网站标题
  body
    include head

    block content

文章页 article.jade

//- article.jade
extends layout

block title
    title 文章标题

block content
    h1 文章标题

在生成article.html的时候怎么让页面的标题title生成 文章标题 - 网站标题 这种模式?
同时 文章标题 在 article.jade 中重复使用,在 article.jade 头部定义变量不起效,如何解决?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文章标题 - 网站标题</title>
    </head>
    <body>
        <h1>文章标题</h1>
    </body>
</html>

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

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

发布评论

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

评论(1

小忆控 2022-09-12 03:44:38

文章页 article.jade 继承了 layout.jade,只能在所有的block代码块定义mixins、blocks 和变量,
clipboard.png

解决办法:使用block 的prepend方法
Template Inheritance

母版页 layout.jade

//- layout.jade
block pageSettings


doctype html
html
  head
    meta(charset="utf-8")
    block title
      -var siteName = '网站标题'
      if(articleTitle) 
        title= `${siteName} - ${articleTitle}`
      else
        title= siteName
  body
    block head
      include head
    
    block content

文章页 article.jade

//- article.jade
extends layout

block prepend title
    - var articleTitle = '文章标题'

block content
    h1 文章标题

运行后的页面

clipboard.png

如果要传值到head.jade中只需要在 article.jade 中加上

prepend head
    - var headVal= '一些文字'

通过layout.jade include 的 head.jade 中就可以

  header= headVal

clipboard.png

如果使用

//- pageSettings在 layout.jade 中
prepend pageSettings
  - var page = 'page title'

在head.jade, layout.jade, article.jade 中都可以使用

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