ruby - 如何在 Middleman 中生成导航？

Question

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

Answer 1

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

首先创建一个辅助函数：

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

然后，在导航栏包含文件（在本例中为 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”类添加到导航栏中的链接。即，如果页面是一个名为“index”的文件，那么@page_id它将是“index”，并且该链接将具有 Active 主题。

为了完成这个例子，下面是定义 active的scss 样式部分的摘录：

&.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/上的论坛。

Answer 2

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