今回は、extendsで継承しているHTMLファイルの継承部分がすべて<body>内に含まれてしまう問題とその対処方法を記した記事になります。
問題の要因
extendsで継承されているhtmlファイル(詳しく言うとJadeファイル)に、日本語を含めて保存したときファイル文字コードをUnicodeにしました。そして、そのファイルを継承しているページを開くと継承部分が<body>内にすべて含まれてしまい、先頭行にあったDOCTYPE htmlが文字列として表示されてしまいました。
その時のファイルlayoutとindex。
layout
index
表示されたHTML
解決方法
解決方法ですが、先頭行にあるDOCTYPE htmlの前に改行を入れることでちゃんと継承させることができました。理由はわかりません。
layout - わかりずらいですがdoctype htmlの上には改行が含まれています。
表示されたHTML
追加情報
継承されている側のファイルに改行を入れて問題を解決しましたが、継承している側も文字コードをUnicodeにするとファイルの先頭行が正常に処理されませんでした。こちらも同様に、先頭に改行を入れることで解決することができました。