জ্যাঙ্গোতে নেভিগেশন


104

আমি জাজানোতে আমার প্রথম ছোট্ট ওয়েব অ্যাপটি সবেমাত্র করেছি এবং আমি এটি পছন্দ করি। আমি কোনও পুরানো উত্পাদন পিএইচপি সাইটকে জ্যাঙ্গোতে রূপান্তর শুরু করতে চলেছি এবং অংশ হিসাবে এটির টেমপ্লেট হিসাবে, একটি নেভিগেশন বার রয়েছে।

পিএইচপি-তে, আমি প্রতিটি ন্যাশনাল বিকল্পের ইউআরএল বর্তমান ইউআরএল, টেম্পলেট কোডের বিপরীতে যাচাই করি এবং যদি তারা লাইন করে থাকে তবে একটি সিএসএস শ্রেণি প্রয়োগ করি। এটি ভয়াবহভাবে অগোছালো।

টেম্পলেটে জ্যাঙ্গোর পক্ষে কোড ভালভাবে পরিচালনা করার জন্য আরও ভাল কিছু থাকতে পারে?

শুরু করতে, আমি কীভাবে বর্তমান ইউআরএল পাব?


আমি এর জন্য github.com/orokusaki/django-active-menu তৈরি করেছি - এটি নেস্টেড ইউআরএল স্ট্রাকচার সমর্থন করে এবং কনভেনশনের উপর কনফিগারেশনের উপর নির্ভর করে (যে শব্দটি ততই খারাপ), তাই আপনি চাইলে আপনার সাইটের হায়ারার্কি সংজ্ঞায়িত করতে পারেন। আপনি শুধু ব্যবহার করুন <a href="{% url "view:name" %}" {% active_class "view:name" %}>। আপনি ঐচ্ছিকভাবে এটি ব্যবহার জেনারেট করতে পারবেন না শুধু" active" মান (ক্ষণস্থায়ী দ্বারা Falseএকটি বিদ্যমান ক্লাসটি লিখবেন যাও ট্যাগ করতে দ্বিতীয় যুক্তি হিসেবে), কিন্তু অধিকাংশ এনএভি লিঙ্কের জন্য উদাহরণ আমি যা ব্যবহার হয়।
orokusaki

এই প্রশ্নের এই এক সঙ্গে সম্পর্কযুক্ত হতে বলে মনে হয় stackoverflow.com/a/9801473/5739875
Evgeny Bobkin

হতে পারে এই গ্রিডটি সাহায্য করে: djangopackages.org/grids/g/navication
guettli

উত্তর:


74

আমি নেভিগেশন কাস্টমাইজ করতে টেমপ্লেট উত্তরাধিকার ব্যবহার। উদাহরণ স্বরূপ:

base.html

<html>
    <head>...</head>
    <body>
        ...
        {% block nav %}
        <ul id="nav">
            <li>{% block nav-home %}<a href="{% url home %}">Home</a>{% endblock %}</li>
            <li>{% block nav-about %}<a href="{% url about %}">About</a>{% endblock %}</li>
            <li>{% block nav-contact %}<a href="{% url contact %}">Contact</a>{% endblock %}</li>
        </ul>
        {% endblock %}
        ...
    </body>
</html>

about.html

{% extends "base.html" %}

{% block nav-about %}<strong class="nav-active">About</strong>{% endblock %}

আমি এই ধারণাটি অনেক পছন্দ করি, বিশেষত নমনীয়তার জন্য, তবে এটি কম-ডিআরওয়াই বাণিজ্য বন্ধের সাথে আসে। যদিও আমি এটি কোনও সাইটে এটি ব্যবহার শুরু করেছি।
বেনামে কাপুরুষ

22
আমি এই পদ্ধতির বিষয়ে উত্সাহী নই কারণ একই উপ-টেম্পলেট দ্বারা একাধিক সাইটের বিভাগ পরিচালনা করা অস্বাভাবিক নয়। সুতরাং আপনি টেমপ্লেটগুলিতে ভিউ এবং শর্তসাপেক্ষে কাস্টম ওয়ার স্থাপন, বা উপ-টেম্পলেটগুলি পুনরায় সাজিয়ে তোলেন যাতে সেগুলি সমস্ত অনন্য ... কেবলমাত্র বর্তমান সাইটের বিভাগটি সনাক্ত করার জন্য। টেমপ্লেট ট্যাগ পদ্ধতির শেষ পর্যন্ত পরিষ্কার হয়ে যায়।
শ্যাকার

আমি আরও কয়েকটি সমাধান দেখেছি এবং দেখে মনে হচ্ছে এগুলি হ্যাকের মতো কিছুটা। এটি অন্ততপক্ষে কার্যকর / স্ক্র্যাপ বাস্তবায়নের জন্য বেশ সোজা এবং সহজ।
mlissner

আমি <ul id="nav">....</ul>আলাদা ফাইলটিতে রিফ্যাক্টর করে বলি, ট্যাবস html বলতে পারি। সুতরাং এখন বেসচটিএমএল রয়েছে {%block nav%}{%include "tabs.html"%}{%endblock%}এবং তারপরে সক্রিয় ট্যাবের হাইলাইট করা কাজ বন্ধ করে দিয়েছে (উপরে html সম্পর্কে)। আমি কি কিছু মিস করছি?
কোনওটি-দা

@ ম্যাডি আপনার যথেষ্ট পরিমাণে ইন্ডিয়ারেশন পেয়ে গেছেন যে আমি একেবারে নিশ্চিত নই যে আমি এটিকে সরাসরি আমার মাথায় রেখে চলেছি, তবে আমি মনে করি যে includeট্যাগটি কীভাবে কাজ করে তা নিয়ে উত্তরটি করতে হবে । ডক্সে অন্তর্ভুক্ত নোটটি পরীক্ষা করে দেখুন: ডকস.ডজ্যাঙ্গোপ্রজেক্ট / en / dev / ref / templates / builtins / # অন্তর্ভুক্ত আপনার ক্ষেত্রে, আপনি যখন বেস টেমপ্লেটটি ওভাররাইড করার চেষ্টা করছেন তখন about.htmlআমার মনে হয় আপনি প্রক্রিয়াজাত হওয়ার জন্য অপেক্ষা করা জ্যাঙ্গো টেম্পলেট ব্লকের চেয়ে ইতিমধ্যে একটি রেন্ডার এইচটিএমএল ব্লক পেয়েছে।
jpwatts

