パグ - 不正なネスティングコンパイル後 - などが対編集

拡張：は、以下のコードではパグ - 不正なネスティングコンパイル後 - などが対編集

をグーグルを助けるために、正しい答えに基づいてタイトルを変更、404.pugページで私h2タグはなってきて続けています404.pugページにheader.pugを含めると、h1タグの子になります。

Header.pug

doctype 
html 
    head 
    meta(charset='utf-8') 
    title Express Guestbook 
    link(href="to/bootstrap.min.css", rel="stylesheet") 

    body.container 
    h1 Express Guestbook 
     a.btn.btn-primary.pull-right(href="/new-entry") Write in Guestbook 

    //- putting this div here so that whatever code 'include'-s this 
    //- header, will be a child of this div 
    div

404.pug

include header.pug 

    //- This part becomes child of <a> tag, instead of <div> 
    h2 404! Page not found 

include footer.pug

誰かが

を説明することができます：ここでは私が働いているコードです

どうしてですか？そして、
h2タグをh1の兄弟として保ち、aタグの子にならない可能性がありますか？

今すぐ問題を解決するために可能な方法は、このように、代わりにただ1つのdiv要素のネストされたdivの（別の内部の1つのdivを）持っているだろう：

body.container 
    h1 Express Guestbook 
    a.btn.btn-primary.pull-right(href="/new-entry") Write in Guestbook 

    //- ugly hack 
    div: div

しかし、これは感じていません良い..

出典

2017-03-04 Somjit

include header.pugの代わりにextends header.pugを実行するとよいでしょう。 includeは、ページ上に他に何があるか心配することなく、目的のファイルからすべてのコードを任意に含みます。それはあなたがここで欲しいものではありません。 extends header.pugを指定すると、header.pugファイルがレンダリングされ、さらにblockを使用して定義する追加コードがレンダリングされます。だから、このように見えるようにコードを変更する必要があると思います：

doctype 
html 
    head 
     meta(charset='utf-8') 
     title Express Guestbook 
     link(href="to/bootstrap.min.css", rel="stylesheet") 

    body.container 
     h1 Express Guestbook 
      a.btn.btn-primary.pull-right(href="/new-entry") Write in Guestbook 

     //- putting this div here so that whatever code 'include'-s this 
     //- header, will be a child of this div 
     div 
      block content

header.pugはblock contentラインを使用すると、別のパグファイルであることをblock contentを定義することを選択何に置き換えられます。これは次のファイルでもっと意味をなさない。

404.pug

extends header.jade //- Everything that is a child of "block content" replaces the "block content" //- from our "header.pug" file block content h2 404! Page not found

結果のHTML出力これは素晴らしいですので...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Express Guestbook</title> <link href="to/bootstrap.min.css" rel="stylesheet"> </head> <body class="container"> <h1>Express Guestbook<a href="/new-entry" class="btn btn-primary pull-right">Write in Guestbook</a></h1> <div> <h2>404! Page not found</h2> </div> </body> </html>

出典

2017-03-05 02:59:09

です！私はドキュメントのコンセプトについて読んだことがありましたが、今はもっと意味があります！ – Somjit

うれしい私は助けることができました！ 'extend'がどのように動作するかについては、こちらをご覧ください（https://pugjs.org/language/inheritance.html） –

パグ - 不正なネスティングコンパイル後 - などが対編集

答えて

関連する問題