7

リンクのリストを含む base.html テンプレートがあります。

例：

   <div id="sidebar1">
        <ul>
        <li><a href="/" title="">Index</a></li>
        <li><a href="/stuff/" title="" class="current">Stuff</a></li>
        <li><a href="/about/" title="">About Me</a></li>
        <li><a href="/contact/" title="">Contact Me</a></li>
    </div>

次に、views.py に index.html、stuff.html、about.html、および contact.html のそれぞれの定義があります。これらの各テンプレートは、単純に base.html テンプレートから派生し、それぞれ独自のタイトルとコンテンツを設定します。

私の質問は、上記の /stuff I have a class="current" に関するものです。

私がいる現在のページにそのクラス属性を持たせたいと思います。

current_page="about" のように各ビューに異なる変数を設定し、テンプレート{% ifequal %}で各 link の各クラス要素と比較することもできますが、それは作業を複製するように思えます (ビュー変数が余分にあるため)。

より良い方法はありますか？テンプレートが自動的に入力されたビュー関数名を取得する方法があれば、追加の変数を設定する必要はありませんか? また、多くの ifequals のようにも見えます。

4

4 に答える 4

17

これを行うためのエレガントな方法は、どこかからコピーしたものです。どこかを思い出せたらいいのにと思います。そうすれば、彼らにクレジットを与えることができます。8-）

id次のように、各ページ（またはセクション内のすべてのページ）にを割り当てます。

In index.html:    <body id='section-intro'>...
In faq.html:      <body id='section-faq'>...
In download.html: <body id='section-download'>...

そしてid、対応するリンクの。

<li id='nav-intro'><a href="./">Introduction</a></li>
<li id='nav-faq'><a href="./faq.html">FAQ</a></li>
<li id='nav-download'><a href="./download.html">Download</a></li>

そして、CSSで次のようなルールを設定しました。

#section-intro #nav-intro,
#section-faq #nav-faq,
#section-download #nav-download {
    font-weight: bold;
    /* And whatever other styles the current link should have. */
}

したがって、これは、現在のページが属するリンクのスタイルを制御するために、ほとんど宣言的な方法で機能します。実際の動作は、http：//entrian.com/source-search/で確認できます。

一度設定すると、非常にクリーンでシンプルなシステムになります。理由は次のとおりです。

  • リンクのテンプレートマークアップをいじる必要はありません
  • switch大きな醜いステートメントやif / else / elseステートメントを使用することになりません
  • セクションへのページの追加JustWorks[TM]
  • 物事の見た目を変えるということは、マークアップではなく、CSSを変えることを意味します。

私はDjangoを使用していませんが、このシステムはどこでも機能します。あなたの場合、「それぞれのタイトルとコンテンツを設定する」場合は、も設定する必要がありbody id、他のDjangoマークアップは必要ありません。

このアイデアは、他の状況にも簡単に拡張できます。「ダウンロードページ自体を除くすべてのページのサイドバーにダウンロードリンクが必要です。」あなたはこのようにCSSでそれを行うことができます：

#section-download #sidebar #download-link {
    display: none;
}

サイドバーのHTMLに条件付きテンプレートマークアップを配置する必要はありません。

于 2009-06-21T16:01:38.020 に答える
2

Django は使用していませんが、Kohana (PHP) と Rails で同じ問題に対処しました。

コハナでやっていること:

<li><a href="/admin/dashboard" <?= (get_class($this) == 'Dashboard_Controller') ? "class=\"active\"" : NULL ?>>Dashboard</a></li>
<li><a href="/admin/campaigns" <?= (get_class($this) == 'Campaigns_Controller') ? "class=\"active\"" : NULL ?>>Campaigns</a></li>
<li><a href="/admin/lists" <?= (get_class($this) == 'Lists_Controller') ? "class=\"active\"" : NULL ?>>Lists</a></li>

私がRailsでやっていること:

<li><a href="/main" <%= 'class="active"' if (controller.controller_name == 'main') %>>Overview</a></li>
<li><a href="/notifications" <%= 'class="active"' if (controller.controller_name == 'notifications') %>>Notifications</a></li>
<li><a href="/reports" <%= 'class="active"' if (controller.controller_name == 'reports') %>>Reports</a></li>
于 2009-06-21T16:41:57.703 に答える
1

ifquals の繰り返しを避けながら、それを行う方法はいくつかしかありません。

  1. Javascript。（jQuery）の行に沿ったもの：

    var parts = window.location.pathname.split('/');
var page = parts[parts.length-1];
$('#sidebar1 a[href*=' + page + ']').addClass('current');

  2. 関連するタイトルと URL を含むページのリストを含むようにビューを変更し、テンプレートに {% for %} ループを作成します。これはそのリストを通過し、単一の {% ifequal %} を追加します。

オプション 2 は、私が立っている場所からのお気に入りです。すべてのページのロジックが同じで、テンプレートのみが異なる場合は、各ページに FlatPages モデルを使用することを検討してください。ロジックが異なり、別のモデルが必要な場合は、何らかのメニュー アプリの使用を検討してください。恥知らずなプラグイン: 私は独自のメニュー アプリを持っています

于 2009-06-21T16:42:29.747 に答える