有沒有簡單的方法來設計HTML把手模板

我正在尋找一種簡單的方法來創建一些靜態的HTML頁面設計，但使用把手部分來緩解向開發人員的移交。即創建有沒有簡單的方法來設計HTML把手模板

index.html 
sidebar.html 
main.html 
product.html 
product_stub.html

等等。然後建立網頁的簡單方法，所以我可以看到他們在Chrome：

的index.html：

<html> 
... 
<body> 
<div class="sidebar">{{ include sidebar.html }}</div> 
<div class="main">{{ include main.html }}</div> 
</body>

main.html中：

{% for i in 0 to 10 %} 
{{ include product_stub.html }} 
{% endfor %}

然後product_stub.html可能看起來像：

<div class="product-stub"> 
    <h2>Product Name</h2> 
    <p>some lipsum text...</p> 
</div>

那麼理想情況下，開發人員可以採取這些相同的文件，添加魔術 - 然後設計師公司uld編輯來調整設計..

來源

2013-05-03 Guy Bowden

看看assemble，它是專門爲此目的。

來源

2013-05-18 13:52:59 jonschlinkert

這看起來是個不錯的選擇。我們創建了一個簡單的「加載」句柄幫助程序，它將加載到模板中 - 請參閱下面的答案。 – 2013-05-20 07:29:58

我們創建了一個「負載」車把幫手在模板負荷：

cache = {} 
    template = (name) -> 
    t = cache[name] 
    if t? 
     return t 

    raw = null 
    $.ajax 
     url: "/static/templates/#{ name}.hbs" 
     async: no 
     type: 'GET' 
    .done (text) -> 
     raw = text 
    .fail (err) -> 
     if window.appdebug 
     # if app is running in "debug" mode, fallback to possible design 
     # template 
     url = "/static/design/#{ name }" 
     url = url + '.hbs' if not url.match(/\.hbs$/) 
     $.ajax 
      url: url 
      async: no 
      type: 'GET' 
     .done (text) -> 
      raw = text 

    if not raw? 
     throw "Cannot fetch template #{ name }" 

    t = Handlebars.compile(raw) 
    cache[name] = t 
    t 

    Handlebars.registerHelper "load", (name, ctx) -> 
    new Handlebars.SafeString(template(name)(ctx))

然後在調試模式下，我可以有一個模板，這是否：

<div class="container content"> 
{{load "common.breadcrumbs"}} 
<div class="row"> 
    <div class="span12"> 
     <div class="main"> 
      {{load "product.edit.maindetails"}} 
      ...

所以我們可以再看看整個頁面被設計者分割成把手模板，很容易被開發人員添加到HBS代碼的其餘部分。

來源

2013-05-20 07:34:28

有沒有簡單的方法來設計HTML把手模板

回答

相關問題