问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Jade模板之间怎么传参

头像
CXZA
    1626

    母版页 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>
    jade
    阅读 4.2k
    1 个回答
    得票最新
    头像
    CXZA
      1626
      ✓ 已被采纳

      文章页 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 中都可以使用

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进