翡翠の1ページだけに背景画像を追加する方法

普通のHTMLでこれを行う方法は分かっていますが、bodyタグにクラスを追加してCSSのタグを変更することはできますが、一緒に遊ぶボディータグを持っているこのようなMy Jadeファイル。翡翠の1ページだけに背景画像を追加する方法

index.jade（私は背景画像を持つようにしたいページのみ）

extends layout 

block main 
    .container 
     h1 Hello world

私は、これは動作しません

body.index { 
    background: url(images/background.jpg); 
    background-size: cover; 
    z-index: -1; 
}

をやってみました。私はまた、コンテナクラスにbackgroundimageクラスを追加し、その幅と高さを以下のように100％にしてみましたが、layout.jade（ファイルインデックスが拡張されています）の前に来る別のdivがあるため、最適ではありません。このページで

extends layout 

block main 
    .container.backgroundimage 
     h1 Hello world

以下のコメントで提案し、index.jadeで私body_class = indexを設定するように私はthisをやってみました。そして、CSSで.indexをスタイルしようとしましたが、これもうまくいきません。

私はこれを達成する方法がありますか？

http://stackoverflow.com/questions/29089925/pass-variables-to-base-layout-from-extending-jade-templateにはあなたの答えがあります。 –

基本的に、その変数が設定されている場合はbodyタグのクラスを適用するようにレイアウトを変更し、ページ内から設定する必要があります。 –

@WoodrowBarlow私はこれをやろうとしましたが、index.jadeで 'body_class = 'index''を作成し、CSSで' .index'のスタイルをとろうとしましたが動作しません – OneMoreQuestion

このようなもの（またはページがロードされた後に相当するもの）を使用して、ドキュメント本体にインデックスクラスを追加する必要があります。

extends layout 

block main 
    - document.getElementByTagName("body").classList.add("index") 
    .container.backgroundimage 
     h1 Hello world

それとも単にあなたのindexページ上のコンテナ要素に.indexクラスを適用し、コンテナはページ全体の背景にまたがることを確認してください可能性があります。（これは、レイアウトの内容によっては意味をなさない場合もあります）。

2016-08-26 20:40:40 WookieCoder

私は上記の答えを受け入れましたが、ページをカスタマイズした別のスタイルシートを作成しました。はるかに簡単な解決策と思われる。

2016-08-29 02:39:43 OneMoreQuestion

答えて