pug

【pug】『inputタグの中には要素を入れられない』を間違うとどうなるか?

webを生業にしている人にとっては当たり前の話です。 最近、pugでwebフォームを作る機会がありました。 webフォームでラジオボタンを操る時に、ラジオボタンのテキストでも選択できるようにする手段はいくつかあります。 その手段の一つが、下記のようにinpu…

【webpack】【Pug】webpackのpugテンプレートコンパイル設定

静的ページで構成されるページであっても、なるべくならテンプレートエンジンを使用して作りたいものです。 今回は、Pugテンプレートについて取り上げます。 pugjs.org Pugについては別の機会にするとして、webpackでコンパイルするための設定について記載し…

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

テンプレートエンジンにpug(jade)を使う場合、テンプレートのタグ属性にPHPの処理を入れるのにコツがいります。 環境 pugテンプレートのコンパイルはwebpackに任せます。 Laravelのプロジェクトを作るとデフォルトでlaravel-mix.jsと言うwebpackの設定ファイ…

【pug】pugの変数(var)にPHPタグを使う方法

pugでは、テンプレート内で変数を指定できます。 Interpolation – Pug ページ毎に変わる要素(title,keyword等)を作る時は、変数に変わる要素を入れて切り替えると言う事をすると思います。 その際、phpをはじめとしたサーバーサイドの値も反映できるように…

【pug】javascriptを直接書く方法

htmlテンプレートにpugを選んだ場合、素のscriptを書こうとすると迷います。 今回は、pugでjavascriptを書く方法について記載します。 また、本記事で記述するコードは、以前投稿したコードです。 blog.websandbag.com 期待される出力結果 下記のように記述…

【pug】【npm】インデントが原因のビルドエラーでにっちもさっちもいかない時の対処方法

HTMLのテンプレートエンジンにpugを使用したのですが、初歩的な事でどハマりしました…。 github.com 私の場合、Laravelで作成したプロジェクトにデフォルト設定される、webpackにpugライブラリを追加していました。 症状 ソース block content block nav inc…

©︎2017-2018 WebSandBag