テンプレートエンジンにpug(jade)を使う場合、テンプレートのタグ属性にPHPの処理を入れるのにコツがいります。
環境
pugテンプレートのコンパイルはwebpackに任せます。
Laravelのプロジェクトを作るとデフォルトでlaravel-mix.js
と言うwebpackの設定ファイルが追加されています。
今回は、laravel-mixプラグインを導入します。
現象
htmlのlang属性に、config/app.php
のlocal
の値を出力するために下記のようなpugファイルを用意します。
doctype html html(lang = "{{ str_replace('_', '-', app()->getLocale()) }}") head body p {{ config('app.name', 'Laravel') }}
生成結果
実際に生成すると、>
がエスケープされてしまいます。
そのため、ブラウザで表示しようとするとsyntax errorで実行できません。
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()-gt;getLocale()) }}"> <head></head> <body> <p>{{ config('app.name', 'Laravel') }}</p> </body> </html>
解決方法
pugの場合、エスケープさせずに出力するには=
の前に!
を追加します。
doctype html html(lang != "{{ str_replace('_', '-', app()->getLocale()) }}") head body p {{ config('app.name', 'Laravel') }}
生成結果
これで、属性を付与できるようになります。
実際にビルドされたbladeファイルを見ても、エスケープされずに表示されます。
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head></head> <body> <p>{{ config('app.name', 'Laravel') }}</p> </body> </html>
実際に生成されるHTMLも下記のように、laravelの設定値が取れるようになっています。
<!DOCTYPE html> <html lang="jp"> <head></head> <body> <p>Laravel</p> </body> </html>