Question

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

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

所以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前置者然后使用它并改变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的全局样式吗？

Answer 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 %>

几乎添加＆＃34;测试_＆＃34;到id（在我刚刚做索引之前）和中提琴！

在Middleman博客

1 个答案: