参考
環境など
- OS X Yosemite 10.10.3
- Node.js v0.11.16
- npm 2.3.0
- Gulp 3.8.11
- Jade 1.9.2
docutype だの head だのの例
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title= "Jade Sample"
link(rel='stylesheet', href='./css/style.css')
script(src="./js/script.js")
body
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jade Sample</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
</head>
<body></body>
</html>
コメント
一行コメント
// Single Line Comment
<!-- Single Line Comment -->
複数行のコメント
//
one
two
three
<!--
one
two
three
-->
Plain Text
インライン
p HelloWorld
<p>HelloWorld</p>
ブロック
HTMLを含むことができる。ピリオドの後に改行が必要
p.
<span>Lorem</span> cum ex eligendi minima nulla doloremque. Laboriosam quidem consequatur quo ad dolor dolore voluptat em quaerat. Ut dicta fuga cum temporibus esse suscipit voluptatum dolore incidunt labore omnis odio eaque.
<p>
<span>Lorem</span> cum ex eligendi minima nulla doloremque. Laboriosam quidem consequatur quo ad dolor dolore voluptat em quaerat. Ut dicta fuga cum temporibus esse suscipit voluptatum dolore incidunt labore omnis odio eaque.
</p>
属性
id, class
p(id="unique_id") HelloWorld
p(class="main_text") HelloWorld
<p id="unique_id">HelloWorld</p>
<p class="main_text">HelloWorld</p>
複数の指定
p(class="one two three") HelloWorld
p.one.two.three HelloWorld
上2つの結果は一緒
<p class="one two three">HelloWorld</p>
Literal (emmet的にも書ける)
p#unique_id.main_text HelloWorld
<p id="unique_id" class="main_text">HelloWorld</p>
配列
- var classes = ['four','five','six']
p(class=classes) HelloWorld
<p class="four five six">HelloWorld</p>
属性を配列やオブジェクトで定義
- var classes = ['one','two','three'];
- var attr = {'class':classes,'data-foo':'bar'};
# box&attributes(attr) contents
<div id="unique_id" class="one two three" data-foo="bar">contents</div>
イコールを使っての複数の定義
改行で区切ってイコールで定義・代入
# box(
class="one two three"
data-foo="bar"
) contents
<div id="box" data-foo="bar" class="one two three">contents</div>
変数
- var foo = 'bar';
p= foo
<p>bar</p>
Interpolation
- var foo = 'bar';
p hogehoge hugahuga #{foo}
<p>hogehoge hugahuga bar</p>
Tag Interpolation
p.
#[a(target="_blank", href="http://google.com/") Google]
<p><a target="_blank" href="http://google.com/">Google</a></p>
分岐処理
- var flg = true;
# box
if flg
p TrueText
else
p FalseText
<div id="box">
<p>TrueText</p>
</div>
繰り返し処理
ul
each val,key in {'home':'http://google.com/','about':'http://yahoo.co.jp/','reqruit':'http://qiita.com/','blog':'http://webya.in/','er':'http://www.facebook.com/'}
li
a(href="#{val}") #{key}
可読性がすこぶる悪いよね。ってことで、いくらかマシにする
- nav = {};
- nav.home = 'http://google.com/';
- nav.about = 'http://yahoo.co.jp/';
- nav.reqruit = 'http://qiita.com/';
- nav.blog = 'http://webya.in/';
- nav.er = 'http://www.facebook.com/';
ul
each val,key in nav
li
a(href="#{val}") #{key}
<ul>
<li><a href="http://google.com/">home</a></li>
<li><a href="http://yahoo.co.jp/">about</a></li>
<li><a href="http://qiita.com/">reqruit</a></li>
<li><a href="http://webya.in/">blog</a></li>
<li><a href="http://www.facebook.com/">er</a></li>
</ul>
ちなみにもっとスマートに書こうと思って
- var nav = {
- };
とするとエラーになる。本当だったらこうしたかったけど。
- var navis = {
- home: 'http://google.com/',
- about: 'http://yahoo.co.jp/',
- reqruit: 'http://qiita.com/',
- blog: 'http://webya.in/',
- er: 'http://www.facebook.com/'
- };
配列でも同様、スマートにかけなかった＞＜
過去のバージョンならできたっぽいけど。ってことで。
- var arr = ['one','two','three'];
- arr.push('four');
ul
each val in arr
li= val
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
継承
基底
super.jade
doctype html
html(lang="ja")
head
meta(charset="utf-8")
block title
title= "Jade Default Title"
link(rel='stylesheet', href='./css/style.css')
script(src="./js/script.js")
body
block contents
派生
index.jade
extends ./super.jade
block title
title Jade Child title
block contents
h1 Hello Extend Jade !
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jade Child title</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
</head>
<body>
<h1>Hello Extend Jade !</h1>
</body>
</html>
基底となる jade ファイルでは
block ブロック名
で、派生 jade ファイルで拡張することができるよ。default値の設定もできて便利
includes
header.jade
# header
h1 SiteTitle
jade.gnav.jade
- nav = {};
- nav.home = 'http://google.com/';
- nav.about = 'http://yahoo.co.jp/';
- nav.reqruit = 'http://qiita.com/';
- nav.blog = 'http://webya.in/';
- nav.er = 'http://www.facebook.com/';
# gnav
ul
each val,key in nav
li
a(href="#{val}") #{key}
sidebar.jade
# side
ul
li "one"
li "two"
li "three"
footer.jade
# footer
p "copyright 2015 webya.in"
index.jade
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title "Jade Default Title"
link(rel='stylesheet', href='./css/style.css')
script(src="./js/script.js")
body
include ./header.jade
include ./gnav.jade
include ./sidebar.jade
include ./footer.jade
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>"Jade Default Title"</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
</head>
<body>
<div id="header">
<h1>SiteTitle</h1>
</div>
<div id="gnav">
<ul>
<li><a href="http://google.com/">home</a></li>
<li><a href="http://yahoo.co.jp/">about</a></li>
<li><a href="http://qiita.com/">reqruit</a></li>
<li><a href="http://webya.in/">blog</a></li>
<li><a href="http://www.facebook.com/">er</a></li>
</ul>
</div>
<div id="side">
<ul>
<li>"one"</li>
<li>"two"</li>
<li>"three"</li>
</ul>
</div>
<div id="footer">
<p>"copyright 2015 webya.in"</p>
</div>
</body>
</html>
Mixin
mixin entry(title,date,contents)
.entry
h2= title
p.date
span= date
.contents= contens
+entry('MyBlogTitle','2015.05.05','MyBlogContents')
<div class="entry">
<h2>MyBlogTitle</h2>
<p class="date"><span>2015.05.05</span></p>
<div class="contents">MyBlogContents</div>
</div>