117

এটি করার জন্য আপনার কোনও প্রয়োজন নেই, নিম্নলিখিত কোডটি একবার দেখুন:

tags.py

@register.simple_tag
def active(request, pattern):
    import re
    if re.search(pattern, request.path):
        return 'active'
    return ''

urls.py

urlpatterns += patterns('',
    (r'/$', view_home_method, 'home_url_name'),
    (r'/services/$', view_services_method, 'services_url_name'),
    (r'/contact/$', view_contact_method, 'contact_url_name'),
)

base.html

{% load tags %}

{% url 'home_url_name' as home %}
{% url 'services_url_name' as services %}
{% url 'contact_url_name' as contact %}

<div id="navigation">
    <a class="{% active request home %}" href="{{ home }}">Home</a>
    <a class="{% active request services %}" href="{{ services }}">Services</a>
    <a class="{% active request contact %}" href="{{ contact }}">Contact</a>
</div>

এটাই. বাস্তবায়নের বিশদগুলির জন্য এক
নজরে দেখুন: gnuvince.wordpress.com
110j.wordpress.com


2
Href এর বৈশিষ্ট্যগুলি django টেম্পলেট বন্ধনী অনুপস্থিত {{,}}} উদাহরণস্বরূপ, <a class= " । "> হোম </a> ট্যাগস.পি ফাইলের মধ্যে কয়েকটি অন্তর্ভুক্ত থাকতে হবে। অন্যথায়, দুর্দান্ত সমাধান!
bsk

2
+1 এটি অ্যাপ্লিকেশনগুলি থেকে আরও স্বচ্ছভাবে মিশ্রিত। একটি শিক্ষানবিস হিসাবে আমি এটির নিজের অ্যাপ্লিকেশনটির দরকার পড়ে ট্যাগগুলি বের করে আনে, আপনি কেবল এটি একটি বিশ্বব্যাপী ট্যাগ.পি ফাইলের মধ্যে ফেলে দিতে পারবেন না। আমি ট্যাগ নামে একটি নতুন অ্যাপ তৈরি করেছি এবং সবকিছু সুচারুভাবে চলছে। docs.djangoproject.com/en/dev/howto/custom-template-tags
কিও

3
@ কেয়ো, আপনার প্রকল্পে একটি টেম্পলেটট্যাগ ডিরেক্টরি তৈরি করুন এবং ইনস্টলডপসে আপনার প্রকল্প যুক্ত করুন। যে কৌশলও করব। বিকল্প হিসাবে, যেমনটি আপনি বলেছেন, আপনার প্রকল্পের মধ্যে একটি অ্যাপ হিসাবে আপনার মূল সাইটটি তৈরি করুন।
জোশ স্মিটন

5
যোগ করতে ভুলবেন না django.core.context_processors.requestআপনার টু TEMPLATE_CONTEXT_PROCESSORSমধ্যেsettings.py
amigcamel

1
এই বলে যে যেমন, নেস্টেড হতে পারে জন্য অবৈধ mysite.com(হোম) এবং mysite.com/blog, যেমন পথ দেখাবেন /এবং /blog/(যথাক্রমে) সাবেক প্রতিটি সময় জন্য একটি ম্যাচ মেনে নেওয়া। আপনি যদি /অবতরণ হিসাবে ব্যবহার না করেন তবে তা ঠিক আছে অন্যথায় আমি কেবল ব্যবহার করি return 'active' if pattern == request.path else ''(আমি এখনও এটি নিয়ে সমস্যাগুলি দেখিনি, তবে আমি এটি ব্যবহার করে সেট আপ করেছি)।
নারদওয়ালার

33

আমি উপরে ১১১ জের পরিষ্কারতা পছন্দ করেছি তাই আমি এর বেশিরভাগ অংশ নিয়েছি এবং এটির সাথে আমার যে 3 টি সমস্যা ছিল তা সমাধান করার জন্য পুনরায় ব্যবহার করেছি:

  1. নিয়মিত এক্সপ্রেশনটি অন্য সবার বিপরীতে 'হোম' url এর সাথে মিলছিল
  2. আমার একটি নেভিগেশন ট্যাবে ম্যাপযুক্ত একাধিক ইউআরএল প্রয়োজন ছিল , সুতরাং আমার আরও জটিল ট্যাগের প্রয়োজন যা পরিবর্তনশীল পরিমাণের পরামিতি নেয়
  3. কিছু ইউআরএল সমস্যা স্থির করে

এটা এখানে:

tags.py:

from django import template

register = template.Library()

@register.tag
def active(parser, token):
    args = token.split_contents()
    template_tag = args[0]
    if len(args) < 2:
        raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
    return NavSelectedNode(args[1:])

class NavSelectedNode(template.Node):
    def __init__(self, patterns):
        self.patterns = patterns
    def render(self, context):
        path = context['request'].path
        for p in self.patterns:
            pValue = template.Variable(p).resolve(context)
            if path == pValue:
                return "active" # change this if needed for other bootstrap version (compatible with 3.2)
        return ""

urls.py:

urlpatterns += patterns('',
    url(r'/$', view_home_method, {}, name='home_url_name'),
    url(r'/services/$', view_services_method, {}, name='services_url_name'),
    url(r'/contact/$', view_contact_method, {}, name='contact_url_name'),
    url(r'/contact/$', view_contact2_method, {}, name='contact2_url_name'),
)

base.html:

{% load tags %}

{% url home_url_name as home %}
{% url services_url_name as services %}
{% url contact_url_name as contact %}
{% url contact2_url_name as contact2 %}

<div id="navigation">
    <a class="{% active request home %}" href="home">Home</a>
    <a class="{% active request services %}" href="services">Services</a>
    <a class="{% active request contact contact2 %}" href="contact">Contact</a>
</div>

এটি সম্ভবত আমরা মার্কাসের সাথে সবচেয়ে ভাল উত্তর দিই, তবে "বাড়ি" দিয়ে এটি কীভাবে কাজ করে? এটা সবসময় সক্রিয়? কীভাবে এটি কেবলমাত্র রুট ইউআরএল কল (www.toto.com/ এবং www.toto.com/index) এ সক্রিয় করবেন? উভয় উত্তরই এই সমস্যার ফল দেয় না ...
ডেসটিনোভা

