Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

jade

"Tag Interpolation"機能をつかって、タグ文中に別のタグをネストなしでねじ込む

jade/pugでは、構造はネストで表現します。 が、見通しが悪くなるから短いトコではネストしたくない……という場合、 今回の"Tag Interpolation"記法が使えます。 実際のところ これが p.mew hoge#[strong.yeah fuga]piyoこうなります。 <p class="mew">hoge<strong class="yeah">fuga</strong>piyo</p> 参考もと…

pugでmixinを使いリンクリストめいたものをだす

pugでmixinを使いリンクリストめいたものをだす方法です。 mixinはテンプレートみたいなもんです。 実際のところ Idで内部リンクするような事例の場合、 以下のような書き方でいけます。 mixin link-block .container .row .col-xs-12 a(href=arguments[0], …

includeしたpugファイルがError: ENOENT: no such file or directory, stat '/{DIST}/.#_pagename.pug'とか出たら、部分ファイルの保存にしくじってる

$ cordova emulate ios Error: ENOENT: no such file or directory, stat '/Users/shuzo_kino/salesforce/contactsApp/www/.#_page7.pug'この場合、pugのinclude先である_page7.pugがブロックしてる可能性があります。 ちゃんと保存してあげると消えます。

gulp-html2jadeを使って既存のHTMLファイルをjade/pugに転換する

既存のHTMLをjade/pugに変換する方法です。 このgulpとか言うコ、弊社のコワイ人たちが使ってるツールという激しい偏見があったので極力避けてました。 でもシカタナイネ。 いつまでもWEBブラウザ版使うわけにもいかんし……。 実際のところ pugは新しい事もあ…

jadeはpugという名前になり、少し記法が変わりました

すっかり前線から離れて忘れまくっているのでメモ。nodeJsフレンドリーなHTMLエンジンjadeはpugという名前になっています。 ソレに加え、2016年8月からpug v2として一部記法がよりスマートになりました。 また、ドキュメント化されてないメソッドやイケ…

bottleとsqlite3を連携させて簡単なメモ表示ツール その4:フロントエンド・フレームワークを使う

前回はJadeを導入しました。今回はCSSやJS、画像やフォントがテンコ盛りのフロントエンド・フレームワークをbottleで使う方法を考えます。 実際のところ 導入 designmodo.github.io 上記サイトから、twitter-bootstrapの拡張版「Flat UI」を頂いてきます。 …

bottleとsqlite3を連携させて簡単なメモ表示ツール その3:テンプレートエンジンJadeを使う

bottleにはデフォでerbっぽいテンプレートエンジンが搭載されています。 ……とはいえ、今更タグ閉じなんてカッたるい事をやる気にもなりません。 ここは一つ先人の叡智をお借りして、jadeをbottleで使ってしまいましょう 実際のところ 導入 まずは導入。 jade…

express4でjadeをつかう

あまりに久々すぎて完全にやり方を忘れてたのでメモ 実際のところ 単純に、トップページにjadeをレンダリングした内容を表示したいだけなら、以下の通りです。app.js var express = require('express'); var app = express(); app.use('/data', express.stat…

jadeではインデックスつきの繰り返し文が使える

jadeでは、インデックスつきの繰り返し文が使えます。 divにidを振る場合なんかには有効ですね。 実例 h1= "title" hr for item, index in ["as", "you", "like"] h2= item p= index hr以上のものは、こうなります。 <h1>title</h1><hr/><h2>as</h2><p>0</p><hr/><h2>you</h2><p>1</p><hr/><h2>like</h2><p>2</p><hr/> 参考もと Learn Jade -</hr/></hr/></hr/></hr/>…

jadeのmixin機能で似たスクリプトをまとめる

mixiin機能は似た機能をまとめるときに便利なスクリプトです。 実際のところ 引数なし とくに引数があるわけではない場合、こちら。 カード表示系のページでも有効かもしれません。 mixin strong hr p strong! hr +strong +strong<hr/><p>strong!</p><hr/><hr/><p>strong!</p><hr/> 引数あり li</hr/></hr/></hr/></hr/>…

jadeの&attributes記法が、かなりつかえる

&attributes記法HTMLの要素をHashっぽい形で追加できる記法です。 div#foo(name="me")&attributes({'data':42},{'year':2015})これが <div id="foo" name="me" data='42' year="2015"> となります。ただ、この記法の真価はmixin記法と合わせる事で発揮されます。 詳しくは後日書きますが、mixinは似たモノを</div>…

テンプレートエンジンのはなし:slimの次はjade?

最近仕事でnode.jsを使う機会が増えてきました。*1 普段はslimを使ってるワタシですが、これはruby文化と親和性が高いものでnodejs向きじゃないそうです。 javascriptフレンドリーなテンプレートエンジンは jade skim emblem.js てのがあるそうです。 現状で…