如何在 Middleman 中生成导航？答案

【问题标题】：How can I generate a navigation in Middleman?如何在 Middleman 中生成导航？
【发布时间】：2012-03-19 22:36:22
【问题描述】：

我刚刚习惯了Middleman 和一般的Ruby。生成具有活动状态的导航的最佳方式是什么？

【问题讨论】：

查看 Thomas 的 magic_link_to Middleman 3 助手。request.path 表示当前 URL 路径。
堆栈溢出变得如此可悲，以至于您可以提出任何手册中有答案的问题，但您不能再提出有用的问题。不是一个真正的问题？我不认为这意味着你认为它意味着什么。

【解决方案1】：

在当前版本的 MM（2.x，虽然 3.0 已经接近）中，您可以通过对config.rb 的以下添加以及导航文件中的一些调整来实现。这是a working version，以防我遗漏一些关键部分：

首先创建一个辅助函数：

helpers do
  def nav_active(page)
    @page_id == page ? {:class => "Active"} : {}
  end
end

然后，在nav bar include file（在本例中是一个haml 文件）中，您可以使用nav_active 帮助器，如下所示：

#HeaderNavigationBar
  %ul
    %li{nav_active("index")}= link_to t('top_navigation.home'), t('paths.index')
    %li{nav_active("pricing")}= link_to t('top_navigation.pricing'), t('paths.pricing')
    %li{nav_active("faq")}= link_to t('top_navigation.faq'), t('paths.faq')

这样做的最终结果是在为该页面构建页面时将“Active”类添加到导航栏中的链接。 IE。如果页面是一个名为“index”的文件，那么@page_id 将是“index”，并且该链接将具有 Active 主题。

为了完成这个示例，下面是定义活动的scss style partial 的摘录：

&.Active {
  font-weight: bold;
}

在更高版本的头文件中，我们实际上在活动页面上删除了链接。它看起来像 - 显然可以整理，但 FWIW :D:

%li{nav_active("index")}
  -if "index" == @page_id
    = t('top_navigation.home')
  -else
    = link_to t('top_navigation.home'), root()
  ... (etc)

请注意，所有的 t('stuff') 都与 i18n 的翻译函数有关。你可以忽略它。我不想通过尝试删除它们来使示例在语法上出错。

希望这会有所帮助 - 另请参阅论坛 http://forum.middlemanapp.com/。

【讨论】：

如果我知道页面类将保持不变，我会这样做：class=> (page_classes === "index") ？ “活跃”：“”

【解决方案2】：

这是一个新的 gem，用于在 Middleman 中使用 aria-current 标记当前链接（然后您可以使用它来设置样式）：https://github.com/thoughtbot/middleman-aria_current

【讨论】：