20

আমি জাঙ্গো-বংশের লেখক যা আমি এই প্রশ্নটি সমাধান করার জন্য বিশেষভাবে লিখেছিলাম: ডি

আমি নিজের প্রকল্পগুলিতে (নিখুঁতভাবে গ্রহণযোগ্য) জাপাওয়াত্স পদ্ধতিটি ব্যবহার করে বিরক্ত হয়েছি এবং ১১০ জেলের উত্তর থেকে অনুপ্রেরণা পেয়েছি। বংশটি দেখতে এরকম দেখাচ্ছে:

{% load lineage %}
<div id="navigation">
    <a class="{% ancestor '/home/' %}" href="/home/">Home</a>
    <a class="{% ancestor '/services/' %}" href="/services/">Services</a>
    <a class="{% ancestor '/contact/' %}" href="/contact/">Contact</a>
</div>

ancestor যুক্তিটি যদি বর্তমান পৃষ্ঠার ইউআরএল শুরুর সাথে মেলে তবে কেবল "সক্রিয়" দিয়ে প্রতিস্থাপন করা হবে।

পরিবর্তনশীল আর্গুমেন্ট এবং সম্পূর্ণ {% url %}টাইপের বিপরীত রেজোলিউশনও সমর্থিত। আমি কয়েকটি কনফিগারেশন বিকল্পগুলিতে ছিটিয়ে দিয়েছি এবং এটি সামান্য বের করে দিয়েছি এবং সবার ব্যবহারের জন্য এটি প্যাকেজ করেছি।

যদি কেউ আগ্রহী হন তবে এ সম্পর্কে কিছুটা আরও পড়ুন:

>> github.com/marcuswhybrow/django-lineage


1
টেমপ্লেটটিতে হার্ড কোডিং পাথগুলি :(
সিপিআইএল

10

জ্যাঙ্গো 1.5.০০ থেকে :

সমস্ত জেনেরিক শ্রেণিভিত্তিক দর্শনগুলিতে (বা কনটেক্সট মিক্সিন থেকে উত্তরাধিকারসূত্রে কোনও শ্রেণিভিত্তিক দৃষ্টিভঙ্গি), প্রসঙ্গত অভিধানে একটি ভিউ ভেরিয়েবল থাকে যা দর্শনীয় দৃষ্টিকোণকে নির্দেশ করে।

সুতরাং আপনি যদি এই জাতীয় মতামত ব্যবহার করে থাকেন তবে আপনি breadcrumbsশ্রেণিকেন্দ্রের ক্ষেত্র হিসাবে কিছু পছন্দ করতে পারেন এবং এটি আপনার টেম্পলেটগুলিতে ব্যবহার করতে পারেন।

উদাহরণ দেখুন কোড:

class YourDetailView(DetailView):
     breadcrumbs = ['detail']
     (...)

আপনার টেমপ্লেটে আপনি এটি এইভাবে ব্যবহার করতে পারেন:

<a href="/detail/" {% if 'detail' in view.breadcrumbs %}class="active"{% endif %}>Detail</a>

আপনি অতিরিক্ত পিতামাতা নেভিগেশন আইটেম "হাইলাইট" করতে চান, আপনি breadcrumbsতালিকা প্রসারিত প্রয়োজন :

class YourDetailView(DetailView):
     breadcrumbs = ['dashboard', 'list', 'detail']
     (...)

... এবং আপনার টেমপ্লেটে:

<a href="/dashboard/" {% if 'dashboard' in view.breadcrumbs %}class="active"{% endif %}>Dashboard</a>
<a href="/list/" {% if 'list' in view.breadcrumbs %}class="active"{% endif %}>List</a>
<a href="/detail/" {% if 'detail' in view.breadcrumbs %}class="active"{% endif %}>Detail</a>

এটি সহজ এবং পরিষ্কার সমাধান এবং নেস্টেড নেভিগেশনের সাথে বেশ ভাল কাজ করে।


উদাহরণস্বরূপ, তিনটি নেভিগেশন আইটেম হবে না .active?
অলি

হ্যাঁ, তবে এটি সাধারণত আপনি বহু-স্তরের নেভিগেশনের মাধ্যমে অর্জন করতে চান। আপনি চাইলে অবশ্যই একটি আইটেম .োকাতে breadcrumbsপারেন। তবে আপনার অধিকার আছে - আমার উদাহরণটি সেরা নয় is
কনরাড হাউস

@ অলি উন্নত উদাহরণ।
কনরাড হাউস

9

আপনি কোনও নির্দিষ্ট এনও আইটেমের পরিবর্তে পৃষ্ঠার বডি এলিমেন্টে কোনও ক্লাস বা আইডি প্রয়োগ করতে পারেন।

এইচটিএমএল:

<body class="{{ nav_class }}">

সিএসএস:

body.home #nav_home,
body.about #nav_about { */ Current nav styles */ }

8

আমি এটি এর মতো করি:

<a class="tab {% ifequal active_tab "statistics" %}active{% endifequal %}" href="{% url Member.Statistics %}">Statistics</a>

এবং তারপরে আমাকে যা করতে হবে তা হ'ল {'active_tab': 'statistics'}আমার প্রসঙ্গত অভিধানে যুক্ত করুন।

আপনি যদি ব্যবহার করেন তবে RequestContextআপনি আপনার টেমপ্লেটে বর্তমান পথটি পেতে পারেন:

{{ request.path }}

এবং আপনার দৃষ্টিতে:

from django.template import RequestContext

def my_view(request):
    # do something awesome here
    return template.render(RequestContext(request, context_dict))

এই তথ্য ভাগ করে নেওয়ার জন্য ধন্যবাদ। আমি এই পদ্ধতিটি ব্যবহার করেছি, তবে আমার এনএভি বারে একটি ফ্ল্যাটপেজও ছিল, তাই এটি সনাক্ত করতে এবং এটি সঠিকভাবে হাইলাইট করতে আমি {% ifequal ফ্ল্যাটপেজ.url '/ সম্পর্কে /'%} ব্যবহার করেছি} আমি ইউআরএলটির হার্ডকোডযুক্ত সনাক্তকরণ পছন্দ করি না তবে এটি একবারে হ্যাকের জন্য কাজ করে।
ম্যাট গ্যারিসন

