项目：继续与Middleman建立我们的网站

在本教程中，我们将继续构建播客站点。 我们将开始设计帖子索引的样式，创建一个漂亮的小页脚，并在混合中添加一些颜色。 所有这些都使用Sass和Bourbon套件。

我们的职位索引

是的，我们在哪里？ 目前，我们的网站看起来还不太好：

目前，我们的帖子除了左侧没有对齐之外，因此我们需要一个网格来修复此混乱情况。 我们心爱的波旁王朝整装待发 ！ 首先，我们将添加一个类posts作为我们的帖子的包装，并使其成为在页面上居中放置内容的outer-container 。

在“ source / index.html.erb”中：

<div class="posts">
  <% page_articles.each_with_index do |article, i| %>
    <h2><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span>
</h2>
    <!-- use article.summary(250) if you have Nokogiri available to show just
         the first 250 characters -->
    <%= article.body %>
  <% end %>
</div>

然后，我们需要为索引样式创建一个新的Sass部分，并应用一些魔术，因此在“ source / stylesheets / all.sass”中：

@import 'index_posts'

在“ source / stylesheets / _index_posts.sass”中：

.posts
  +outer-container

我也觉得添加背景颜色以使我们的外部容器现在容易可见是个好主意。

然后提交到Git：

git add -all
git commit -m 'Adds Sass partial for index posts
               Centers content'

最近的文章，标签和日历资料位于“ layout.erb”中，目前与我们无关。 让我们集中精力使帖子的索引列表弹出。 让我们给h2标题一个类post-title ，让标题和正文的段落跨越整个页面的八（十二个）列。 帖子也需要移动两列，因为我们希望避免我们的副本遍及整个页面，从而超过正常的行宽（度量）以读取45-75个字符。

因此，在“ source / index.html.erb”中：

<div class="posts">
  <% page_articles.each_with_index do |article, i| %>
    <h2 class="post-title"><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span>
</h2>
    <!-- use article.summary(250) if you have Nokogiri available to show just
         the first 250 characters -->
    <%= article.body %>
  <% end %>
</div>

在“ source / stylesheets / _index_posts.sass”中：

.post-title, .posts p
  +shift(2)
  +span-columns(8)

现在我们在谈论。 我们的内容是对齐的，并且恰好位于页面的中心。 我们所缺少的是任何形式的视觉等级制度。 我们的h2标题比帖子内容大很多。 为了提供更好的阅读体验，我们应该确保标题及其对应的文本具有更好的视觉对比。

首先，我们需要更好的文本来使用，因此，让我们使用Middleman助手来处理伪文本。 让我们在博客文章中添加erb扩展，然后在测试文章中添加以下内容。

注意：我们仅需要“ .erb”扩展名是因为我们想在此构造<%= %>之间运行一些Ruby代码。

在“ source / posts / 2