サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Google I/O
necosystem.hirokihomma.com
目次 1. テンプレートエンジンによるテンプレート作成 2. include（インクルード） 3. extends（継承） 4. mixin（ミックスイン） 5. まとめ 1. テンプレートエンジンによるテンプレート作成 Pug（旧称Jade）の使い方 こちらの記事ではJade改めPugの基本的な使い方を紹介しました。 今回はさらにメリットを活かすことができるinclude（インクルード）とextends（継承）、mixin（ミックスイン）について説明します。 HTML、CSS、JavaScriptの拡張言語（メタ言語）の紹介 こちらでも説明している通り、HTMLのみでは複数にまたがるページで、共通部分を管理するのが少々手間となります。Pugを始めとするテンプレートエンジンではそれが格段に楽になります。 Pugでは、include（インクルード）とextends（継承）、mixin（ミック
このページではHTMLを生成するJavaScript製テンプレートエンジンのPugについて解説します。 PugはJavaScript製のテンプレートエンジンですので、コメントアウトにはHTMLのように<!-- -->ではなくJavaScriptと同じようなコメントアウトが使えます。 コメントアウトの種類は//と//-の2種類あります。その違いはコンパイルされた時にHTML内に記述を残すか、残さないかになります。 // HTMLに残るコメント //- HTMLに残らないコメント これをHTMLへコンパイルすると、 <!-- HTMLに残るコメント--> のようになり、//-の方は残らなくなります。 複数行をまとめてコメントアウトする場合は // HTMLに残る複数行のコメント HTMLに残る複数行のコメント //- HTMLに残らない複数行のコメント HTMLに残らない複数行のコメント のよ
目次 1. Pugとは 2. 導入方法 3. コンパイル 4. Pugの文法 5. 変数と制御文（ループ、条件分岐） 6. その他のコード 1. Pugとは HTML、CSS、JavaScriptの拡張言語（メタ言語）の紹介 こちらで紹介している通り、HTMLを生成するためのテンプレートエンジンの一つです。元々はJadeという名称でしたが、商標権の都合上Pugへと名称変更がありました。 GitHubリポジトリ https://github.com/pugjs/pug 公式ドキュメント https://pugjs.org/api/getting-started.html Pugはnode.js製のテンプレートエンジンですので、node.js環境が前提となります。 また、場合によってはgulpなどのタスクランナーも必須になるかと思います。 2. 導入方法 まずはnpmでグローバルにコマンドライ
このページを最初にブックマークしてみませんか？
『necosystem - ねこしすてむ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
