项目：继续与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 / 2012-01-01-example-article.html.markdown.erb”中：

This is an example article. You probably want to delete it and write your own articles!
<%= lorem.sentences 5 %>

我们将在稍后详细介绍这些细节，但首先在“ source / stylesheets / _index_posts.sass”中添加一些样式：

.post-title
  font-size: 1.7em

.posts p
  font-size: 1.05em
  margin-bottom: 4em

这在眼睛上有点容易，不是吗？ 我们已将标题和段落调整到合理的程度。 帖子之间的一点额外利润使一切都不同。 就层级而言，这是一个良好的开端。

致力于Git：

git add --all
git commit -m 'Adjusts size for title and body text
               Adds dummy text
               Adds .erb extension to dummy posts'

页脚

在页脚上。 我认为我们应该首先照顾最底层的可怕元素。 让我们在页脚中打包“最近的文章”和“标签”，并摆脱“按年”。 相关标记是“ source / layouts / layout.erb”中全局布局的一部分。 在yield下方的aside标签中找到代码，并如下进行修改。 在“源/布局/layout.erb”中：

<footer>

  <div class="recent-posts">
    <h3>Recent Posts</h3>
    <ol>
      <% blog.articles[0...10].each do |article| %>
        <li><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span>
</li>
      <% end %>
    </ol>
  </div>

  <div class="footer-tags">
    <h3>Tags</h3>
    <ol>
      <% blog.tags.each do |tag, articles| %>
        <li><%= link_to "#{tag} (#{articles.size})", tag_path(tag) %></li>
      <% end %>
    </ol>
  </div>

</footer>

上面的默认事务只是遍历我们与Middleman一起提供的帖子和标签。 不过，我想让它更聪明，并在最近的帖子和标签中引入改组。 这样，用户不仅可以看到最近的十篇文章或大量的标签，而且可以看到这两种文章的随机版本总是十个项目。 它们也不会占用太多空间，而让我在页脚中一致地对齐两个项目。 我还在“ source / layouts / layout.erb”中为帖子重命名了h3 ：

<footer>

  <div class="recent-posts">
    <h3>Random Posts</h3>
    <ol>
      <% blog.articles.shuffle[0...10].each do |article| %>
        <li><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span>
</li>
      <% end %>
    </ol>
  </div>

  <div class="footer-tags">
    <h3>Tags</h3>
    <ol>
      <% blog.tags.to_a.shuffle[0...10].each do |tag, articles| %>
        <li><%= link_to "#{tag} (#{articles.size})", tag_path(tag) %></li>
      <% end %>
    </ol>
  </div>

</footer>

###对齐

我认为我们通过这些小的改进已经大大改善了用户体验。 Ruby使我们的工作变得异常轻松。 现在，只需稍微推动一下即可获得更好的对齐方式。 我们只为页脚创建一个新的Sass部分。 在“源代码/样式表/all.sass”中：

@import 'footer'

然后在部分“ source / stylesheets / _footer.sass”中：

footer
  +outer-container
  border-top: 1px solid $base-border-color
  padding:
    top: 4em
    bottom: 4em

.recent-posts
  +shift(2)
  +span-columns(6)

.footer-tags
  +span-columns(2)

.recent-posts, .footer-tags
  h3
    font-size: 1.7em
  li
    font-size: 1.05em

为了获得一些切实的测试数据，我通过中间人生成器添加了更多示例示例，并提供了一些虚拟的lorem文本。 通过终端：

middleman article 'Your fancy title'

我可能应该提到，我还需要在这些新帖子中为虚拟lorem文本生成器添加一个“ .erb”扩展名。 前题还包含几个其他标签。

在“ source / posts / 2015-12-01-your-fancy-title.html.markdown.erb”中：

---
title: Example Post
date: 2015-12-01
tags: example, bourbon, neat, middleman
---

This is an example article. You probably want to delete it and write your own articles!
<%= lorem.sentences 5 %>

目标是至少拥有十个帖子和标签，以查看所有内容是否正确对齐。 让我们看看这里有什么：

