在Middleman 4

时间:2018-03-08 17:21:55

标签: middleman yaml-front-matter

我花了很多时间研究这个问题而没有找到有效的解决方案。如果有人能帮助我解决这个问题,我会很高兴。

我正在尝试在我的设置中使用动态页面,但需要包含动态Frontmatter。但是我不能在模板文件中使用Frontmatter,所以我想我可以使用YAML数据文件代替?我尝试了各种方法,但都没有成功。动态页面加载得很好,但是除非我能够提取动态数据,否则它们中的每一个都将使用相同的Frontmatter。

我的配置包括:

["england", "france"].each do |team|
  proxy "/teams/#{team}/index.html", "/teams/team.html", :locals => { :team_name => team }, :ignore => true
end

本节中的目录结构如下所示:

teams
- index.html.erb
- team.html.erb

我开始了一个YAML数据文件,其中包括:

england:
  title: "Teams/England"
  description: "England"
  headline: "England"
  addclass: "england cols"
france:
  title: "Teams/France"
  description: "France"
  headline: "France"
  addclass: "france cols"

当我在模板文件中使用上述数据作为Frontmatter时,它可以正常工作:

---
title: Teams/France
description: France
headline: France
addclass: france cols
---

我如何使用数据的一个例子:

<%= current_page.data.addclass %>

我的问题如下:

  1. 如何使用YAML数据文件为每个动态页面提供唯一数据?
  2. 我可以使用最终的URI段(来自/ teams / england /的“england”,来自/ teams / france /的“france”等)来定义要使用的数据集吗?
  3. 我是否可以在不影响网站上的其他非动态网页(/ matches /,/ groups /等)的情况下执行此操作?
  4. 非常感谢你。

1 个答案:

答案 0 :(得分:0)

我建议稍微更改您的数据格式。它允许您将整个本地数据项传递给模板,这样您就可以使用数据而无需先将其“加载”到Frontmatter中。

调整teams.yml文件(我在此处添加了'slug'值):

items:
- title: "England"
  slug: "england"
  description: "England"
  headline: "England"
  addclass: "england cols"
- title: "France"
  slug: "france"
  description: "France"
  headline: "France"
  addclass: "france cols"

config.rb块更改为(假设teams.yml位于/data/teams.yml) - 请注意检查以防止数据丢失时出错:

if File.exist?("data/teams.yml")
  data.teams.items.each do |item|
     p = item
     proxy "teams/#{p.slug}.html", "teams/team.html", locals: { item: p }, ignore: true
  end
end

这会将团队项目中的所有数据传递到模板中。您不必“定义要使用的数据集”,因为模板上下文将仅引用该数据项。

现在,在您的team.html.erb模板中,您可以像这样引用数据(在模板主体中,而不是在Frontmatter中):

<h1 class="<%= item.addclass %>"><%= item.title %></h1>
<h2><%= item.description %></h2>
<h3><%= item.headline %></h3>

这应该为英格兰和法国提供两个独立的页面,并提供自己独特的数据。

不幸的是,在Middleman中生成动态页面后,Frontmatter不喜欢被覆盖。为了覆盖用于元数据的Frontmatter,特别是“title”,我已经成功使用了gem'midman-meta-tags'[https://github.com/tiste/middleman-meta-tags],它允许你在定义后覆盖模板体中的页面标题,源自YAML数据。