Ebeveyn yeşim şablonumda gezinti çubuğu var ve şu anda görüntülenen öğeyi vurgulamak istiyorum.Yeşim: Ebeveyn şablonunda aktif menü öğesini değiştir
ul
li Home
li.active Blog
li Contact Us
li About
her çocuk şablonuna gezinti çubuğu yapısını kopyalayarak olmadan, ben blog sayfasındaki yüzden eğer, ebeveyn şablonu uzanan ne sayfa görüp uygun active sınıfı uygulamak için bir yol var?
parent.jade
doctype 5
html
block link
-var selected = 'home'; //default
-var menu = { 'home': '/home', 'blog': '/blog', 'contact': '/contact' };
body
nav
ul
each val, key in menu
li
if selected === key
a.selected(href=val, title=key)= key
else
a(href=val, title=key)= key
child.jade
extends parent
block link
-var selected = 'blog';
Yessss. Aradığım şey bu. Teşekkür ederim. –
Süper cool. Çok teşekkür ederim. – user1429980
Gerçekten mi? Bunu yapmanın daha basit bir yolu yok mu? -sad face- – Costa
İşte basit bir yolu var:
kullanın Bu layout.jade içinde (nav adıdır sayfanın aktif olması. nav = 'about' gibi)
ul(class="#{nav}")
li.home Home
li.blog Blog
li.contact Contact Us
li.about About
Sonra koymak bu CSS şu olabilir: ul sınıf var biridir uygulanacaktır
ul.home li.home,
ul.blog li.blog,
ul.contact li.contact,
ul.about li.about {
color: red;
}
sadece css kuralı. Bulunduğunuz sayfaya bağlı olarak, 'about', 'home', 'contact' veya 'blog' değerlerine eşit olan nav değişkenini iletmeniz gerekir.
Sass kullanıyorsanız, bunu da yapabilirsiniz: http://codepen.io/ajkochanowicz/pen/zGvgxz –
Hey aynısını yaptım ama müfettişte "undefined" yazıyor. NAV'ım ayrı bir .jade dosyasında var (yeşimdeki yeni yaşıyorum) Neyi yanlış yapıyorum? – moesphemie
Üçlü bir ifadeyle Current object'u kullanın. Tüm belgelerdedir.
Etkin menünüzü oluşturmak için nesne özelliklerini kullanabilirsiniz. Eğer (Jade versiyonu) navigasyon menüsündeki klasörleri kullanmak isterseniz:
ul(class="nav-menu")
li: a(class="#{ current.path[0] === 'index' ? 'active' : '' }", href="/") home
li: a(class="#{ current.path[0] === 'about' ? 'active' : '' }", href="/about/") aboutEh, çözüm çok net ama birisi menüleri üzerinde daha fazla denetim bakıyor o zaman kullanılabilir bir modül var yukarıda node.js. için Bunu kullanın ve menüler üzerinde tam kontrol sahibi olursunuz.
Kullanım Örneği: menüler görünür öğe rolleri
dayalı zaman ben katılmıyorum en iyi bahis – Ven
var javascript. JS hack kullanmadan önce bu yapıyı çocuk şablonlarında tekrarlarım. –
Sadece, her şeyi sıraya koymak için nasıl görüneceğini göstermek istedim. Kod korkunç görünüyor – Ven