目前，背景色已完成其职责。 让我们杀死它们，并检查我们是否对实际结果感到满意：

我认为我们可以暂时保留它。 是时候提交我们的更改了！

git add  ../layouts/layout.erb
gco -m 'Adapts layout and adds footer'

git add ../stylesheets/_footer.sass ../stylesheets/all.sass
git commit -m 'Adds styles for footer and imports Sass partial'

git add ../posts/*.markdown.erb
git commit -m 'Adds a bunch of dummy posts with:
              dummy lorem text
              dummy tags'

部署

在继续之前，我们应该部署到GitHub Pages，检查我们的进度，并确保我们没有遇到任何意外。

middleman deploy

打开浏览器，转到yourusername.github.io/your_project_name ，看看到目前为止您对网站是否满意。

萃取

接下来我们该怎么办？ 您是对的，页脚用大写字母尖叫！ 我们将使用<footer> ，为partials创建一个新文件夹，并将标记放在其中。 反过来，我们需要从“ source / layouts / layout.erb”渲染该部分内容：

<div id="main" role="main">
    <%= yield %>
  </div>

  <%= partial "partials/footer" %>

然后在部分“ source / partials / _footer.erb”中：

<footer>

  <div class="recent-posts">
    <h3>Random Posts</h3>
    <ol>
      <% blog.articles.shuffle[0...10].each do |article| %>
        <li><%= link_to article.title, article %></li>
      <% end %>
    </ol>
  </div>


  <div class="footer-tags">
    <h3>Tags</h3>
    <ol>
      <% blog.tags.to_a.shuffle[0...10].each do |tag, articles| %>
        <li><%= link_to "#{tag}", tag_path(tag) %></li>
      <% end %>
    </ol>
  </div>

</footer>

如果您密切关注，您会发现我在页脚中删除了文章列表的日期。 我这样做有两个原因。 首先，我们将节省更多空间，这样我们就不会轻易遇到这样一种情况：在帖子标题更长时，与标签的对齐方式会中断。 其次，我认为这有点分散注意力，并且添加的内容不太多。

页脚中的随机文章列表是向观众介绍新内容的便捷方法。 日期在其中并不重要。 标签链接的文章数量也是如此。 他们浪费空间而没有增加太多价值。 另外，如果您没有太多标签用于特定标签，则它不会立即显得空白。 我希望有更多空间来保持稳定的布局。 它也感觉更干净，但这完全是主观的。

承诺：

git add --all
git commit -m 'Extracts footer into partial 
               Removes date from post links in footer
               Removes number of articles for tags in footer
                 Didn’t provide enough value to sacrifice space'

更多日期

当我们在它。 让我们注意索引标题中的日期。 我认为它们的大小太突出了，不能改善我们的视觉层次，而且我不喜欢在标题末尾加上它。 我宁愿将其粘贴在另一侧，并将其用作不随标题长度而变化的视觉锚点。

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

<div class="posts">
  <% page_articles.each_with_index do |article, i| %>
    <h2 class="post-title">
<span class="post-date"><%= article.date.strftime('%b %e') %></span> <%= link_to article.title, article %></h2>
    <%= article.body %>
  <% end %>
</div>

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

.post-date
  font-size: 0.7em
  margin:
    left: em(-80px)
    right: em(20px)

帖子的标题重新排序，并从包含日期的范围开始。 我在日期和标题本身的跨度之间留了一点空格，因为如果在较小的屏幕上将日期与文章正文文本对齐，那么我在日期和标题之间会有一个自然的字符空间-不需要不必要地使用Sass。

Sass代码很简单。 负边距帮助我从视觉上将日期固定在标题的左侧，并且我使用了Bourbon函数将其像素值转换为em。 很简单，但是我喜欢我们实现的层次结构。 眼睛在日期之间跳来跳去，其余部分留有足够的空格，因此我们可以避免使用边框划分帖子。 我开心！

致力于Git：

git add ../index.html.erb ../stylesheets/_index_posts.sass
git commit -m 'Changes order for date and post title on index page
               Styles date to create visual anchor'

并部署：

middleman deploy

颜色

让我们稍微生动一点，但不要太多。 少即是多！ 我去了COLOURlovers ，玩了几个调色板。 注意可以增强视觉层次的解决方案，但要远离发出刺耳声音的色彩。 我意识到这是模糊的，因为色彩可以很主观，并且在文化上也很丰富，但是无论如何，这就是我目前的处理方式。

在我们的变量“ source / stylesheets / base / _variables.scss”中：

$matcha-green: #78B69D;
$text-color: darken($medium-gray, 20%);

重新营业； 在考虑了一些想法之后，我从Bitters的Sass变量文件中添加了两种新的全局颜色。 $matcha-green现在是我希望用于标识的颜色，并放置在该文件中，我可以随时随地重用此变量。 如果我对想要的绿色改变主意，则需要一次更改它。 另外，我对文本的默认颜色不太满意。 使用Sass函数，我将Bitters的一种预设颜色变暗了20％，并将其存储为$text-color 。 悬停时的帖子标题以及日期和正文将收到新的文本颜色。 我认为默认值太暗。

在“源代码/样式表/base_typography.scss”中：

// transition: color $base-duration $base-timing;

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

.post-title
  font-size: 1.7em
  a
    +transition(color .4s ease-in-out)
    color: $matcha-green
    &:hover
      color: $text-color

.post-date
  color: $text-color

.posts p
  color: $text-color

我还通过Bourbon mixin添加了轻微过渡，以将鼠标悬停在.post-title 。 这将在.4秒内从$matcha-green变为$text-color 。 如果您想了解更多信息，请查看我有关Bourbon Mixins的文章。

如果您想了解“ ease-in-out部分，它是对过渡行为进行计时的32种方法之一。 （$ ease-in-out，作为$变量，如文档中一样，将引发错误）。这是一个很小的增强，但比浏览器的默认设置好很多。 为了完成这项工作，我还必须首先在“ base_typography.scss”中取消注释默认的过渡行为。

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

footer
  border-top: 1px solid rgba($text-color, .3)

.recent-posts, .footer-tags
  color: darken($medium-gray, 20%)
  a
    +transition(all .1s ease-in-out)
    color: $text-color
    &:hover
      color: $matcha-green
      border-bottom: 2px solid $matcha-green

最后，我也为页脚修改了颜色。 这使我们具有连贯的外观，并希望有些含蓄的轻描淡写。 需要加快页脚中的链接的过渡行为。 由于它们是如此紧密地组合在一起，所以我觉得如果它们也更灵活一些并带有下划线，那会更好。

在颜色方面，我和索引列表中的标题相反。 由于页脚列表不需要在页面上显示（尤其是它们之间的距离很小），因此我为它们提供了默认的灰色文本颜色，并且在悬停时仅使用$matcha-green 。 在此示例中，我们仅使用空格和类型的大小来实现层次结构。

哦，页脚上方的边框需要通过Sass rgba函数实现一些不透明度。 我认为不透明度达到30％足以胜任其工作，而无需付出太多努力。

对于这么少量的代码，看起来不太破旧。 正是我喜欢的样子—编写的代码越少，咬到您的错误就越少！

致力于Git：

git add --all

git commit -m 'First attempt at tuning colors
               Adds new brand color as $matcha-green
               Adds new $text-color:
                 Body copy
                 Post titles hover
                 Footer headers
               Takes care of hover transitions
                 Comments out Bitters default transition'

##调整

令我烦恼的另一件事是车身复制品的线条高度。 我们也进行调整。 在“源代码/样式表/_index_posts.sass”中：

.posts p
  line-height: 1.35em

承诺：

git add ../source/stylesheets/_index_posts.sass
git commit -m 'Adjusts line-height for body copy on index'

然后再次部署：

middleman deploy

打破

到目前为止做得好！ 现在是时候休息一下了。 在下一个教程中，我们将在顶部添加一个导航栏和一个“英雄单位”。 到时候那里见！ 给自己吃点零食，放松一下！

翻译自: https://webdesign.tutsplus.com/articles/project-continuing-our-website-build-with-middleman--cms-25440