[컴][웹] Jade 사용하기

jade 제이드 / 제이드 사용하기

Jade 예제

한창 jade 를 사용중이다. jade 에서는 javascript code 를 사용해서 template 을 만들 수도 있는데, 뭔가 document 가 명확치 않아서 삽질을 하게 된다. 그래서 내가 작성한 template 를 몇개 올려 놓는다.

for 문 사용 예제

// usage
+youAreHere(parent.title+','+parent.url+','+parent.i18n, page.title+','+page.url+','+page.i18n)
 
// mixin
mixin youAreHere()
 // youAreHere
 - var args = Array.prototype.slice.call(arguments)
 - var len = args.length
 - var i = 0
 ul.breadcrumb.breadcrumb-page
  .breadcrumb-label.text-light-gray You are here:
  li
   a(href='#') Home

  - // 0 : text, 1 : link, 2 : i18n-text
  - for (; i < len - 1; ++i){
  - var textlink = String(args[i]).split(',')
   li
    a(href=textlink[1] data-i18n=textlink[2])= textlink[0]
  - }
  - var textlink = String(args[i]).split(',')
  li
   a(href=textlink[1])= textlink[0]

 // /youAreHere

if 문 사용예제

if 문 사용법은 좀 특이하다. 아래서는 jade 의 if 를 사용했다. javascript 의 if 와 jade 의 문법을 섞어서 사용하는 것은 error 를 뿜어낸다. 그래서 '?' operator 이외에는 잘 사용을 못하고 있다.

// mixin
mixin datatable(options)
 - var ths = options.ths
 .table-primary
  // .table-responsive
  table.table(id=options.id, cellpadding="0", cellspacing="0", border="0", width="100%")&attributes({class : options.tableClass})
   thead
    tr
     - for (k in ths){
     - var v = ths[k];
      if v.i18n
       th(data-i18n=v.i18n)= String(v.text)
      else
       th= String(v.text)

     - }

extends

extends 의 사용에서 주의할 점은 space 가 2개가 들어가야 한다는 것이다.

extends(space)./layout.jade

이런 형식이 아니라, space 가 2개 들어간다.

extends(space)(space)./layout.jade

space 가 1개 들어가면 extends 를 tag 로 인식해 버린다.

See Also

1. 여름으로 가는 문 - [메뉴얼] Jade - 템플릿 엔진 for Node.js