I'm building a website using django with a header on top of every page, which basically is a menu with a few links, constant throughout the pages.
However, depending on the page you're on I'd like to highlight the corresponding link on the menu by adding the class "active". To do so, I am currently doing as follow: each page has a full menu block that integrates within a general layout, which does NOT contain the menu. For exemple, page2 would look like this:
{% extends "layout.html" %}
{% block menu %}
<li>Home</li>
<li>page1</li>
<li class="active">page2</li>
<li>page3</li>
{% endblock %}
The problem is that, beside from that solution being not so pretty, every time I want to add a link to the header menu I have to modify each and every page I have. Since this is far from optimal, I was wondering if any of you would know about a better way of doing so.
Thanks in advance!
You can create a custom templatetag:
from django import template
from django.core.urlresolvers import reverse, NoReverseMatch, resolve
register = template.Library()
#register.simple_tag
def active(request, view_name):
url = resolve(request.path)
if url.view_name == view_name:
return 'active'
try:
uri = reverse(view_name)
except NoReverseMatch:
uri = view_name
if request.path.startswith(uri):
return 'active'
return ''
And use it in the template to recognize which page is loaded by URL
<li class="{% active request 'car_edit' %}">Edit</li>
If you have a "page" object at every view, you could compare a navigation item's slug to the object's slug
navigation.html
<ul>
{% for page in navigation %}
<li{% ifequal object.slug page.slug %} class="active"{% endifequal %}>
{{ page.title }}
</li>
{% endfor %}
</ul>
base.html
<html>
<head />
<body>
{% include "navigation.html" %}
{% block content %}
Welcome Earthling.
{% endblock %}
</body>
</html>
page.html
{% extends "base.html" %}
{% block content %}
{{ object }}
{% endblock %}
Where navigation is perhaps a context_processor variable holding all the pages, and object is the current PageDetailView object variable
Disclaimer
There are many solutions for your problem as noted by Paulo. Of course this solution assumes that every view holds a page object, a concept usually implemented by a CMS. If you have views that do not derive from the Page app you would have to inject page pretenders within the navigation (atleast holding a get_absolute_url and title attribute).
This might be a very nice learning experience, but you'll probably save loads time installing feinCMS or django-cms which both define an ApplicationContent principle also.
You may use the include tag and pass it a value which is the current page.
For example, this may be a separate file for declaring the menu template only:
menu.html
{% if active = "a" %}
<li>Home</li>
{% if active = "b" %}
<li>page1</li>
{% if active = "c" %}
<li class="active">page2</li>
{% if active = "d" %}
<li>page3</li>
And call this from within your template like this:
{% include 'path/to/menu.html' with active="b"%} # or a or c or d.
Hope it helps!
Related
I have started building a django project from the tutorial at https://docs.djangoproject.com/en/2.1/intro/tutorial01/
After finishing the base tutorial which creates a project with one app called "polls" I wanted to build a sort of home page that can hold many apps together. For this reason I built an app called "news" and now I'm looking at ways to compose the two apps together.
So far I'm doing so in the main 'news' template, which is called 'news/base.html' and I'm including the different apps in the code.
This is my 'news/base.html' file:
{% include 'news/index.html' %}
{% include polls_template %}
{% include 'news/footer.html' %}
The two templates 'news/index.html' and 'news/footer.html' are just html pages with no arguments, just for testing and they work fine.
The polls_template variable instead is a template variable that I create in the news.views.base function and pass to the template in the context.
This is the view snippet that does this:
def base(request):
t = loader.get_template('polls/index.html')
return render(request, 'news/base.html', {'polls_template': t})
The template is showing just fine but it shows an empty poll since there is no argument. Now my problem is that I cannot find a way to pass a context variable to this template object in order to fill it's fields.
I tried to do something like:
{% include polls_template with context=polls_context %}
But it does not work.
Ideally I would like a way to do all of that in the view because this would allow me to build the apps separately and then just use one view to gather them all and pass them to a template. Thanks in advance for any help!
Possible duplicate of Django - two views, one page (disregard the references to Ajax.) One quick note: I see what you are trying to do, but you should understand that render() is a shortcut that includes both the template loading and the HttpResponse(). You don't need to call loader() if you are using render(). Another problem with your function, you've included the template within the context dict. Please read the linked post b/c there are a number of different approaches but for the sake of completeness, here's one way to approach what you are trying to do. First, typically you'd create a 'base.html' file that would be the container for your content, it would include header, footer and possibly the messaging templates. You could then extend the base.html and include other templates.
'base.html'
<!doctype html>
<html lang="en">
<head>
{% include 'header.html' %}
<body>
{% include 'news.html' %}
{% block content %}
//to be replaced by index/polls content that extends this template//
{% endblock %}
</body>
{% include 'footer.html' %}
</html>
'index.html'
{% extends 'base.html' %}
{% block content %}
<ul>
{% for question in questions%}
<li> {{question}}</li>
{% endfor %}
</ul>
{% endblock %}
'news.html'
<ul>
{% for article in news %}
<li> {{article}}</li>
{% endfor %}
</ul>
And then your function
def index(request):
polls_questions = Question.objects.all()
newest_articles = Articles.objects.filter(post=OuterRef('pk')).order_by('-created_at')
return render(request, 'index.html', {'questions' : polls_questions, 'news': newest_articles})
I'm building a site using Django Wagtail and am having trouble figuring out how to add a sidebar menu that will list all the child pages of the parent index page. For example, I have a standard_index_page.html that I created a parent page with in Admin, then I added child pages of that using standard_page.html template.
In my standard_index_page.html template, I have the following code
{% standard_index_listing calling_page=self %}
and it displays all the child pages with links, but I would also like to display a list of all the child links on the child pages as well.
I hope this is making sense and someone can lend a hand. Thank you.
In essence you traverse the tree structure of your page hierarchy that is provided to Wagtail by Django-Treebeard.
Many front-end frameworks do not allow for multiple levels of menus as some consider it outside of best practices. However, with a library such as SmartMenus you can display this structure with a little elbow grease.
For my needs, there was no easy solution to this. So, while I want to share an example of how I went about this, it may be missing explanation. If you have any questions, I'd be happy to answer them.
I struggled with this for awhile and while there may be easier methods to traverse the tree, I built the following method as my needs expanded. It allows us to traverse all live pages in our site, check when the current page is being rendered in the menu, and allows for fine-grained control over rendering.
Here's what we're going to do:
Create a few template tags that will get the site root of the
current site, loop through direct children of the site root, and loop through any lower levels of children, while looping through children of the current menuitem when discovered at each level.
In your base template, this means we need to:
{% load demo_tags %} to import our custom template tags
Call {% top_menu calling_page=self %} to get and render all
direct children of the site root. These are items that would be shown across a standard menu bar.
Call {% top_menu_children parent=menuitem %} within the template
rendered by {% top_menu %} to get and render all second- and
lower-level children pages. This encompasses all menu items to be shown when hovering on the parents menu item.
Here's the custom demo_tags.py file I created to traverse all levels of the page hierarchy. The beauty of this is that it does not require any custom context data to be supplied; it works out of the box with Wagtail!
#register.assignment_tag(takes_context=True)
def get_site_root(context):
'''
Returns a core.Page, not the implementation-specific model used
so object-comparison to self will return false as objects would differ
'''
return context['request'].site.root_page
def has_menu_children(page):
'''
Returns boolean of whether children pages exist to the page supplied
'''
return page.get_children().live().in_menu().exists()
#register.inclusion_tag('info_site/tags/top_menu.html', takes_context=True)
def top_menu(context, parent, calling_page=None):
'''
Retrieves the top menu items - the immediate children of the parent page
The has_menu_children method is necessary in many cases. For example, a bootstrap menu requires
a dropdown class to be applied to a parent
'''
root = get_site_root(context)
try:
is_root_page = (root.id == calling_page.id)
except:
is_root_page = False
menuitems = parent.get_children().filter(
live=True,
show_in_menus=True
).order_by('title')
for menuitem in menuitems:
menuitem.show_dropdown = has_menu_children(menuitem)
return {
'calling_page': calling_page,
'menuitems': menuitems,
'is_root_page':is_root_page,
# required by the pageurl tag that we want to use within this template
'request': context['request'],
}
#register.inclusion_tag('my_site/tags/top_menu_children.html', takes_context=True)
def top_menu_children(context, parent, sub=False, level=0):
''' Retrieves the children of the top menu items for the drop downs '''
menuitems_children = parent.get_children().order_by('title')
menuitems_children = menuitems_children.live().in_menu()
for menuitem in menuitems_children:
menuitem.show_dropdown = has_menu_children(menuitem)
levelstr= "".join('a' for i in range(level)) # for indentation
level += 1
return {
'parent': parent,
'menuitems_children': menuitems_children,
'sub': sub,
'level':level,
'levelstr':levelstr,
# required by the pageurl tag that we want to use within this template
'request': context['request'],
}
In essence, there are three levels of pages rendered:
The site root is called by {% get_site_root %}
First-level children are called by {% top_menu %}
Second- and lower-level children are called by {% top_menu_children %}, which is called any time a page shown in the menu has children while rendering this tag.
In order to do this, we need to create the templates to be rendered by our top_menu and top_menu_children template tags.
Please note - these all are built for Bootstrap 3's navbar class and customized for my needs. Just customize these for your needs. The whole menu building process is called by {% top_menu_children %}, so place this tag in your base template where you want the menus rendered. Change top_menu.html to reflect the overall structure of the menu and how to render each menuitem. Change children_items.html to reflect how you want children of all top-menu items, at any depth, rendered.
my_site/tags/top_menu.html
{% load demo_tags wagtailcore_tags static %}
{% get_site_root as site_root %}
{# FOR TOP-LEVEL CHILDREN OF SITE ROOT; In a nav or sidebar, these are the menu items we'd generally show before hovering. #}
<div class="container">
<div class="collapse navbar-collapse" id="navbar-collapse-3">
<ul class="nav navbar-nav navbar-left">
{% for menuitem in menuitems %}
<li class="{% if menuitem.active %}active{% endif %}">
{% if menuitem.show_dropdown %}
<a href="{{ menuitem.url }}">{{ menuitem.title }}
<span class="hidden-lg hidden-md hidden-sm visible-xs-inline">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
</a>
{% top_menu_children parent=menuitem %}
{% else %}
{{ menuitem.title }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
my_site/tags/children_items.html
{% load demo_tags wagtailcore_tags %}
{# For second- and lower-level decendents of site root; These are items not shown prior to hovering on their parent menuitem, hence the separate templates (and template tags) #}
<ul class="dropdown-menu">
{% for child in menuitems_children %}
{% if child.show_dropdown %}
<li>
<a href="{% pageurl child %}">
{% for i in levelstr %}  {% endfor %}
{{ child.title }}
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
{# On the next line, we're calling the same template tag we're rendering. We only do this when there are child pages of the menu item being rendered. #}
{% top_menu_children parent=child sub=True level=level %}
{# ^^^^ SmartMenus is made to render menus with as many levels as we like. Bootstrap considers this outside of best practices and, with version 3, has deprecated the ability to do so. Best practices are made to be broken, right :] #}
</li>
{% else %}
<li>
<a href="{% pageurl child %}">
<!-- Allows for indentation based on depth of page in the site structure -->
{% for i in levelstr %}  {% endfor %}
{{ child.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
Now, in your base level template (let's assume you are using one; if not, get to it :) ) you can traverse the menu while keeping clutter cleared away to the templates used by your inclusion_tags.
my_site/base.html
<ul class="nav navbar-nav navbar-left">
{% for menuitem in menuitems %}
<li class="{% if menuitem.active %}active{% endif %}">
{% if menuitem.show_dropdown %}
<a href="{{ menuitem.url }}">{{ menuitem.title }}
<span class="hidden-lg hidden-md hidden-sm visible-xs-inline">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
</a>
{% top_menu_children parent=menuitem %}
{% else %}
{{ menuitem.title }}
{% endif %}
</li>
{% endfor %}
</ul>
I wrote a blog post about this - check it out for more details. Or, head over to Thermaline.com to see it in action, though I think there's not multiple levels of depth right now. IF THERE WERE, they'd be rendered automatically :)
Now, this example is for a navbar, but it could easily be adapted for a sidebar.
All you need to do is:
Include demo_tags in your base template
Call {% top_menu %} where you wish to render your menus.
Customize top_menu.html and children_items.html to render the
first and then all subsequent levels of pages.
Shout out to Tivix for their post on two-level menus that was a great starting point for me!
I am pretty new to Flask/Flask-Admin.
I have followed the tutorial on flask admin and managed to get the admin panel working but slightly lost on how to get the below things implemented.
https://github.com/flask-admin/flask-admin/tree/master/examples/auth
When logged in as a normal user I can only see "home" page.
How can I expose other views to "normal user" and restrict actions such as read only etc.
I have created a "baseview" which is not associated with any other models as below:
class SitesView(MyBaseView):
#expose('/')
def index(self):
return self.render('views/testviews.html')
admin.add_view(SitesView(name='Test views', endpoint='test views'))
and html as below:
{% extends 'admin/master.html' %}
{% block body %}
{{ super() }}
{% if current_user.has_role('view1') %}
Site1
{% endif %}
{% if current_user.has_role('view2') %}
<a>Site2</a>
{% endif %}
{% if current_user.has_role('view3') %}
<a>Site3</a>
{% endif %}
{% if current_user.has_role('view4') %}
<a>Site4</a>
{% endif %}
{% endblock %}
This gives me a new tab with different views with works as expected.
What I am trying to achieve here is when user click the Site1 link they go to Site1 page within flask-admin interface but I am not sure how to do that. I could create a new route for this but the problem is I can't(don't know how to) extend flask admin template.
For example this works but it redirect the page outside flask-admin template:
#app.route('/views/')
def views():
return render_template('views/views1.html')
and modified the templates>admin>index.html page with below:
<ul class="lead text-center list-group">
{% if current_user.has_role('view1') %}
<li class="list-group-item">View1</li>
{% endif %}
{% if current_user.has_role('view2') %}
<li class="list-group-item">View2</li>
{% endif %}
{% if current_user.has_role('view3') %}
<li class="list-group-item">View3</li>
{% endif %}
{% if current_user.has_role('view4') %}
<li class="list-group-item">View4</li>
{% endif %}
</ul
I want to build the whole web site using flask admin so that I can keep user experience consistence. Am I doing this the wrong way?
Thanks for your time.
Please do let me know if you want me to provide more information on this issue.
Kind Regards.
So after going through documentations and tutorials I have found the solution to my issue.
For my first question:
When logged in as a normal user I can only see "home" page. How can I
expose other views to "normal user" and restrict actions such as read
only etc.
We can do this by overwriting our view functions is_accessible method as below:
def is_accessible(self):
if not current_user.is_active or not current_user.is_authenticated:
return False
if current_user.has_role('superuser') or current_user.has_role('user') or current_user.has_role('view1'):
return True
return False
For my second question we just need to give the endpoint as for our BaseView as below:
class MyView(BaseView):
#expose('/')
def index(self):
return self.render('views.html')
admin.add_view(MyView(name='Custom Views', endpoint='customviews'))
And then in your jinja template you need to call it:
href="{{ url_for('customviews.index') }}
Just one thing to note, doing this:
current_user.has_role('superuser') or current_user.has_role('user') or current_user.has_role('view1')
could get quite messy if we have so many roles, not sure how we would approach this but hoping this will help someone.
Thanks all.
I know this is an old question, but for the following code
current_user.has_role('superuser') or current_user.has_role('user') or current_user.has_role('view1')
What I like to do is having a hybrid_property (available on both Peewee and SQLAlchemy) inside my User class that consolidates these properties. So it'd look something like this:
#hybrid_property
def user_has_administrative_rights(self):
return self.has_role('superuser') or self.has_role('user')
I am looking for the solution. I think a lot of different examples have confused me a little. I want to override the object-tools template in the Django admin.
I have one button on my model's tools:
I need one other same type of button "Upload file". This should redirect me to the another view which I want to design myself in the same admin base template (with just one upload file control).
[A]
Move "django.contrib.admin" in your INSTALLED_APPS to end of INSTALLED_APPS.
You can make template file
<your_app>/templates/admin/<your_app>/<your_model>/change_list.html
source code:
{% extends "admin/change_list.html" %}
{% block object-tools-items %}
<li>
<a href="<your-action-url>" class="addlink">
Upload file
</a>
</li>
{{ block.super }}
{% endblock %}
[B]
Add change_list_template into your ModelAdmin.
class MyModelAdmin(admin.ModelAdmin):
change_list_template = '<path-to-my-template>.html'
And write template like [A] source code.
It has become lot easier to accomplish what you're looking for since this question has been asked the first time.
The Django documentation has a section on how to override admin templates. To add a button to the changelist object tools, follow these steps:
Copy Django's version of the change_list_object_tools.html template file into your project's or app's template folder: templates/admin/<app>/<model>/change_list_object_tools.html.
You can obtain the file form your virtual env's site-packages folder:
cp $VIRTUAL_ENV/lib/python3.8/site-packages/django/contrib/admin/templates/admin/change_list_tools.html templates/admin/$APP/$MODEL/
Note that you might need to adjust the path to site-packages for your Python version.
Now open the template file. It will look liek this:
{% load i18n admin_urls %}
{% block object-tools-items %}
{% if has_add_permission %}
<li>
{% url cl.opts|admin_urlname:'add' as add_url %}
<a href="{% add_preserved_filters add_url is_popup to_field %}" class="addlink">
{% blocktrans with cl.opts.verbose_name as name %}Add {{ name }}{% endblocktrans %}
</a>
</li>
{% endif %}
{% endblock %}
Add the link to your custom view:
…
{% if has_add_permission %}
<li><a class="addlink" href="{% url 'upload-file' %}">Upload file</a></li>
<li>
…
That's it! If you didn't know: you can add custom views and URLs to a ModelAdmin using ModelAdmin.get_urls() (docs). To not have to hardcode your custom admin URLs, you can of course reverse them (docs).
You can try to use https://github.com/texastribune/django-object-actions.
This will allow you to add buttons with custom logic. Though, I'm not sure whether you'll be able to a buttom for your list screen, as I did it only for a model-edit page.
I'm working on a site where the footer content is shared across all pages. What is the best way to do in Django-CMS?
I tried using show_placeholder tag, but it somehow didn't work. A little more details on what I did:
First, I have a {% placeholder footer_info %} in base.html. Then I add a page called "Home" (template homepage.html) in django admin and put some text under footer_info as a Text plugin. As the accepted answer in this question suggested (http://stackoverflow.com/questions/3616745/how-to-render-django-cms-plugin-in-every-page),
I add
{% placeholder footer_info or %}
{% show_placeholder footer_info "Home" %}
{% endplaceholder %}
In a template called services.html which I used as the template for page Services.
However, the content in home page is not showing up in services page. I also tried adding an id home_cms_page to home page in the Advanced option area, so that I can reference it in services.html like this:
{% placeholder footer_info or %}
{% show_placeholder footer_info "home_cms_page" %}
{% endplaceholder %}
But the content is still not showing up.
Could anyone tell me what I am doing wrong? And is this the best way of getting some content from a page across all other pages (and I have to add show_placeholder in every other page)?
Thank you
EDIT:
It is not a multilingual site. I commented out 'cms.middleware.multilingual.MultilingualURLMiddleware', because the only language I use on the site is English.
I have this in my base.html:
{% load cms_tags sekizai_tags %}
<!-- all the rest of the HTML markups -->
<div class="span4">
{% placeholder footer_info %}
</div>
Then I added a page in the admin called "Home" with a Text plugin and an id of "home_cms_page".
The following is in my services.html:
{% extends "base.html" %}
{% load cms_tags %}
{% block base_content %}
{% placeholder services_info %}
{% endblock base_content %}
{% block page_content %}
Home page
{% endblock page_content %}
{% placeholder "footer_info" or %}
{% show_placeholder "footer_info" "home_cms_page" %}
{% endplaceholder %}
Read the documentation:
If you know the exact page you are referring to, it is a good idea to
use a reverse_id (a string used to uniquely name a page) rather than a
hard-coded numeric ID in your template. For example, you might have a
help page that you want to link to or display parts of on all pages.
To do this, you would first open the help page in the admin interface
and enter an ID (such as help) under the ‘Advanced’ tab of the form.
Then you could use that reverse_id with the appropriate templatetags:
{% show_placeholder "right-column" "help" %}
I added "index" in the advanced options of the index page, and added {% show_placeholder "banner" "index" %} in the base template. It all works.