如何通過DocPad中的ECO輸出數組來構建圖像庫？

Question

我有一個文件有以下frontmatter：

--- 
layout: default 
title: "A Gallery" 
image: 
    - "image-1.jpg" 
    - "image-2.jpg" 
    - "image-3.jpg" 
--- 

現在我想建立這樣我的默認模板圖像列表。

<ul> 
    <li><img src="image-1.jpg" alt=""></li> 
    <li><img src="image-2.jpg" alt=""></li> 
    <li><img src="image-3.jpg" alt=""></li> 
</ul> 

我發現這個tutorial for javascript loops。

但是，如何將其轉換爲ECO/Coffeescript？

這樣的事情？

<ul> 
<% gallery i + 1, for images i in @document.image[i]: %> 
    <li><%- @document.image[i] %></li> 
<% end %> 
</ul> 

Answer 1

這就是我做到的。

在你​​文件：

site: 
    pics: 
    myFirstGallery: [ 
     {name: '/images/mypic.png' h: '180px' w: '100px'}, 
     {name: '/images/mypic2.png' h: '180px' w: '100px'} 
    ] 

然後在你的生態檔案：

<ul> 
    <% for pic in @document.site.pics.myFirstGallery: %> 
    <li> 
     <img src="#{pic.name}" width="#{pic.w}" height="#{pic.h}" /> 
    </li> 
    <% end %> 
</ul> 

應該是類似的東西。我使用Jade，所以我忘記了確切的CoffeeScript語法。如果我有什麼問題，請告訴我。 for in語法來自CoffeeScript's網站。我查了一下Eco's ReadMe文件。

Answer 2

在»The Little Book on CoffeeScript« (GitHub Version)中看到此代碼後，我想出了它。

for name, i in ["Roger the pickpocket", "Roderick the robber"] 
    alert "#{i} - Release #{name}" 

對於上面的示例（請參閱我的問題），您必須編寫此代碼。

<ul> 
    <% for image, i in @document.image: %> 
    <li> 
     <img src="<%- "#{image}" %>" /> 
    </li> 
    <% end %> 
</ul> 

現在它就像魅力一樣。