4

我正在使用 Middleman 构建一个静态站点,其中包含所有客户最近项目的投资组合部分。作品集部分将以 3 X 3 画廊的方式显示项目缩略图,单击时,将在灯箱中打开其对应的 html 页面。

灯箱内页面的布局是相同的,所以不是标记每个单独的页面,我认为有一种方法可以让 Middleman 使用 [a link.

这是我的 config.rb 文件中的内容

###
# Page options, layouts, aliases and proxies
###

# A path which all have the same layout
with_layout :popup do
  page "/projects/*"
end

# Proxy (fake) files
# page "/this-page-has-no-template.html", :proxy => "/template-file.html" do
#   @which_fake_page = "Rendering a fake page with a variable"
# end
data.projects.details.each do |pd|
  proxy "/projects/#{pd[:client_name]}.html", "/projects/template.html", locals: { project: pd }, ignore: true
end
4

1 回答 1

13

好的,经过一番挖掘,我发现了下面的两篇文章,它们帮助我理解了动态页面在中间人中的工作方式。(不幸的是,没有很多文档,动态页面的中间人示例非常基础)

http://benfrain.com/understanding-middleman-the-static-site-generator-for-faster-prototyping/ http://forum.middlemanapp.com/discussion/134/best-way-to-use-yaml-相同的html,但参数驱动的数据固定/p1

我的解决方案...

data/projects.yml(包含项目详细信息)

details:
  - client: "Company X"
    title: "Company X Event"
    video_url: ""
    logo: 
      - "logo_companyx.gif"
    image_path: "/img/projects/companyx"
    total_images: 10
    content: "<p>Blah blah blah</p>"
    responsibilities: 
      "<li>Something</li>
      <li>Some task</li>"

配置.rb:

data.projects.details.each do |pd|
    proxy "/projects/#{pd[:client]}.html", "/projects/template.html", :layout => false, :locals => { :project => pd }, :ignore => true
end

上面代码片段的技巧是通过代理使用 locals 将整个项目数据对象传递给模板,并将布局设置为 false,这样它就不会继承默认的站点布局(因为我 - 或者客户宁愿 - 想要显示这些在灯箱弹出窗口中)

该过程的最后一步是创建 /projects/template.html.erb(在源文件夹中),在模板顶部声明以下内容

<% p = locals[:project] %>

这允许我输出 template.html.erb 中 p 对象的每个属性。

例如:

<%= p[:title] %>

我希望这对某人有所帮助,因为我花了几天的时间在网上玩耍,并在网上搜索了很多例子或提示。

于 2013-02-14T11:34:02.857 回答