jadeでbootstrapのサンプルを書いてみた

久しぶりにjade使いました。
あまり好きじゃなかったjadeですが、使い慣れてくるとなかなか便利だなぁーと思います。

んで、まあ写経的なあれでbootstrapのBasic marketing siteをjadeで書き直してみました。
ほんとテンプレ側でイテレーションできる変態仕様は大好きです＾＾

jadeでイテレートするには以下のように書いてます

1
2
3


links = [{name:'Home', url: '#home'},{name:'About', url:'#about'},{name:'Contact', url:'#contact'}]
each link, index in links
  h2 #{link.name}

ちなみにeach以外にfor-inも使えるのでなかなか便利だと思いました。
今年は積極的にjadeを使おうと心に誓ったので頑張ってnodeでなんかサービス作りますよ＾＾

bootstarpのjadeで書いてみた版↓

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67


doctype 5
html(lang='ja')
  head
    title Bootstrap, from Twitter
    meta(charset='utf8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css')
    style
      body {
        padding-top: 60px;
      }
    script(src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js')
    script(src='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js')
  body

    div.navbar.navbar-inverse.navbar-fixed-top
      .navbar-inner
        .container
          button.btn.btn-navbar(type="button", data-toggle="collapse", data-target=".nav-collapse")
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.brand(href='#') Project Name
          div.nav-collapse.collapse
            links = [{name:'Home', url: '#home'},{name:'About', url:'#about'},{name:'Contact', url:'#contact'}]
            ul.nav
              each link, index in links
                if index == 0
                  li.active
                   a(href='#{link.url}') #{link.name}
                else
                  li
                    a(href='#{link.url}') #{link.name}

              li.dropdown
                a.dropdown-toggle(href='#', data-toggle='dropdown') Dropdown
                  b.caret
                ul.dropdown-menu
                  drops = [{name:'About', url:'#'},{name:'Another action', url:'#'},{name:'Something else here', url:'#'},{name:'Nav header', class:'nav-header'},{name:'Separated link', url:'#'},{name:'One more separated link', url:'#'}]
                  each drop, index in drops
                    if drop.class == 'nav-header'
                      li(class='#{drop.class}') #{drop.name}
                    else
                      li
                        a(href='#{drop.url}') #{drop.name}

    .container
      .hero-unit
        h1 Hello, World!
        p This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
        p
          a.btn.btn-primary.btn-large(href='#') Learn more &raquo;

      .row
        messages = [{title:'Heading', message:'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.'},{title:'Heading', message:'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.'},{title:'Heading', message:'Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.'}]
        each item in messages
          .span4
            h2 #{item.title}
            p #{item.message}
            p
              a.btn(href='#') View details &raquo;

      hr

      footer
        p &copy; Company 2013</code></pre>