12

次のコードを思いついたのですが、問題は、メニュー項目ごとにアンカータグが重複することです。これを行うためのより良い方法はありますか？

                ul.nav
                    - if(menu="Home") 
                        li.active
                            a(href="#") Dashboard
                    else
                        li
                            a(href="#") Dashboard
                    li 
                        a(href="#") About
                    li 
                        a(href="#") Contact
4

7 に答える 7

23

同様の別の質問でこれを見つけました：

各「li」で3値を使用します

ul
    li(class=(title === 'Home' ? 'active' : ''))
        a(href='#') Home
    li(class=(title === 'Dashboard' ? 'active' : ''))
        a(href='#') Dashboard

必要に応じて、「タイトル」を使用する代わりに「メニュー」値を渡すようにルートを設定できます。

exports.index = function(req, res) {
    res.render('index', {title: 'Home', menu: 'Home'});
}
于 2012-07-06T22:47:10.873 に答える
7

これは少し重複が少ないです。

ul.nav
  each name in ["Dashboard", "About", "Contact"]
    if (menu=="Home")
      li.active
        a(href="#")= name
    else
      li
        a(href="#")= name

クラスの追加はactive、JavaScriptで行う方がよい場合もあれば、ストレートCSSa:activeセレクターを使用して必要なプレゼンテーションを取得できる場合もあります。

于 2012-05-23T05:59:20.337 に答える
6

hrefこれは、アンカーテキストに関して、 Peterのソリューションよりも柔軟性を提供する代替手段です。

nav
  // suppose title local denotes the active nav item
  - var nav = {}; nav[title] = 'active'
  ul
    // pass title to li class via nav object
    li(class='#{nav.Home}')
      // different href and anchor text
      a(href='/') Home
    li(class='#{nav.About}')
      a(href='/about') About
    li(class='#{nav.Contact}')
      a(href='/contact') Contact

注意点は、liアクティブでないものにはundefinedクラスがあり、ほとんどの場合害はありません。

于 2012-08-14T08:36:25.970 に答える
2

データにpageNameを渡すことができます。

each menu in ["Home", "Dashboard", "Contact", "About"]
    if (menu == pageName)
      li.active
        a(href="/#{menu}")= menu
    else
      li
        a(href="/#{menu}")= menu

レンダーを呼び出すことができます

res.render("index", { pageName: 'Home'})

res.render("index", { pageName: 'Dashboard'})

res.render("index", { pageName: 'Contact'})
于 2013-09-02T07:38:31.190 に答える
1

ボディクラスを現在のパスに設定したほうがいいと思います

body(class = currentPath)

したがって、次のようなセレクターを使用できます

body.home .nav li.home, body.dashboard .nav li.dashboard {
  Style when current path
}

これらのセレクターは、最小限の「body.path .path」に減らすことができますが、十分に分離されていない可能性があります。

これは、このセレクターを使用してJavaScriptのパスを次のように決定できるため、クライアント側のロジックでも役立ちます。

$("body.home").doSomethingSpecificToHome

このようにして、テンプレートのロジックは大幅に少なくなります。

さて、URLによっては自動的に「currentPath」を設定する方法はないと思います。'url'：'path'に基づくヘルパーが役立つ場合があります。

于 2012-05-23T07:05:21.453 に答える
1

重複することなく非常に柔軟：

ul
  each menuitem in [{title:'Home',url:'/'},{title:'About',url:'/about'},{title:'Contact',url:'/contact'}]
    if (menuitem.title == title)
      li.active
        a.active(href=menuitem.url) #{menuitem.title}
    else
      li
        a(href=menuitem.url) #{menuitem.title}

ページの現在のタイトルを設定する必要があります。

于 2013-07-16T15:21:00.333 に答える
0

@netActionの投稿に似ていますが、タイトルではなくURLに依存します。

each menuitem in [{title:'Home',url:'/'},{title:'About',url:'/about'},{title:'Contact',url:'/contact'}]
    if (path == menuitem.url)
        li.active
            a.active(href=menuitem.url) #{menuitem.title}
    else
        li
            a(href=menuitem.url) #{menuitem.title}

と組み合わせ

app.use(function(req, res, next) {
    res.locals = {
        isAuthenticated: req.isAuthenticated(),
        path :req.path
    }

    next(); // make sure we go to the next routes and don't stop here
});
于 2015-10-21T08:30:00.757 に答える