এই সমাধানটির সমস্যাটি হ'ল আপনার কোডটিতে হার্ড কোডিং "পরিসংখ্যান" রয়েছে। এটি পৃষ্ঠার ইউআরএল পাওয়ার জন্য ইউআরএল ট্যাগটি ব্যবহারের উদ্দেশ্যকে পরাস্ত করে।
জাস্টিন

7

আমি উপরের নিভাব থেকে কোডটি নিয়েছি এবং কিছু জঘন্যতা সরিয়ে এটিকে একটি পরিষ্কার টেম্পলেট ট্যাগে পরিণত করেছি, এটি সংশোধন করেছি যাতে / অ্যাকাউন্ট / সম্পাদনা / এখনও অ্যাকাউন্ট / ট্যাবকে সক্রিয় করে তুলবে।

#current_nav.py
from django import template

register = template.Library()

@register.tag
def current_nav(parser, token):
    import re
    args = token.split_contents()
    template_tag = args[0]
    if len(args) < 2:
        raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
    return NavSelectedNode(args[1])

class NavSelectedNode(template.Node):
    def __init__(self, url):
        self.url = url

    def render(self, context):
        path = context['request'].path
        pValue = template.Variable(self.url).resolve(context)
        if (pValue == '/' or pValue == '') and not (path  == '/' or path == ''):
            return ""
        if path.startswith(pValue):
            return ' class="current"'
        return ""



#template.html
{% block nav %}
{% load current_nav %}
{% url home as home_url %}
{% url signup as signup_url %}
{% url auth_login as auth_login_url %}
<ul class="container">
    <li><a href="{{ home_url }}"{% current_nav home_url %} title="Home">Home</a></li>
    <li><a href="{{ auth_login_url }}"{% current_nav auth_login_url %} title="Login">Login</a></li>
    <li><a href="{{ signup_url }}"{% current_nav signup_url %} title="Signup">Signup</a></li>
</ul>
{% endblock %}

6

এটি উপরের টোবা প্রস্তাবিত সিএসএস সলিউশনের কেবল একটি বৈকল্পিক:

আপনার বেস টেমপ্লেটে নিম্নলিখিতটি অন্তর্ভুক্ত করুন:

<body id="section-{% block section %}home{% endblock %}">

তারপরে আপনার টেম্পলেটগুলিতে যা বেস ব্যবহারটি প্রসারিত করে:

{% block section %}show{% endblock %}

তারপরে আপনি বডি ট্যাগের উপর ভিত্তি করে বর্তমান অঞ্চলটি হাইলাইট করার জন্য CSS ব্যবহার করতে পারেন (উদাহরণস্বরূপ যদি আমাদের এনএভি-হোমের আইডির সাথে একটি লিঙ্ক থাকে):

#section-home a#nav-home{
 font-weight:bold;
}


3

আপনার উত্তরের জন্য ধন্যবাদ, এখন পর্যন্ত। আমি আবার কিছুটা আলাদা হয়ে গেলাম ..

আমার টেমপ্লেটে:

<li{{ link1_active }}>...link...</li>
<li{{ link2_active }}>...link...</li>
<li{{ link3_active }}>...link...</li>
<li{{ link4_active }}>...link...</li>

যুক্তিতে (পৃষ্ঠা: url.py এ) আমি কোন পৃষ্ঠায় রয়েছি একবার কাজ শেষ করার পরে আমি class="selected"টেমপ্লেটে ডান নামের অধীনে প্রসঙ্গের অংশ হিসাবে পাস করি ।

যেমন আমি যদি লিঙ্ক 1 পৃষ্ঠায় আছি তবে আমি সংযোজন করব {'link1_active':' class="selected"'} টেমপ্লেটটি স্কুপ করে ইনজেক্ট করার জন্য প্রসঙ্গে ।

এটি কাজ করে বলে মনে হচ্ছে এবং এটি মোটামুটি পরিষ্কার।

সম্পাদনা: এইচটিএমএলকে আমার নিয়ামক / দর্শন থেকে দূরে রাখতে, আমি এটি কিছুটা সংশোধন করেছি:

<li{% if link1_active %} class="selected"{% endif %}>...link...</li>
<li{% if link2_active %} class="selected"{% endif %}>...link...</li>
...

এটি টেমপ্লেটটিকে কিছুটা কম পঠনযোগ্য করে তোলে তবে আমি সম্মতি জানায়, ইউআরএল ফাইল থেকে কাঁচা এইচটিএমএল দিয়ে চাপ না দেওয়া ভাল।


2
আপনার দৃশ্যে কাঁচা এইচটিএমএল হ্যান্ডেল করা আপনার সত্যই এড়ানো উচিত , যা এই কৌশলটির প্রয়োজন। আপনি কি একটি কাস্টম টেম্পলেট ট্যাগ লেখার বিষয়ে চিন্তাভাবনা করেছেন?
জাস্টিন ভস

তুমি ঠিক বলছো. আমি এইচটিএমএল দিয়ে যাওয়া বন্ধ করার জন্য সম্পাদনা করেছি। আমি ঠিক এখন সত্য মাধ্যমে পাস। আমি এখনও কোনও টেমপ্লেট ট্যাগ লিখিনি, তবে হ্যাঁ, এটি শুরু করার জন্য ভাল জায়গা হতে পারে।
অলি

2

আমার একই পৃষ্ঠায় একাধিক মেনু রয়েছে যা লুপের মাধ্যমে গতিশীলভাবে তৈরি হয়। প্রসঙ্গের সাথে সম্পর্কিত উপরের পোস্টগুলি আমাকে দ্রুত সমাধান দিয়েছে। আশা করি এটি কারও সাহায্য করবে। (আমি সক্রিয় টেম্পলেট ট্যাগের পাশাপাশি এটি ব্যবহার করি - আমার ফিক্সটি গতিশীল সমস্যার সমাধান করে)। এটি একটি নির্বোধ তুলনা মত মনে হয়, কিন্তু এটি কার্যকর। আমি অ্যাক্টিভ_সোমথিং-ইউনিক এবং কিছু-অনন্য কিছু ভেরিয়েবলের নাম পছন্দ করেছি, এভাবে নেস্টেড মেনুগুলির সাথে এটি কাজ করে।

