Expressで各ルートに異なるヘッダーの背景を設定できますか？瞬間

Question

、Iは（パグに）以下た：

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 

これは、特定の背景画像（スタイラス）を有する：他のルートの

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_aboutな​​ど、header_homeの背景画像のスタイルを定義

最近変更されているので、使用しているpugのバージョンの変数構文を確認してください。私は「 -

Answer 3

は、私は同様の試みが、私は、ヘッダ.header-1 {...}を使用し、それが機能しなかったパグに https://pugjs.org/language/inheritance.html#block-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')