39

私のページから次の html スニペットを取得しましたtemplate.html。

<ul class='nav'>
    <li class="active"><a href='/'>Home</a></li>
    <li><a href='/lorem'>Lorem</a></li>

    {% if session['logged_in'] %}
        <li><a href="/account">Account</a></li>
        <li><a href="/projects">Projects</a>
        <li><a href="/logout">Logout</a></li>
    {% endif %}

    {% if not session['logged_in'] %}
        <li><a href="/login">Login</a></li>
        <li><a href="/register">Register</a></li>
    {% endif %}
</ul>

2 行目でわかるように、アクティブなクラスがあります。これにより、アクティブなタブが twitter ブートストラップ css ファイルで強調表示されます。さて、これは私が訪問する場合はうまくいきますが、たとえばwww.page.com/訪問するときはうまくいきません。www.page.com/loginホーム リンクがアクティブなタブとして引き続き強調表示されます。

もちろん、これは Javascript/jQuery で簡単に実行できますが、この状況では使用したくありません。

Ruby on Railsの実用的なソリューションはすでにありますが、それをpython / jinjaに変換する方法がわかりません（私はjinja / Flaskを初めて使用し、rubyをまったく使用したことがありません）

4

7 に答える 7

88

これを見ましたか？https://jinja.palletsprojects.com/en/3.0.x/tricks/#highlighting-active-menu-items

アクティブなメニュー項目のハイライト

多くの場合、アクティブなナビゲーション項目を含むナビゲーション バーが必要です。これを達成するのは本当に簡単です。子テンプレートのブロック外の割り当てはグローバルであり、レイアウト テンプレートが評価される前に実行されるため、子テンプレートでアクティブなメニュー項目を定義することができます。

{% extends "layout.html" %}
{% set active_page = "index" %}

その後、レイアウト テンプレートは にアクセスできますactive_page。さらに、その変数のデフォルトを定義することは理にかなっています:

{% set navigation_bar = [
    ('/', 'index', 'Index'),
    ('/downloads/', 'downloads', 'Downloads'),
    ('/about/', 'about', 'About')
] -%}

{% set active_page = active_page|default('index') -%}
...
<ul id="navigation">
    {% for href, id, caption in navigation_bar %}
    <li{% if id == active_page %} class="active"{% endif
    %}><a href="{{ href|e }}">{{ caption|e }}</a>
    </li>
{% endfor %}
</ul>
于 2013-09-03T20:07:51.400 に答える
6

jinja/flask/bootstrapユーザー向け:

ブログの例で行ったようにナビゲーションを定義する場合http://getbootstrap.com/examples/blog/ url_for引数 に一致するリンクにIDを割り当てるだけで、レイアウトテンプレートを変更するだけで、残りは機能します＃マジック。

<nav class="blog-nav">
  <a id="allposts"  class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>
  <a id="index"     class="blog-nav-item" href="{{ url_for('index')}}">Index</a>
  <a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>
</nav>

ベース/レイアウト テンプレートの下部にこれを追加するだけです

<script>
  $(document).ready(function () {
  $("#{{request.endpoint}}").addClass("active"); })
</script>

正しい要素がアクティブに設定されます。

編集: 次のように、リストに要素を含むレイアウトがある場合:

<nav class="blog-nav">
  <ul class="nav navbar-nav">
    <li>
        <a id="allposts"  class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>
    </li>
    <li>
        <a id="index"     class="blog-nav-item" href="{{ url_for('index')}}">Index</a>
    </li>
    <li>
        <a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>
    </li>
  </ul>
</nav>

リンクの代わりに li 要素を取得するには、 parent()関数を使用します。

<script>
    $(document).ready(function () {
    $("#{{request.endpoint}}").parent().addClass("active"); })
</script>
于 2014-11-19T10:47:37.237 に答える