¿Cómo puedo generar una navegación en Middleman?

Question

Me estoy acostumbrando a Middleman y Ruby en general. ¿Cuál es la mejor forma de generar una navegación con estados activos?

Answer 1

En la versión actual de MM (2.x, aunque 3.0 está cerca), puede hacerlo con las siguientes adiciones a config.rb y algunos ajustes en su (s) archivo (s) de navegación. Aquí es a working version en caso de que dejar de lado algunos bits críticos:

En primer lugar crear una función auxiliar:

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

Luego, en el nav bar include file (en este caso es un archivo haml), puede utilizar el ayudante nav_active como sigue:

#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') 

el resultado neto de esto es añadir la clase "abierto" para el enlace en la barra de navegación cuando la página se edificio construido para esta página. Es decir. si la página es un archivo llamado "índice", entonces el @page_id será "índice" y ese enlace tendrá el tema Activo.

Para completar el ejemplo, aquí es el extracto de la scss style partial que define activa:

&.Active { 
    font-weight: bold; 
} 

En una versión posterior del archivo de cabecera, que en realidad eliminado el vínculo cuando en la página activa. Parece algo así como - lo que claramente se podía puso en orden, pero Fwiw: D:

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

Tenga en cuenta que toda la t ('cosas') tiene que ver con las funciones de traducción para i18n. Puedes ignorar eso. No quise hacer el ejemplo sintácticamente incorrecto tratando de eliminarlos.

Espero que esto ayude - también vea el foro en http://forum.middlemanapp.com/.

Answer 2

Aquí es una nueva joya para el marcado de un enlace actual en Middleman con aria-current (que luego se puede utilizar para el estilo fuera de): https://github.com/thoughtbot/middleman-aria_current