您可以使用Express为每条路线设置不同的标题背景吗？

Question

目前，我有以下（在帕格）：

block content
  header
    .header-content
      .header-content-inner
        h1#homeHeading= title
        hr
        p
          | This is just a proof of concept
        a.btn.btn-primary.btn-xl.page-scroll(href='#about') Find Out More

这有一个特定的背景图像（Stylus）：

header
  position relative
  width 100%
  min-height auto
  -webkit-background-size cover
  -moz-background-size cover
  background-size cover
  -o-background-size cover
  background-position center
  background-image url('/images/header.jpg')
  text-align center
  color $bg-white

对于其他路线，我有前一段代码，但我想知道是否可以为每条路线设置不同的背景图像？

例如，

index would have '/images/header.jpg'
route1 would have '/images/header-1.jpg'
route2 would have '/images/header-2.jpg'
... and so on ...

谢谢

Answer 1

只需在每个路径的模板中为标题添加另一个类。例如：

block content
  header.header-1
    .header-content
      .header-content-inner

...并在样式表中设置一些新样式的背景图像：

.header-1    
  background-image url('/images/header-1.jpg')
.header-2  
  background-image url('/images/header-2.jpg')

Answer 2

将页面/路径名称作为变量发送，然后将其指定为类的一部分：

header(class="header_" + pg)

然后为header_home，header_about等定义背景图像样式。

检查您最近使用的pug版本的变量语法。

Answer 3

你有没有尝试在pug https://pugjs.org/language/inheritance.html#block-append-prepend中使用append / prepend块

//- layout.pug
html
    head
    block head
      script(src='/vendor/jquery.js')
      script(src='/vendor/caustic.js')
  body
    block content


//- page.pug
extends layout

// it gets head content from both layout and this head as well
append head
  script(src='/vendor/three.js')
  script(src='/game.js')