在 Middleman 博客中迭代时使用文章 frontmatter答案

【问题标题】：Using article frontmatter when iterating in Middleman blog在 Middleman 博客中迭代时使用文章 frontmatter
【发布时间】：2015-10-24 09:51:45
【问题描述】：

不是最好的标题，但老实说，我不确定如何正确解释我正在寻求帮助的内容。

所以我正在使用 Middleman 博客来很好地创建我的博客。无论如何，我正在使用frontmatter 来传递单独改变每个页面外观的css。我正在使用 4 个变量，link_color、text_color、bg_link。所以我想做的是在 layout.html.erb 文件中重用相同的前端信息。

所以layout.html.erb是标准的

<% if paginate && num_pages > 1 %>
    <p>Page <%= page_number %> of <%= num_pages %></p>

    <% if prev_page %>
      <p><%= link_to 'Previous page', prev_page %></p>
    <% end %>
  <% end %>

  <% page_articles.each_with_index do |article, i| %>
    <li class="article_summary">
        <h1><%= link_to article.title, article, id: "#{i}" %></h1>
    </li>
  <% end %>

  <% if paginate %>
    <% if next_page %>
      <p><%= link_to 'Next page', next_page %></p>
    <% end %>
  <% end %>

对于该迭代器中的每篇文章，我想要做的是，如果文章有 bg_color frontmatter 然后使用它并更改 article.title 的颜色，如果没有，则什么也不做。目前，如果我尝试类似：

<style>
<% if article.data.bg_color? %>
  .article_summary a#<%= i %>{
    color: rgb(<%=article.data.bg_color %>);
  }
  <% end %>
</style>

我这样做是因为我的博客在 Github 上。

目前它有效，但由于它只是一个简单的迭代，它为每篇文章提供相同的颜色，而不是在每篇文章的基础上。因此，我试图找出将索引用作某种 id 的最佳方法，以便单独针对它们。

也许将 li 从类更改为由索引组成的 id，但是我将无法从样式表文件夹中的 scss 应用全局样式？

【问题讨论】：

标签： css ruby middleman

【解决方案1】：

我发现了一个有效的肮脏方法。

<% page_articles.each_with_index do |article, i| %>
    <li class="article_summary" id="test_<%=i %>">
        <h1><%= link_to article.title, article %></h1>
        <style>
          <% if article.data.bg_color? %>
              #test_<%=i%> a{
              color: <%=article.data.bg_color %>;
            }
          <% end %>
      </style>
    </li>
  <% end %>

几乎在 id 中添加了“test_”（在我只是做索引之前）和 viola！

【讨论】：