こんにちは iijmyaです。 Gruntのプラグイン'grunt-contrib-jade'でjadeファイルをコンパイルする際に、 jadeファイルで使いたい値をGruntfileから渡したり、あるディレクトリ以外のjadeファイルをコンパイルしたかったりしたので、自分なりにGruntfile.coffeeに書いてみました。 1.jadeファイルで使いたいオブジェクトをGruntfileから渡す 外部から変数を定義するときは dataオプションを使用します。 data: function(dest, src) return { from: src, to: dest } この関数は宛先(dest)と送信元(src)を引数として持ち、データオブジェクトを返します。 例えばjadeファイル内で、ページによって異なるクラス名を付けたいシチュエーションがありました。 変数bodyに、コンパイル
grunt.initConfig({ //... jade: { compile: { options: { pretty: true, //htmlをインデント表記させる data: function(dest, src){ //dest が生成するhtml、srcが参照元jadeファイル var data_file = "./json/data.json"; //生成するhtmlのファイル名によって、使用するJSONデータを変える if( dest.match('index') ){ data_file = "./json/data_index.json"; }else if( dest.match('page1') ){ data_file = "./json/data_page1.json"; } //... return require(data_file); } }, file
Jade をもっと便利に使うための Tips。インターネットでかき集めたものを実際に試して咀嚼してみた。 Gruntfile の設定のみで出力コードを変更する 地獄の“大開発者”養成ブログ — grunt-contrib-jadeのめんどくさいパラメータ渡しをラクにしよう 例えば about/about.html というページがあって、titleタグだけ index.html と変えたい場合。外部コンフィグファイルを2つ用意する。 ベースとなる config.json { "title": "My website", "description": "My website description", "keywords": "hoge, hoge, hoge", "items" : [ { "pic": "apple.jpg", "alt": "りんご", "link": "http://り
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
GTA5の発売が待ち遠しい三十路、minamiです。 前回インストールからファイルをコンパイルするところまでさわってみたJadeで、更に便利な機能を使ってみました。 extendsとblock Jadeではテンプレートの継承を行うことができます。サンプルとして下記のような_layout.jadeを作りました。 !!! 5 html(lang="ja",dir="ltr") head block meta block title body block header block content block footer 短すぎてなんのことやらわかりませんが、これはテンプレートのひな形です。 これを拡張する形で、index.jadeを作ります。 extends _layout block meta meta(http-equiv="content-type",content="text/html
元ネタ: マークアッパー的 Haml入門21の手引き Slim 版書いた: マークアッパー的 Slim 入門21の手引き | e2esound.com業務日誌 Jade は, JavaScript 製のテンプレートエンジンで HTML を効率的に生成するための記法です。Haml の影響を受けています。関係としては, Haml > Jade > Slim といったように影響を受けているため, それぞれ似通った機能を持っています。 Haml と Slim の同様の記事があるのでどうせなら Jade もあれば比較できるのかな? ということで書いてみます。 Jade は実務で使用したことがないので誤りがある可能性があります。一通りドキュメントは確認していますが誤りがあればご指摘いただけるとありがたい。 ※ ターミナルでコマンド実行を記述する場合$ command のように頭に $ をつけて記述して
こんにちは、@nazomikanです (この記事はNode.js Advent Calendar 2013の10日めの記事です) nodeでテンプレートエンジンといえばjade その一方で公式ドキュメントで書かれていることだけではだいたい痒い所に手が届かないのでissueから拾い集めたノウハウとか将来的な話とかを書きます 属性の存在が条件によって分かれるケースの書き方 urlが存在するときdata-url属性をつける //truthy: <p data-url="xxx"> //falsy: <p> in jade: p(data-url=(url ? url : false)) 属性の値が条件によって分かれるケースの書き方 boolがtruthyの時はclass="is-show"を、そうでない時はclass="is-hide"をつける //truthy: <p class="is-sh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く