I use bootstrap for my django project.
I have a navbar like this:
[home][gallery][user]
How can I change the CSS properties of a specific navbar button to correspond to a currently opened page?
For example, if I am on the home page, the home button would be highlighted.
Solution 1
I usually have the navbar template gets included in all templates, each template should define what the page is this.
For example
# nav.html
<div class="..">
<div class="..">My Nav</div>
<ul class="..">
Home
Settings
</ul>
</div>
Then in each template you specify which should be active. something like this
# home.html
{% include "yourtemplatedir/nav.html" with active='home' %}
# settings.html
{% include "yourtemplatedir/nav.html" with active='settings' %}
Solution 2
Using context processor will make it sometimes easy
def get_current_path(request):
return {
'current_path': request.get_full_path()
}
In your template you can use {{ current_path }} to determine which nav item should be active.
You can also enhance the context processor code in order to check the prefix of the url and set the active_page variable automatically. so you don't need to set it with each include (In case you include the nav.html in your base always). However it really hard to have exceptions in here.
Related
In my base.html template I have a link to a website that I would like displayed at the top of each page that extends it:
base.html
Results
Except for results.html, when I load that page I would like the link loaded as:
results.html
Home
I'm under the impression that the template language could solve my problem with an if statement:
if currentTemplate/urlRoute != results.html:
button = Results
else:
button = Home
Please help point me in the right direction to implement this if possible :)
Thanks :)
You can get current URL in template by using request.path. The request variable automatically gets passed into each template context if you use Django's RequestContext as recommended (you probably do, since it's the default way).
Then you can just do {% if "reports" in request.path %}......{% endif %}.
That said, a cleaner approach would be to put the link in your base.html in a {% block %} template tag, like this:
{% block top_link %}Results{% endblock %}
Then this URL will be the same in all the pages, and you will be able to override it in your reports page by just specifying another content for the block.
I have a template that looks something like:
Main Template, home.html:
{% extends "framed.html" %}
<h2> stuff <h2>
framed.html looks something like
{% block header %}
<h1>{{ sitename }}</h1>
{% endblock %}
Normally when I call these views I give it a context with a context containing a key "sitename" assigned get_current_site().name, which works fine.
I also, however, would like to use framed.html at the top of a bunch of templates that are also called by django default views. For example:
return HttpResponseRedirect(reverse('django.contrib.auth.views.login'))
The top of that page never gets the {{sitename}} to show up, so I end up with some blank space at the top of my page. The same goes for flat pages, logouts, etc. Is there a way I can get the relevant context added to all of these "built-in" pages?
You can write your own template context processor that will add required variable in the parameters provided to each template.
More details at Writing your own context processors
Is there any way to make global placeholder in my base template? I need it to be the same on every page (banners list).
How can I do that?
I usually create a page in my CMS that isn't published, but contains placeholders that I would like to use elsewhere (footer/headers) etc.
Make a new template extra_placeholders.html:
{% extends "base.html" %}
{% load cms_tags %}
{% block content %}
{% placeholder "Banner-List" %}
{% endblock %}
add it to your settings:
CMS_TEMPLATES = (
('my/path/extra_placeholders.html', 'Extra Placeholder Page'),
...
)
now go to the admin and create the placeholder with whatever plugin you want. Then go to you base template (*base.html probably) from which all your other pages inherit and add this wherever you want the placeholder to appear:
{% load cms_tags %}
...
{% show_placeholder "Banner-List" "extra_placeholders" %}
You can read more about it in the docs
EDIT
As #José L. Patiño has mentioned in the comments, this solution is only necessary for those using django-cms < 3.0. For the newer version you can simply use the static_placeholder template tag
There is the "static_placeholders" now, http://docs.django-cms.org/en/latest/reference/templatetags.html#static-placeholder
Sounds like it's what you needed way back when.
You can use the following ways to create a global palceholder for all pages.
create a place holder on the base page. {% Placeholder "footer"%}
make the contents of the placeholder through django cms as home page
then to display the same for each placeholder page, add {% show_placeholder "footer" "home"%}, this means displaying the newly created footer placeholder earlier from the home page,
This will display the entire contents existing footer placeholders on the home page of all pages that use the template.
but for the home page there will be two footer is displayed, to mengilangkannya, please do modifications to use CSS to hide the master placeholder.
We are using the #login_required decorator so that users see a login page if they try to access a url for which they need to be authenticated.
We want to show a 'cancel' button on the login page, which should return the user to whichever page they were on when they tried to access the url (by clicking a link etc - we don't need to deal with them manually entering the url).
At the moment our login.html looks for a request parameter 'login_cancel_url' and if present uses that (otherwise the home page).
However, this means we have to manually pass this parameter (set to the url of the current page) whenever we show a link or button that leads to an 'authentication required' url.
Is there a more elegant way to do this?
Thanks, Martin
Well you can try get the referrer header from the request but as far as I am aware, it's browser dependent and is not very reliable so the way you are doing it is probably best. You could try make life easier by creating template tags to avoid having to rewrite the return URL manually.
You are easily able to get the current URL from django's request object on any page, so instead of setting it manually on the link, you could write a snippet of html:
link_to_login.html
<!-- You should probably get /login/ using the {% url ... %} template tag -->
<a href="/login/?login_cancel_url={{ request.path|urlencode }}">
Login Page</a>
and use the {% include "link_to_login.html"%} template tag.
Alternatively, If the text needs to be different depending on the link you can instead create an inclusion template tag:
templatetags/extra_auth_tags.py
#register.inclusion_tag('templates/extra_auth_tags/login_link.html')
def login_link(context, text=None):
return {
'text':text
}
templates/extra_auth_tags/login_link.html
<!-- You should probably get /login/ using the {% url ... %} template tag -->
<a href="/login/?login_cancel_url={{ request.path|urlencode }}">
{% if text %}
{{ text }}
{% else %}
Some Default Text
{% endif %}
</a>
and then call it in your templates as {% login_link text="Check you messages" %}. Be aware that keyword arguments for inclusion tags are only supported in the django dev version so you might need to write the template tag by hand.
I have a base.html template that contains a list of links.
Example:
<div id="sidebar1">
<ul>
<li>Index</li>
<li>Stuff</li>
<li>About Me</li>
<li>Contact Me</li>
</div>
Then I have in my views.py a definition for each of index.html, stuff.html, about.html and contact.html. Each of those templates simply derive from a base.html template and set their own respective titles and contents.
My question is about the above /stuff I have a class="current".
I'd like to make the current page that I'm on have that class attribute.
I could set a different variable in each view like current_page="about" and then do a compare in the template with {% ifequal %} in each class element of each link , but that seems like duplicating work (because of the extra view variable).
Is there a better way? Maybe if there is a way to get the view function name that the template was filled from automatically I would not need to set the extra variable? Also it does seem like a lot of ifequals.
Here's an elegant way to do this, which I copied from somewhere and I only wish I could remember where, so I could give them the credit. 8-)
I assign an id to each of my pages (or all the pages within a section) like this:
In index.html: <body id='section-intro'>...
In faq.html: <body id='section-faq'>...
In download.html: <body id='section-download'>...
And then an id for the corresponding links:
<li id='nav-intro'>Introduction</li>
<li id='nav-faq'>FAQ</li>
<li id='nav-download'>Download</li>
And the in the CSS I set a rule like this:
#section-intro #nav-intro,
#section-faq #nav-faq,
#section-download #nav-download {
font-weight: bold;
/* And whatever other styles the current link should have. */
}
So this works in a mostly declarative way to control the style of the link that the current page belongs in. You can see it in action here: http://entrian.com/source-search/
It's a very clean and simple system once you've set it up, because:
You don't need to mess about with template markup in your links
You don't end up using big ugly switch statements or if / else / else statements
Adding pages to a section Just Works [TM]
Changing the way things look only ever means changing the CSS, not the markup.
I'm not using Django, but this system works anywhere. In your case, where you "set their own respective titles and contents" you also need to set the body id, and there's no other Django markup required.
This idea extends easily to other situations as well, eg. "I want a download link in the sidebar on every page except the download pages themselves." You can do that in CSS like this:
#section-download #sidebar #download-link {
display: none;
}
rather than having to put conditional template markup in the sidebar HTML.
Haven't used Django, but I've dealt with the same issue in Kohana (PHP) and Rails.
What I do in 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>
What I do in 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>
I see only a couple of ways of doing it, while avoiding repeated ifequals:
Javascript. Something along the lines of (jQuery):
var parts = window.location.pathname.split('/');
var page = parts[parts.length-1];
$('#sidebar1 a[href*=' + page + ']').addClass('current');
Change your views to contain a list of pages with their associated titles and URLs and create a {% for %} loop in your template, which will go through that list, and add a single {% ifequal %}.
Option 2 being the favorite from where I stand. If the logic for all of your pages is the same, and only the templates differ, you might consider using the FlatPages model for each of your pages. If the logic is different, and you need different models, you might consider using a menuing app of some sort. A shameless plug: I have a menuing app of my own
If you add the request context processor, it's pretty straightforward:
settings.py:
TEMPLATE_CONTEXT_PROCESSORS = (
'django.core.context_processors.request',
'django.contrib.auth.context_processors.auth' # admin app wants this too
)
Now you have access to the HttpRequest, which contains the request path. Highlighting the current page is a simple matter of checking if the path matches the link's destination, i.e., you're already there:
<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>