Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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 てのがあるそうです。 現状で…