IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【HTML】継承されたファイル文字コードをUnicodeに変更するとheadの中身がなくなる問題の対処法

f:id:Surprisedblog:20200419071904p:plain


 

今回は、extendsで継承しているHTMLファイルの継承部分がすべて<body>内に含まれてしまう問題とその対処方法を記した記事になります。

 

 

問題の要因

extendsで継承されているhtmlファイル(詳しく言うとJadeファイル)に、日本語を含めて保存したときファイル文字コードをUnicodeにしました。そして、そのファイルを継承しているページを開くと継承部分が<body>内にすべて含まれてしまい、先頭行にあったDOCTYPE htmlが文字列として表示されてしまいました。

その時のファイルlayoutindex。

layout

f:id:Surprisedblog:20200419061423p:plain

 

index

f:id:Surprisedblog:20200419061302p:plain

 

表示されたHTML

f:id:Surprisedblog:20200419061222p:plain

 

 

 

解決方法

解決方法ですが、先頭行にあるDOCTYPE htmlの前に改行を入れることでちゃんと継承させることができました。理由はわかりません。

layout - わかりずらいですがdoctype htmlの上には改行が含まれています。

f:id:Surprisedblog:20200419062658p:plain

 

表示されたHTML

f:id:Surprisedblog:20200419062558p:plain

 

 

 

追加情報

継承されている側のファイルに改行を入れて問題を解決しましたが、継承している側も文字コードをUnicodeにするとファイルの先頭行が正常に処理されませんでした。こちらも同様に、先頭に改行を入れることで解決することができました。