এখানে দর্শনের একটি অংশ (আমি কী করছি তা বুঝতে যথেষ্ট):

def project_list(request, catslug):
    "render the category detail page"
    category = get_object_or_404(Category, slug=catslug, site__id__exact=settings.SITE_ID)
    context = {
        'active_category': 
            category,
        'category': 
            category,
        'category_list': 
            Category.objects.filter(site__id__exact=settings.SITE_ID),

    }

এবং এটি টেমপ্লেট থেকে:

<ul>
  {% for category in category_list %}
    <li class="tab{% ifequal active_category category %}-active{% endifequal %}">
      <a href="{{ category.get_absolute_url }}">{{ category.cat }}</a>
    </li>
  {% endfor %}
</ul>

2

আমার সমাধানটি ছিল অনুরোধের পথের ভিত্তিতে ভেরিয়েবল সেট করার জন্য একটি সাধারণ প্রসঙ্গ প্রসেসর লিখতে:

def navigation(request):
"""
Custom context processor to set the navigation menu pointer.
"""
nav_pointer = ''
if request.path == '/':
    nav_pointer = 'main'
elif request.path.startswith('/services/'):
    nav_pointer = 'services'
elif request.path.startswith('/other_stuff/'):
    nav_pointer = 'other_stuff'
return {'nav_pointer': nav_pointer}

(আপনার কাস্টম প্রসেসরটিকে TEMPLATE_CONTEXT_PROCESSORS এ সেটিংস.পিতে যুক্ত করতে ভুলবেন না))

তারপরে বেস টেম্পলেটে আমি "সক্রিয়" শ্রেণি সংযোজন করতে হবে কিনা তা নির্ধারণ করতে লিঙ্ক প্রতি একটি আইফোক্যাল ট্যাগ ব্যবহার করি। অনুমোদিত এই পদ্ধতির আপনার পথের কাঠামোর নমনীয়তার পক্ষে কঠোরভাবে সীমাবদ্ধ তবে এটি আমার তুলনামূলক বিনয়ী মোতায়েনের জন্য কাজ করে।


