Можете ли вы задать другой заголовок для каждого маршрута с помощью 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 и т.д.

Проверьте синтаксис переменной для версии мопса, который вы используете, поскольку он недавно изменился.

Answer 3

Вы пробовали с помощью добавления/блоки перед именем мопса 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')