Come posso generare una navigazione in Middleman?

Question

Mi sto solo abituando allo Middleman e al Ruby in generale. Qual è il modo migliore per generare una navigazione con stati attivi?

Answer 1

Nella versione corrente di MM (2.x, sebbene 3.0 sia chiuso), è possibile farlo con le seguenti aggiunte a config.rb e alcune modifiche nei propri file di navigazione. Ecco a working version nel caso in cui lascio fuori alcuni pezzi critici:

creino anzitutto una funzione di supporto:

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

Poi, nel nav bar include file (in questo caso il suo un file Haml) è possibile utilizzare il nav_active helper come segue:

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

il risultato netto di questo è di aggiungere la classe "Active" per il link nella barra di navigazione quando la pagina viene edificio costruito per questa pagina. Cioè se la pagina è un file chiamato "indice", lo @page_id sarà "indice" e quel collegamento avrà il tema Attivo.

Per completare l'esempio, ecco il brano tratto dal scss style partial che definisce attiva:

&.Active { 
    font-weight: bold; 
} 

In una versione successiva del file di intestazione, in realtà abbiamo rimosso il link quando sulla pagina attiva. Sembra qualcosa di simile - che potrebbe chiaramente essere riordinato, ma FWIW: D:

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

Nota che tutte le t ('roba') ha a che fare con le funzioni di traduzione per i18n. Puoi ignorarlo. Non volevo rendere sintatticamente sbagliato l'esempio cercando di rimuoverli.

Spero che questo aiuti - vedi anche il forum allo http://forum.middlemanapp.com/.

Answer 2

Ecco un nuovo gioiello per la marcatura di un collegamento corrente in Middleman con aria-current (che è possibile utilizzare per lo stile off di): https://github.com/thoughtbot/middleman-aria_current