トップ > pug > 【pug】【Laravel】laravel-mix-pugのタグ属性にPHPの処理を入れる

【pug】【Laravel】laravel-mix-pugのタグ属性にPHPの処理を入れる

pug php laravel

テンプレートエンジンにpug(jade)を使う場合、テンプレートのタグ属性にPHPの処理を入れるのにコツがいります。

環境

pugテンプレートのコンパイルはwebpackに任せます。

Laravelのプロジェクトを作るとデフォルトでlaravel-mix.jsと言うwebpackの設定ファイルが追加されています。
今回は、laravel-mixプラグインを導入します。

www.npmjs.com

現象

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の場合、エスケープさせずに出力するには=の前に!を追加します。

pugjs.org

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>

©︎2017-2018 WebSandBag