Question

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

Answer 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”类添加到导航栏中的链接。即如果页面是一个名为“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/上的论坛。

Answer 2

以下是使用aria-current标记当前中间链接的新宝石（您可以使用它来设置样式）：https://github.com/thoughtbot/middleman-aria_current

如何在Middleman中生成导航？

2 个答案: