جانغو:هل هناك طريقة أفضل لجعل رابط الصفحة الحالية غامقًا

StackOverflow https://stackoverflow.com/questions/1024168

سؤال

لدي قالب 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>

ثم لدي في ملف view.py الخاص بي تعريف لكل من Index.html وstuff.html وabout.html وcontact.html.كل من هذه القوالب مشتقة ببساطة من قالب base.html وتقوم بتعيين العناوين والمحتويات الخاصة بها.

سؤالي يتعلق بما ورد أعلاه/الأشياء التي لدي فئة = "حالية".

أرغب في جعل الصفحة الحالية التي أستخدمها تحتوي على سمة الفئة هذه.

يمكنني تعيين متغير مختلف في كل طريقة عرض مثل current_page = "about" ثم إجراء مقارنة في القالب باستخدام {% ifequal %} في كل عنصر فئة من كل رابط، ولكن يبدو أن هذا عمل مكرر (بسبب متغير العرض الإضافي).

هل هناك طريقة أفضل؟ربما إذا كانت هناك طريقة للحصول على اسم وظيفة العرض التي تم ملء القالب منها تلقائيًا فلن أحتاج إلى تعيين المتغير الإضافي؟كما يبدو أن هناك الكثير من التساويات.

هل كانت مفيدة؟

المحلول

إليك طريقة أنيقة للقيام بذلك، والتي قمت بنسخها من مكان ما وأتمنى فقط أن أتذكر مكانها، حتى أتمكن من منحهم الفضل.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 صياغات
  • إضافة صفحات إلى قسم Just Works [TM]
  • إن تغيير الطريقة التي تبدو بها الأشياء يعني فقط تغيير CSS، وليس الترميز.

أنا لا أستخدم جانغو، ولكن هذا النظام يعمل في أي مكان.في حالتك، حيث تقوم "بتعيين العناوين والمحتويات الخاصة بكل منها"، فإنك تحتاج أيضًا إلى تعيين body id, ، وليس هناك حاجة إلى ترميز Django آخر.

تمتد هذه الفكرة بسهولة إلى مواقف أخرى أيضًا، على سبيل المثال."أريد رابط تنزيل في الشريط الجانبي على كل صفحة باستثناء صفحات التنزيل نفسها." يمكنك القيام بذلك في CSS مثل هذا:

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

بدلاً من الاضطرار إلى وضع علامة القالب الشرطي في شريط HTML الجانبي.

نصائح أخرى

لم تستخدم جانغو، ولكني تناولت نفس الموضوع في Kohana (PHP) والقضبان .

وماذا أفعل في Kohana: 

<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>

وماذا أفعل في القضبان: 

<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>

أرى طريقتين فقط للقيام بذلك، مع تجنب المعادلات المتكررة:

  1. جافا سكريبت.شيء على غرار (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 لكل صفحة من صفحاتك.إذا كان المنطق مختلفًا، وكنت بحاجة إلى نماذج مختلفة، فقد تفكر في استخدام تطبيق قائمة من نوع ما.المكونات وقح:انا املك تطبيق القائمة الخاص بي

إذا قمت بإضافة معالج السياق request، انها واضحة جدا: 

settings.py:

TEMPLATE_CONTEXT_PROCESSORS = (
    'django.core.context_processors.request',
    'django.contrib.auth.context_processors.auth'  # admin app wants this too
)

والآن لديك حق الوصول إلى HttpRequest، الذي يحتوي على مسار الطلب. تسليط الضوء على الصفحة الحالية هو مسألة بسيطة للتحقق إذا كان المسار مباريات وجهة الارتباط، أي كنت بالفعل هناك: 

<li><a class="{% if request.path == '/' %}current{% endif %}" href="/">Index</a></li>
<li><a class="{% if request.path == '/stuff/' %}current{% endif %}" href="/stuff/">Stuff</a></li>
<li><a class="{% if request.path == '/about/' %}current{% endif %}" href="/about/">About Me</a></li>
<li><a class="{% if request.path == '/contact/' %}current{% endif %}" href="/contact/">Contact Me</a></li>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top