আমি মনে করি এটি বিশ্বব্যাপী প্রেক্ষাপটে থাকা সত্যই বোধগম্য, সুতরাং আপনি সাইট বিভাগটি বিভিন্ন উপায়ে উল্লেখ করতে পারেন (উদাহরণস্বরূপ বিভিন্ন সাইটের বিভাগগুলির জন্য বিভিন্ন টেম্পলেট ব্যবহার করে + + 1
শেকার

2

আমি কেবল আমার সামান্য বর্ধনটি নিভাবের পোস্টে ভাগ করতে চেয়েছি। আমার অ্যাপ্লিকেশনটিতে আমার subnavigations আছে এবং আমি কেবল CSS ব্যবহার করে সেগুলি আড়াল করতে চাইনি, সুতরাং কোনও আইটেমের জন্য subnavication প্রদর্শন করার জন্য আমার কিছু প্রকার "if" ট্যাগের প্রয়োজন ছিল।

from django import template
register = template.Library()

@register.tag
def ifnaviactive(parser, token):
    nodelist = parser.parse(('endifnaviactive',))
    parser.delete_first_token()

    import re
    args = token.split_contents()
    template_tag = args[0]
    if len(args) < 2:
        raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
    return NavSelectedNode(args[1:], nodelist)

class NavSelectedNode(template.Node):
    def __init__(self, patterns, nodelist):
        self.patterns = patterns
        self.nodelist = nodelist

    def render(self, context):
        path = context['request'].path
        for p in self.patterns:
            pValue = template.Variable(p).resolve(context)
            if path == pValue:
                return self.nodelist.render(context)
        return ""

আপনি এটিকে সক্রিয় ট্যাগের মতো একইভাবে ব্যবহার করতে পারেন:

{% url product_url as product %}

{% ifnaviactive request product %}
    <ul class="subnavi">
        <li>Subnavi item for product 1</li>
        ...
    </ul>
{% endifnaviactive %}

2

মূল সমাধানটির আরও একটি ehnancement।

এটি একাধিক নিদর্শন গ্রহণ করে এবং নীচের মতো '' 'এ মোড়ানো আপেক্ষিক ইউআরএল হিসাবে রচিত নামহীন নিদর্শনগুলিও:

{% url admin:clients_client_changelist as clients %}
{% url admin:clients_town_changelist as towns %}
{% url admin:clients_district_changelist as districts %}

<li class="{% active "/" %}"><a href="/">Home</a></li>
<li class="{% active clients %}"><a href="{{ clients }}">Clients</a></li>
{% if request.user.is_superuser %}
<li class="{% active towns districts %}">
    <a href="#">Settings</a>
    <ul>
        <li><a href="{{ towns }}">Towns</a></li>
        <li><a href="{{ districts }}">Districts</a></li>
    </ul>
</li>
{% endif %}

ট্যাগটি এরকম হয়:

from django import template

register = template.Library()

@register.tag
def active(parser, token):
    args = token.split_contents()
    template_tag = args[0]
    if len(args) < 2:
        raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
    return NavSelectedNode(args[1:])

class NavSelectedNode(template.Node):
    def __init__(self, urls):
        self.urls = urls

    def render(self, context):
        path = context['request'].path

        for url in self.urls:
            if '"' not in url:
                cpath = template.Variable(url).resolve(context)
            else:
                cpath = url.strip('"')

            if (cpath == '/' or cpath == '') and not (path == '/' or path == ''):
                return ""
            if path.startswith(cpath):
                return 'active'
        return ""

2

আমি আমার নব্বারগুলি হাইলাইট করতে jquery ব্যবহার করেছি। এই সমাধানটি কেবল সিএসএস শ্রেণিকে "সক্রিয়" আইটেমটিতে যুক্ত করে যা CSS নির্বাচককে ফিট করে।

<script type="text/javascript" src="/static/js/jquery.js"></script>
<script>
    $(document).ready(function(){
        var path = location.pathname;
        $('ul.navbar a.nav[href$="' + path + '"]').addClass("active");
    });
</script>

2

কোনও ট্যাগ ছাড়াই @tback এর উত্তরে সামান্য বর্ধন %if%:

# navigation.py
from django import template
from django.core.urlresolvers import resolve

register = template.Library()

@register.filter(name="activate_if_active", is_safe=True)
def activate_if_active(request, urlname):
  if resolve(request.get_full_path()).url_name == urlname:
    return "active"
  return ''

এটি আপনার টেম্পলেটটিতে এটি ব্যবহার করুন:

{% load navigation %}
<li class="{{ request|activate_if_active:'url_name' }}">
  <a href="{% url 'url_name' %}">My View</a>
</li>

এবং "django.core.context_processors.request"আপনার TEMPLATE_CONTEXT_PROCESSORSসেটিং অন্তর্ভুক্ত ।


2

আমি অন্তর্ভুক্তি ট্যাগটি ব্যবহার করা সবচেয়ে ভাল:

templates/fnf/nav_item.html

<li class="nav-item">
    <a class="nav-link {% if is_active %}active{% endif %}" href="{% url url_name %}">{{ link_name }}</a>
</li>

এটি কেবলমাত্র আমার প্রাথমিক বুটস্ট্র্যাপ ন্যাভ আইটেমটি যা রেন্ডার করতে চাই।

এটি href মান এবং allyচ্ছিকভাবে লিঙ্ক_নামের মান পায়। is_activeবর্তমান অনুরোধের ভিত্তিতে গণনা করা হয়।

templatetags/nav.py

from django import template

register = template.Library()


@register.inclusion_tag('fnf/nav_item.html', takes_context=True)
def nav_item(context, url_name, link_name=None):
    return {
        'url_name': url_name,
        'link_name': link_name or url_name.title(),
        'is_active': context.request.resolver_match.url_name == url_name,
    }

তারপরে এটি একটি নেভিতে ব্যবহার করুন: templates/fnf/nav.html

{% load nav %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <ul class="navbar-nav mr-auto">
                {% nav_item 'dashboard' %}
            </ul>

কেবল একটি কার্সারি পড়া, তবে এটি কি ইউআরএলে সঠিক মিলগুলির পক্ষে জিনিসগুলিকে সীমাবদ্ধ করে না? আমি সাধারণত পৃষ্ঠাগুলির জন্য এ জাতীয় নেভিগেশন ইঙ্গিতগুলি ব্যবহার করি। উদাহরণস্বরূপ নেভ আইটেমটি হাইলাইট করা হবে যদি আপনি হয় /about/company-history/বা /about/what-we-do/
ওলি

1
হ্যাঁ, তবে is_activeপ্রতিস্থাপন করা যেতে পারে এবং অভিধানে যুক্ত অন্যান্য কীগুলি ফিরে আসে। এছাড়াও, চেক context.request.resolver_match.url_name.startswith(x)বা অন্য কিছু হতে পারে। এছাড়াও, ডিক মানগুলি প্রতিষ্ঠিত করার জন্য আপনার কাছে রিটার্ন স্টেটমেন্টের আগে কোড থাকতে পারে। এছাড়াও, আপনি বিভিন্ন টেমপ্লেট, অর্থাত্ এক জন্য ব্যবহার করতে পারেন top_level_nav.htmlবিভিন্ন যুক্তি, ইত্যাদি
Tjorriemorrie

পরিষ্কার এবং সহজ সমাধান ... দুর্দান্ত!
এমএমডাব্লু

1

আন্ড্রেয়াসের উত্তরটি সামান্যভাবে সংশোধন করা হচ্ছে, দেখে মনে হচ্ছে আপনি url.py থেকে টেমপ্লেট ট্যাগটিতে রুটের নামে পাস করতে পারেন। আমার উদাহরণে my_tasksএবং তারপরে টেমপ্লেট ট্যাগ ফাংশনে ইউআরএলটি কী হওয়া উচিত তা নিয়ে কাজ করতে বিপরীত ফাংশনটি ব্যবহার করুন, তারপরে আপনি অনুরোধ অবজেক্টের ইউআরএলের বিপরীতে এটি মেলে ফেলতে পারেন (টেম্পলেট প্রসঙ্গে উপলব্ধ)

from django import template
from django.core.urlresolvers import reverse

register = template.Library()

@register.tag
def active(parser, token):
    args = token.split_contents()
    template_tag = args[0]
    if len(args) < 2:
        raise template.TemplateSyntaxError, "%r tag requires at least one argument" % template_tag
    return NavSelectedNode(args[1:])

class NavSelectedNode(template.Node):
    def __init__(self, name):
        self.name = name

    def render(self, context):

        if context['request'].path == reverse(self.name[1]):
            return 'active'
        else:
            return ''

urls.py

url(r'^tasks/my', my_tasks, name = 'my_tasks' ),

template.html

<li class="{% active request all_tasks %}"><a href="{% url all_tasks %}">Everyone</a></li>

হতে পারে, আরও সহজ সরল পদ্ধতি: টার্নকিলিনাক্স.অর্গ
ডাজাঙ্গো-

1

আমি জানি আমি পার্টিতে দেরি করেছি। আমি জনপ্রিয় সমাধানগুলির কোনওটি পছন্দ করি না যদিও:

ব্লক পদ্ধতি ভুল বলে মনে হয়: আমার মনে হয় গৌণ স্বয়ংসম্পূর্ণ হওয়া উচিত।

template_tag পদ্ধতি ভুল বলে মনে হয়: আমি কি করতে মতো আমি প্রথম URL-ট্যাগ থেকে URL পান করতে হবে না। এছাড়াও, আমি মনে করি যে CSS-ক্লাসটি ট্যাগটিতে নয়, টেমপ্লেটে সংজ্ঞায়িত করা উচিত।

তাই আমি একটি ফিল্টার লিখেছিলাম যাতে আমার উপরে বর্ণিত ত্রুটিগুলি নেই। এটি Trueইউআরএল সক্রিয় থাকে এবং তাই এর সাথে ব্যবহার করা যেতে পারে তবে এটি ফিরে আসে {% if %}:

{% load navigation %}
<li{% if request|active:"home" %} class="active"{% endif %}><a href="{% url "home" %}">Home</a></li>

কোড:

@register.filter(name="active")
def active(request, url_name):
    return resolve(request.path_info).url_name == url_name

শুধু RequestContextনেভিগেশন সহ পৃষ্ঠাগুলিতে ব্যবহার করার জন্য বা আপনার প্রসঙ্গে প্রসঙ্গ_প্রসেসরের অনুরোধ সক্ষম করতে নিশ্চিত করুনsettings.py

TEMPLATE_CONTEXT_PROCESSORS = (
    ...
    'django.core.context_processors.request',
)

1

আমি jpwatts ', 110j এর, nivhab এর & মার্কাস হোয়ব্রো দেখেছি উত্তর , তবে তাদের সবার অভাব আছে বলে মনে হচ্ছে: মূল পাথের কী হবে? এটি সর্বদা সক্রিয় কেন?

সুতরাং আমি একটি অন্য উপায় তৈরি করেছি, সহজ, যা "কন্ট্রোলার" নিজেই সিদ্ধান্ত নেয় এবং আমি মনে করি এটি বেশিরভাগ বড় সমস্যার সমাধান করে।

এখানে আমার কাস্টম ট্যাগ:

## myapp_tags.py

@register.simple_tag
def nav_css_class(page_class):
    if not page_class:
        return ""
    else:
        return page_class

তারপরে, "নিয়ামক" সিএসএসের প্রয়োজনীয় ক্লাসগুলি ঘোষণা করে (বাস্তবে, এটি সর্বাধিক গুরুত্বপূর্ণ এটি টেম্পলেটে উপস্থিতি ঘোষণা করে)

## views.py

def ping(request):
    context={}
    context["nav_ping"] = "active"
    return render(request, 'myapp/ping.html',context)

এবং পরিশেষে, আমি আমার নেভিগেশন বারে এটি রেন্ডার করি:

<!-- sidebar.html -->

{% load myapp_tags %}
...

<a class="{% nav_css_class nav_home %}" href="{% url 'index' %}">
    Accueil
</a>
<a class="{% nav_css_class nav_candidats %}" href="{% url 'candidats' %}">
    Candidats
</a>
<a class="{% nav_css_class nav_ping %}" href="{% url 'ping' %}">
    Ping
</a>
<a class="{% nav_css_class nav_stat %}" href="{% url 'statistiques' %}">
    Statistiques
</a>
...

সুতরাং প্রতিটি পৃষ্ঠার nav_css_classসেট করার নিজস্ব মান রয়েছে এবং এটি সেট করা থাকলে টেমপ্লেটটি সক্রিয়ভাবে রেন্ডার করে: requestটেমপ্লেট প্রসঙ্গে প্রয়োজন নেই, ইউআরএল পার্সিংয়ের প্রয়োজন নেই এবং মাল্টি-ইউআরএল পৃষ্ঠা বা মূল পৃষ্ঠা সম্পর্কে কোনও সমস্যা নেই।


1

এই সমাধানটি দ্বারা অনুপ্রাণিত হয়ে আমি এই পদ্ধতির ব্যবহার শুরু করেছি:

**Placed in templates as base.html**

{% block tab_menu %}
<ul class="tab-menu">
  <li class="{% if active_tab == 'tab1' %} active{% endif %}"><a href="#">Tab 1</a></li>
  <li class="{% if active_tab == 'tab2' %} active{% endif %}"><a href="#">Tab 2</a></li>
  <li class="{% if active_tab == 'tab3' %} active{% endif %}"><a href="#">Tab 3</a></li>
</ul>
{% endblock tab_menu %}

**Placed in your page template**

{% extends "base.html" %}

{% block tab_menu %}
  {% with active_tab="tab1" %} {{ block.super }} {% endwith %}
{% endblock tab_menu %}

0

এখানে আমার যেতে। আমি আমার দর্শনগুলিতে এমন একটি শ্রেণি বাস্তবায়ন করে শেষ করেছি যাতে আমার নেভিগেশন কাঠামো রয়েছে (কিছু মেটাডাটা সমতল)। আমি তখন এটি টেমপ্লেটে ইনজেকশনের মাধ্যমে এটি রেন্ডার করি।

আমার সমাধান i18n দিয়ে কাজ করে। এটি সম্ভবত কিছুটা বিমূর্ত করা উচিত তবে আমি সত্যিই এটি নিয়ে বিরক্ত হইনি।

views.py:

from django.utils.translation import get_language, ugettext as _


class Navi(list):
    items = (_('Events'), _('Users'), )

    def __init__(self, cur_path):
        lang = get_language()
        first_part = '/' + cur_path.lstrip('/').split('/')[0]

        def set_status(n):
            if n['url'] == first_part:
                n['status'] == 'active'

        for i in self.items:
            o = {'name': i, 'url': '/' + slugify(i)}
            set_status(o)
            self.append(o)

# remember to attach Navi() to your template context!
# ie. 'navi': Navi(request.path)

আমি এই জাতীয় অন্তর্ভুক্ত ব্যবহার করে টেম্পলেট যুক্তি সংজ্ঞায়িত করেছি। বেস টেমপ্লেট:

{% include "includes/navigation.html" with items=navi %}

আসল অন্তর্ভুক্ত (অন্তর্ভুক্ত / নেভিগেশন html):

 <ul class="nav">
     {% for item in items %}
         <li class="{{ item.status }}">
             <a href="{{ item.url }}">{{ item.name }}</a>
         </li>
     {% endfor %}
 </ul>

আশা করি কেউ এই দরকারী খুঁজে পাবেন! আমার ধারণা, নেস্টেড শ্রেণিবদ্ধতা ইত্যাদি সমর্থন করার পক্ষে এই ধারণাটি প্রসারিত করা বেশ সহজ হবে gu


0

একটি অন্তর্ভুক্ত টেমপ্লেট তৈরি করুন "ইন্ট্রানেট / নাভাইটাম_ইচটিএমএল":

{% load url from future %}

{% url view as view_url %}
<li class="nav-item{% ifequal view_url request.path %} current{% endifequal %}">
    <a href="{{ view_url }}">{{ title }}</a>
</li>

এবং এটিকে এনএভি উপাদানটিতে অন্তর্ভুক্ত করুন:

<ul>
    {% include "intranet/nav_item.html" with view='intranet.views.home' title='Home' %}
    {% include "intranet/nav_item.html" with view='crm.views.clients' title='Clients' %}
</ul>

এবং আপনার সেটিংসে এটি যুক্ত করতে হবে:

from django.conf import global_settings
TEMPLATE_CONTEXT_PROCESSORS = global_settings.TEMPLATE_CONTEXT_PROCESSORS + (
    'django.core.context_processors.request',
)

0

এখানে বেশ সহজ সমাধান, https://github.com/hellysmile/django-activeurl


1
দয়া করে নোট করুন যে আপনার এখানে একটি উত্তরের দরকারী পয়েন্টগুলি এই সাইটে পোস্ট করা উচিত, অথবা আপনার পোস্টটি "উত্তর নয়" হিসাবে মুছে ফেলার ঝুঁকি রয়েছে । আপনি চাইলে লিঙ্কটি অন্তর্ভুক্ত করতে পারেন তবে কেবল 'রেফারেন্স' হিসাবে। উত্তরটি লিঙ্কটির প্রয়োজন ছাড়াই নিজেরাই দাঁড়ানো উচিত।
অ্যান্ড্রু বারবার

0

এই তাই প্রশ্ন থেকে

{% url 'some_urlpattern_name' as url %}
<a href="{{url}}"{% if request.path == url %} class="active"{% endif %}>Link</a>

প্রতিটি লিঙ্কের জন্য প্রয়োজনীয় হিসাবে পুনরাবৃত্তি।


এটি কেবল সরাসরি ম্যাচের জন্য কাজ করে। বংশধর পৃষ্ঠাটি সক্রিয় থাকলে বেশিরভাগ নেভিগেশন সিস্টেমগুলি ন্যাভ আইটেমটিকে সক্রিয় চিহ্নিত করে। অর্থাত্ যদি /blog/posts/2021/04/12URL ছিল / ব্লগ / এনএভি আইটেমটি সক্রিয় হতে হবে।
ওলি

@ অলি হ্যাঁ এটি কিছু সময় কাজ করবে না। Stackoverflow গৌণ অর্থাৎ উদাহরণস্বরূপ Questions, Tags, Users, Badges, Unanswered, Ask Question। এটি কাজ করে না Questions, তবে অন্যান্য সমস্ত নেভের জন্য এটি ঠিকঠাক কাজ করবে।
suhailvs

0

আমি jQuery এটি হাইলাইট করতে এবং এটি শব্দার্থবিহীন জ্যাঙ্গো টেম্পলেট ট্যাগগুলির সাথে টেমপ্লেটকে চাঙ্গা করার চেয়ে আরও মার্জিত বলে খুঁজে পেয়েছি।

নীচের কোডটি বুটস্ট্র্যাপ 3 এ নেস্টেড ড্রপডাউনগুলির সাথে কাজ করে (পিতামাতার এবং সন্তানের <li>উপাদান উভয়কেই হাইলাইট করে ।

// DOM Ready
$(function() {
    // Highlight current page in nav bar
    $('.nav, .navbar-nav li').each(function() {
        // Count the number of links to the current page in the <li>
        var matched_links = $(this).find('a[href]').filter(function() {
            return $(this).attr('href') == window.location.pathname; 
        }).length;
        // If there's at least one, mark the <li> as active
        if (matched_links)
            $(this).addClass('active');
    });
});

টেমপ্লেট / এইচটিএমএল মার্কআপ ব্যতীত বর্তমান পৃষ্ঠার জন্য একটি clickইভেন্ট যুক্ত করতে return false(বা এতে hrefবৈশিষ্ট্য পরিবর্তন করা #) খুব সহজ :

        var matched_links = $(this).find('a[href]').filter(function() {
            var matched = $(this).attr('href') == window.location.pathname;
            if (matched)
                $(this).click(function() { return false; });
            return matched;
        }).length;

0

আমি শ্রেণিবদ্ধ দর্শনগুলির জন্য এই মিশ্রণের সংমিশ্রণটি ব্যবহার করি:

class SetActiveViewMixin(object):
    def get_context_data(self, **kwargs):
        context = super(SetActiveViewMixin, self).get_context_data(**kwargs)
        context['active_nav_menu'] = {
            self.request.resolver_match.view_name: ' class="pure-menu-selected"'
        }
        return context

টেমপ্লেটে এটি সহ:

<ul>
    <li{{active_nav_menu.node_explorer }}><a href="{% url 'node_explorer' '' %}">Explore</a></li>
    <li{{active_nav_menu.node_create }}><a href="{% url 'node_create' path %}">Create</a></li>
    <li{{active_nav_menu.node_edit }}><a href="{% url 'node_edit' path %}">Edit</a></li>
    <li{{active_nav_menu.node_delete }}><a href="{% url 'node_delete' path %}">Delete</a></li>
</ul>

0

খনিটি পূর্ববর্তী জমা দেওয়া অন্য জেএস পদ্ধতির সাথে কিছুটা অনুরূপ .. কেবল jQuery ছাড়া ...

আমাদের নীচের বেস html এ বলুন:

<div class="pure-u-1 pure-menu pure-menu-open pure-menu-horizontal header" >
    <ul class="">
        <li id="home"><a href="{% url 'article:index' %}">Home</a></li>
        <li id="news"><a href="{% url 'article:index' %}">News</a></li>
        <li id="analysis"><a href="{% url 'article:index' %}">Analysis</a></li>
        <li id="opinion"><a href="{% url 'article:index' %}">Opinion</a></li>
        <li id="data"><a href="{% url 'article:index' %}">Data</a></li>
        <li id="events"><a href="{% url 'article:index' %}">Events</a></li>
        <li id="forum"><a href="{% url 'article:index' %}">Forum</a></li>
        <li id="subscribe"><a href="{% url 'article:index' %}">Subscribe</a></li>
    </ul>
    <script type="text/javascript">
        (function(){
            loc=/\w+/.exec(window.location.pathname)[0];
            el=document.getElementById(loc).className='pure-menu-selected';         
        })();   
    </script>
</div>

আমি কেবলমাত্র একটি নির্দিষ্ট ইউআরএল প্যাটার্ন অনুসরণ করার জন্য আমার শ্রেণিবিন্যাস তৈরি করেছি ... হোস্টের ঠিকানার পরে ... আমার কাছে আমার মূল বিভাগ আছে, যেমন, বাড়ি, সংবাদ, বিশ্লেষণ ইত্যাদি এবং রেজেক্স কেবল প্রথম শব্দটিকে লোকেশন থেকে বাইরে নিয়ে যায়

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.