I would like to show the number of unreaded msgs in User Panel Box which will appear everytime when user is logged in.
How to pass the number of msg from controler to the user panel box which is included in base layout?
I can't use routes for that because the panel appears on all pages (index as well).
Now i'm sending it using global session but i think it could be done better. Any clues ?
Controler:
if(isset($_SESSION['user_id'])){
$unreaded=Model::factory('Message')->filter('getUnreadedGroups',$_SESSION['user_id']);
$_SESSION['unreaded']=$unreaded->opened;}
Base layout
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/style.css" />
<title>{% block page_title %} {% endblock %}</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.scripts.js"></script>
</head>
<body>
<div id="all">
<div id="top-container">
<div id="logo">test</div>
<div id="search-box"></div>
</div>
<div id="left-side">
<div class="menu">
<ul>
<li class="nav_dashboard active">Strona główna</li>
<li class="nav_graphs">Wzory</li>
<li class="nav_forms">Najnowsze</li>
<li class="nav_typography">Najlepiej oceniane</li>
</ul>
</div>
</div>
<div id="page">
{% block content %} {% endblock %}
</div>
<div id="right-side">
<div id="login-container">
{% if session.user_id is defined %}
{% include 'user_panel.php' %}
{% else %}
{% include 'login_form.php' %}
{% endif %}
</div>
</div>
</div>
</body>
</html>
User Panel Box
<div class="login-top" id="login-form-top">
<div id="welcome">Witaj, <span>John Doe</span></div>
<p id="last-login">Ostatnie logowanie:</p>
<div id="logout-msg-container">
<div class="logut">Wyloguj</div>
<a id="msg-number" href="/profil/wiadomosci">
<span class="number">
{% if session.unreaded >0 %}
{{ session.unreaded }}
{% else %} 0
{% endif %}
</span>
</a>
</div>
</div>
<div class="menu">
<p class="header">Profil użytkownika</p>
<ul>
<li>Twoje Dane</li>
<li>Twoje zbiory</li>
<li>Twoje wiadomości</li>
</ul>
</div>
Typical template
{% extends 'layout.php' %}
{% block page_title %}Najnowsze pliki{% endblock %}
{% block content %}
<div id="page-top">
<h1>Najnowsze</h1>
<p>+ <span class="blue">12</span> wzorów</p>
</div>
<div id="main-topvote">
<div class="title">Najnowsze<span>( ostatni tydzień )</span></div>
<div class="content">
{% for file in files %}
<p>{{ file.idFile }}<br/> {{ file.date_add }}<br/> {{ file.desc }}<br/> {{ file.title }}<br/><br/></p>
{% else %}
<p>There are currently no articles.</p>
{% endfor %}
</div>
</div>
{% endblock %}
I havent tested this ( https://github.com/fabpot/Twig/issues/293 ):
Base layout:
...
<div id="right-side">
{% block side %}
{% block side-login %}
{% if session.user_id is defined %}
{% include 'user_panel.php' %}
{% else %}
{% include 'login_form.php' %}
{% endif %}
{% endblock %}
{% endblock %}
</div>
...
Typical template:
...
{% block side %}
{% set count = 12 %}
{% block side-login %}
{{ parent() }}
{% endblock %}
{% endblock %}
...
So you can use {{count}} in your User Panel Box.
You can also try to skip the side-login block definition .. but i am not sure.
Related
It was working before I deleted and recreated my database, I have no idea why it's no longer working, I've ensured that show in menus is checked under the promote panel.
base.html
{% load static wagtailuserbar %}
{% load wagtailcore_tags %}
{% load menu_tags %}
<!DOCTYPE html>
<html class="no-js" lang="en" content="text/html">
<head>
<meta charset="utf-8" />
<title>
{% block title %}
{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
{% endblock %}
{% block title_suffix %}
{% with self.get_site.site_name as site_name %}
{% if site_name %}- {{ site_name }}{% endif %}
{% endwith %}
{% endblock %}
</title>
<meta name="description" content="text/html" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
{% load static wagtailsettings_tags %}
{% get_settings %}
</head>
<body class="{% block body_class %}{% endblock %}">
{% main_menu max_levels=2 add_sub_menus_inline=True %}
</body>
</html>
templates/menus/main/menu.html
{% load menu_tags %}
<nav class="navbar fixed-top navbar-dark navbar-expand-lg navbar-lg"
role="navigation">
<div class="container">
<a class="navbar-brand" href="/">Title</a>
<button type="button" class="navbar-toggler text-white" data-toggle="collapse" data-target="#navbar-collapse-01">
<i class="fas fa-bars fa-1x"></i>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav ml-auto text-white">
{% for item in menu_items %}
{% if item.sub_menu %}
<li class="nav-item dropdown {{item.active_class}}"><a class="nav-link dropdown-toggle" href="{{ item.href }}" data-toggle="dropdown">{{ item.text }}</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ item.href }}"><b>{{ item.text }}</b></a>
{% for sub_item in item.sub_menu.items %}
<a class="dropdown-item" href="{{ sub_item.href }}">{{ sub_item.text }}</a>
{% endfor %}
</div>
</li>
{% else %}
<li class="nav-item {{item.active_class}}"><a class="nav-link" href="{{ item.href }}">{{ item.text }}</a>
{% endif %}
{% endfor %}
<li class="nav-link"><i class="fas fa-search" title="Search"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
No errors in the console, nothing. Again, I've triple-checked to ensure my pages are checked with "show in menus". Where else can I look? I know for sure the menu itself is loading in because the search icon shows up.
I'm running Django=3.1.2, Wagtail=2.11.3, and WagtailMenus=3.0.2
I do not see the closing tags, </head>, </body> in your base.html. Have you added them?
Because you said you have recreated the database, have you add the pages to Wagtail menu? Wagtail admin > Settings > Main menu?
Try editing the pages in question and checking whether the “Show in menus” checkbox is checked (found under the “Promote” tab by default).1
Django 3.0.8
django-comments-xtd==2.6.2
I'm studyint this section of the tutorial:
https://django-comments-xtd.readthedocs.io/en/latest/tutorial.html#removal-suggestion
post_detail.html
{% extends "base.html" %}
{% load comments %}
{% load comments_xtd %}
{% block title %}{{ object.title }}{% endblock %}
{% block content %}
<div class="pb-3">
<h1 class="text-center">{{ object.title }}</h1>
<p class="small text-center">{{ object.publish|date:"l, j F Y" }}</p>
</div>
<div>
{{ object.body|linebreaks }}
</div>
{% get_comment_count for object as comment_count %}
<div class="py-4 text-center">
Back to the post list
⋅
{{ comment_count }} comment{{ comment_count|pluralize }}
ha{{ comment_count|pluralize:"s,ve" }} been posted.
</div>
{% if object.allow_comments %}
<div class="card card-block mb-5">
<div class="card-body">
<h4 class="card-title text-center pb-3">Post your comment</h4>
{% render_comment_form for object %}
</div>
</div>
{% endif %}
{% if comment_count %}
<ul class="media-list">
{% render_xtdcomment_tree for object allow_flagging allow_feedback %}
</ul>
{% endif %}
{% endblock %}
settings.py
COMMENTS_XTD_APP_MODEL_OPTIONS = {
'blog.post': {
'allow_flagging': True,
'allow_feedback': False,
'show_feedback': False,
}
}
Full code at Github: https://github.com/Kifsif/comments
Problem
I have loged in. But I can't see any flag at the right side of every comment’s header.
Could you give me a hint where the problem may be hiding?
I think you will have to import the font awesome stylesheet:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
doing a site and i need some help with the block tags. It seems that django doesn't render {% block home %} {%endblock home %}. Let's suppose in my block code i have this div and if i put the div inside my base.html as per below example it doesn't appear. It appears only when i put the source code inside the base.html, so is not including my tags. What should i do? PS i have the extended code in my block e.g. {% extends "base.html" %}
<div>
<H1>Aici trebuie adaugat restul</H1>
</div>
My base.html:
{% load staticfiles %}
<!--DOCTYPE html -->
<html>
<head>
<title>{% block head_title %}Advancing the Blog{% endblock head_title %}</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' >
<link rel='stylesheet' href='{% static "css/base.css" %}' />
<style>
{% block style %}{% endblock style %}
</style>
{% block head_extra %} {% endblock head_extra %}
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{% include "messages_display.html" %}
<div class='container'>
<ol class='breadcrumb'>
<li><a href='{% url "posts:list" %}'>Home</a></li>
{% block post_detail_link %}
{% endblock %}
<!-- {% block index %}
{% endblock %} -->
{% if not request.user.is_authenticated %}
<li class='pull-right'><a href='{% url "register" %}'>Register</a></li>
<li class='pull-right'><a href='{% url "login" %}'>Login</a></li>
{% else %}
<li class='pull-right'><a href='{% url "logout" %}'>Logout</a></li>
{% endif %}
</ol>
<div>
<H1>Aici trebuie adaugat restul</H1>
</div>
{% block home %} {%endblock home %}
{% block content %}{% endblock content %}
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content-markdown").each(function(){
var content = $(this).text()
var markedContent = marked(content)
$(this).html(markedContent)
})
$(".post-detail-item img").each(function(){
$(this).addClass("img-responsive");
})
var contentInput = $("#id_content");
function setContent(value){
var markedContent = marked(value)
$("#preview-content").html(markedContent)
$("#preview-content img").each(function(){
$(this).addClass("img-responsive")
})
}
setContent(contentInput.val())
contentInput.keyup(function(){
var newContent = $(this).val()
setContent(newContent)
})
var titleInput = $("#id_title");
function setTitle(value) {
$("#preview-title").text(value)
}
setTitle(titleInput.val())
titleInput.keyup(function(){
var newContent = $(this).val()
setTitle(newContent)
})
$(".comment-reply-btn").click(function(event){
event.preventDefault();
$(this).parent().next(".comment-reply").fadeToggle();
})
// preview-title
// preview-content
})
</script>
</body>
</html>
comment_thread.html
{% extends "base.html" %}
{% load urlify %}
{% load crispy_forms_tags %}
{% block head_title %}
{{ instance.title }} | {{ block.super }}
{% endblock head_title %}
<H1>TEST </H1>
{% block content %}
{{ object }}
<div class='col-sm-6 col-sm-offset-3'>
<p>{{ comment.content }}</p>
<footer>via {{ comment.user }} | {{ comment.timestamp|timesince }} ago | {% if comment.children.count > 0 %}{{ comment.children.count }} Comment{% if comment.children.count > 1 %}s{% endif %} {% endif %} {% if request.user == comment.user %}<a href='{{ comment.get_delete_url }}'>Delete</a> {% endif %}</footer>
<hr/>
<div>
{% for child_comment in comment.children %}
<blockquote>
<p>{{ child_comment.content }}</p>
<footer>via {{ child_comment.user }} | {{ child_comment.timestamp|timesince }} ago | {% if request.user == child_comment.user %}<a href='{{ child_comment.get_delete_url }}'>Delete</a>{% endif %}</footer>
</blockquote>
{% endfor %}
{% if request.user.is_authenticated %}
<form method="POST" action="."> {% csrf_token %}
{{ form|crispy }}
<input type='hidden' name='parent_id' value='{{ comment.id }}'>
<input type='submit' value='Reply' class='btn btn-default'>
</form>
{% else %}
<p>You must login to comment </p>
{% endif %}
</div>
<hr/>
</div>
{% endblock content %}
confirm_delete.html
{% extends "base.html" %}
{% load urlify %}
{% load crispy_forms_tags %}
{% block head_title %}
{{ instance.title }} | {{ block.super }}
{% endblock head_title %}
{% block content %}
<div class='col-sm-6 col-sm-offset-3'>
<h1>Confirm Delete</h1>
<form method="POST" action="."> {% csrf_token %}
<p>A re you sure you want to delete: "{{ object.content }}"?</p>
<input type='submit' value='Confirm' class='btn btn-warning'>
<a href='{{ object.get_absolute_url }}' class='btn btn-default'>Cancel</a>
</form>
</div>
<hr/>
</div>
{% endblock content %}
form.html
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<!-- {% block index_home %}
{% endblock %} -->
<div class='col-sm-6 col-sm-offset-3'>
<h1>{{ title }}</h1>
<hr/>
<form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %}
{{ form|crispy }}
<input type='submit' class='btn btn-default' value='{{ title }}' />
</form>
</div>
{% endblock content %}
messages_display.html
{% if messages %}
<div class='messages'>
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{% if "html_safe" in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}</li>
{% endfor %}
</ul>
</div>
{% endif %}
post_detail.html
{% extends "base.html" %}
{% load urlify %}
{% load crispy_forms_tags %}
{% block head_title %}
{{ instance.title }} | {{ block.super }}
{% endblock head_title %}
{% block post_detail_link %}
<li><a href='{{ instance.get_absolute_url }}'>{{ instance.title }}</a></li>
{% endblock %}
{% block content %}
<div class='col-sm-6 col-sm-offset-3'>
{% if instance.image %}
<img src='{{ instance.image.url }}' class='img-responsive' />
{% endif %}
<h1>{{ title }} <small>{% if instance.draft %}<span style='color:red;'>Draft</span> {% endif %}{{ instance.publish }}</small></h1>
<!-- {% if instance.read_time|time:"i" <= "01" %} < 1 minute {% else %}{{ instance.read_time|time:"i" }} minutes {% endif %} -->
<p>Read time: {% if instance.read_time <= 1 %} < 1 Minute {% else %}{{ instance.read_time }} minutes {% endif %}</p>
{% if instance.user.get_full_name %}
<p>Author: {{ instance.user.get_full_name }}</p>
{% endif %}
<p><div class="fb-like" data-href="{{ request.build_absolute_uri }}" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
<hr/>
</p>
<p>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}">
Facebook
</a>
<a href="https://twitter.com/home?status={{ instance.content|truncatechars:80|urlify }}%20{{ request.build_absolute_uri }}">
Twitter
</a>
<a href='https://plus.google.com/share?url={{ request.build_absolute_uri }}'>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ request.build_absolute_uri }}&title={{ instance.title }}&summary={{ share_string }}&source={{ request.build_absolute_uri }}">
Linkedin
</a>
Reddit
</p>
<div class='row'>
<div class='col-sm-12 '>
<div class='post-detail-item'>{{ instance.get_markdown }}</div>
<hr/>
<br/>
<div>
<p class='lead'>Comments</p>
{% if request.user.is_authenticated %}
<form method="POST" action="."> {% csrf_token %}
{{ comment_form|crispy }}
<input type='submit' value='Post comment' class='btn btn-default'>
</form>
{% else %}
<p>You must login to comment </p>
{% endif %}
<hr/>
{% for comment in comments %}
<blockquote>
<p>{{ comment.content }}</p>
<footer>via {{ comment.user }} | {{ comment.timestamp|timesince }} ago | {% if comment.children.count > 0 %}{{ comment.children.count }} Comment{% if comment.children.count > 1 %}s{% endif %} | {% endif %} <a class='comment-reply-btn' href='#'>Reply</a> | <a class='' href='{{ comment.get_absolute_url }}'>Thread</a></footer>
<div class='comment-reply'>
{% for child_comment in comment.children %}
<blockquote>
<p>{{ child_comment.content }}</p>
<footer>via {{ child_comment.user }} | {{ child_comment.timestamp|timesince }} ago</footer>
</blockquote>
{% endfor %}
{% if request.user.is_authenticated %}
<form method="POST" action="."> {% csrf_token %}
{{ comment_form|crispy }}
<input type='hidden' name='parent_id' value='{{ comment.id }}'>
<input type='submit' value='Reply' class='btn btn-default'>
</form>
{% else %}
<p>You must login to comment </p>
{% endif %}
</div>
</blockquote>
<hr/>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock content %}
post_form.html
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block head_extra %}
{{ form.media }}
{% endblock head_extra %}
{% block content %}
<div class='col-sm-6'>
<h1>Preview</h1>
<hr/>
<div class='content-preview'>
<h3 id='preview-title'></h3>
<p id='preview-content'></p>
</div>
</div>
<div class='col-sm-6'>
<h1>Form</h1>
<hr/>
<form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %}
{{ form|crispy }}
<input type='submit' class='btn btn-default' value='Create Post' />
</form>
</div>
{% endblock content %}
post_list.html
{% extends "base.html" %}
{% block content %}
<div class='col-sm-6 col-sm-offset-3'>
<h1>{{ title }}</h1>
<form method='GET' action='' class='row'>
<div class='col-sm-6'>
<div class='input-group'>
<input class='form-control' type='text' name='q' placeholder='Search posts' value='{{ request.GET.q }}'/>
<span class='input-group-btn'>
<!-- <input class='btn btn-default' type='submit' value='Search' /> -->
<button class='btn btn-default' type='submit'>Search <i class="fa fa-search"></i></button>
</span>
</div>
</div>
</form>
{% for obj in object_list %}
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
{% if obj.image %}
<img src='{{ obj.image.url }}' class='img-responsive' />
{% endif %}
<div class="caption post-detail-item">
{% if obj.draft %}<h3>Staff only: Draft</h3>{% endif %} {% if obj.publish > today %}<h3>Staff Only: Future Post</h3>{% endif %}
<h3><a href='{{ obj.get_absolute_url }}'>{{ obj.title }}</a> <small>{{ obj.publish }}</small></h3>
{% if obj.user.get_full_name %}<p>Author: {{ obj.user.get_full_name }}</p>{% endif %}
{{ obj.get_markdown|truncatechars_html:120 }}
<p>View</p>
</div>
</div>
</div>
<hr/>
</div>
{% endfor %}
<div class="pagination">
<span class="step-links">
{% if object_list.has_previous %}
previous
{% endif %}
<span class="current">
Page {{ object_list.number }} of {{ object_list.paginator.num_pages }}.
</span>
{% if object_list.has_next %}
next
{% endif %}
</span>
</div>
</div>
{% endblock content %}
Could you try having {% endblock home %} instead of {%endblock home %}. The lack of space can sometimes mess things up.
If this does not work, try simply have {% endblock %} instead.
Hope this helps!
Ok I know this question has been asked before, I looked at the answers and (think) I am doing exactly what is supposed to be done, but the search box is only appearing on the 'search' page and not any other page. I have a base.html that I use to extend to all other pages, can anyone help out on this? (FYI, I did try having the form in base.html instead of search.html but that did not work either)
Base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Search</title>
<link href="{% static 'css/bootstrap3.min.css' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="clearfix">
{% include 'navbar.html' %}
<h3 class="text-muted">My site</h3>
</header>
<hr>
{% block content %}{% endblock %}
<hr>
<footer>
<p class="text-muted">Copyright © 2015</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
Search.html
{% extends 'base.html' %}
{% load staticfiles %}
{% load widget_tweaks %}
{% block content %}
<h2>Search</h2>
<form method="get" action=".">
<div class="input-group">
{% render_field form.q class+="form-control" type="search" %}
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Search</button>
</span>
</div>
{% if query %}
<h3>Results</h3>
{% for result in page.object_list %}
<div class="media">
<div class="media-left">
<img class="media-object" height="100"
style="border: 1px solid #ccc;"
src="{{ result.object.photo.url }}">
</div>
<div class="media-body">
<h4 class="media-heading">Supplier Part Code: <strong>{{ result.object.supplier_code }}</strong></h4>
<h4>Mfr Code: <strong>{{ result.object.part.code }}</strong></h4>
<p>
<strong>Supplier</strong> {{ result.object.supplier.name }}
<strong>Price</strong> {{ result.object.price }}
<strong>Sale Price</strong> {{ result.object.sale_price }}
<strong>Available</strong> {{ result.object.quantity }}
Buy Now!
</p>
</div>
</div>
{% empty %}
<p>No results found.</p>
{% endfor %}
{% if page.has_previous or page.has_next %}
<div>
{% if page.has_previous %}{% endif %}« Previous{% if page.has_previous %}{% endif %}
|
{% if page.has_next %}{% endif %}Next »{% if page.has_next %}{% endif %}
</div>
{% endif %}
{% else %}
{# Show some example queries to run, maybe query syntax, something else? #}
{% endif %}
</form>
{% endblock %}
Manuals.html (No Search bar displays)
{% extends 'base.html' %}
{% load staticfiles %}
{% block content%}
<h1>Hello and welcome to Manuals</h1>
{% endblock %}
URL patterns
url(r'^search/', include('haystack.urls')),
url(r'^manuals/$', 'mysite.views.manuals', name='manuals'),
Can someone please help me figure out a way to achieve the following (see snippets below) in Django templates? I know that you cannot use more than one extends, but I am new to django and I do not know the proper syntax for something like this. I want to be able to do this so that I can use my nested div layout for css reasons without having to type it like that each time and risking a typo. In words, I want to be able to have a page template extend my base.html file and then use html snippets of dynamic template content (i.e. template for loops or other template logic devices, not just a context variable I set from my view controller).
edit:
I want to be able to display arbitrary content in an arbitrary fashion in each column. For example I would like to be able to display a ul of images in one column and then on the same page show another set of columns displaying a table of data. Here is an example that I typed out:
example of alot of random columns
I realize that the example picture has all text generated from the django web tester output but each coulmn should be able to have random content. And they should be nestable. Is this possible with the default django template language?
------------------------------------------------------------
base.html
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>{% block title %}Title{% endblock %}</title>
</head>
<body>
<div class="wrapper">
<div class="header">
This is the common header
</div>
<div class="nav">
This is the common nav
</div>
{% if messages %}
<div class="messages">
<ul>
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="content">
{% block content %}Page Content{% endblock %}
</div>
<div class="footer">
This is the common footer
</div>
</div>
</body>
</html>
------------------------------------------------------------
columnlayout2.html
------------------------------------------------------------
<div class="twocol container2">
<div class="container1">
<div class="col1">
{% block twocol_col1 %}{% endblock %}
</div>
<div class="col2">
{% block twocol_col2 %}{% endblock %}
</div>
</div>
</div>
------------------------------------------------------------
columnlayout3.html
------------------------------------------------------------
<div class="threecol container3">
<div class="container2">
<div class="container1">
<div class="col1">
{% block threecol_col1 %}{% endblock %}
</div>
<div class="col2">
{% block threecol_col2 %}{% endblock %}
</div>
<div class="col3">
{% block threecol_col3 %}{% endblock %}
</div>
</div>
</div>
</div>
------------------------------------------------------------
page.html
------------------------------------------------------------
{% extends "base.html" %}
{% block content %}
{% extends "columnlayout2.html" %}
{% block twocol_col1 %}twocolumn column 1{% endblock %}
{% block twocol_col2 %}twocolumn column 2{% endblock %}
{% extends "columnlayout3.html" %}
{% block threecol_col1 %}threecol column 1{% endblock %}
{% block threecol_col2 %}threecol column 2{% endblock %}
{% block threecol_col3 %}threecol column 3{% endblock %}
{% endblock %}
------------------------------------------------------------
page.html output
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Title</title>
</head>
<body>
<div class="wrapper">
<div class="header">
This is the common header
</div>
<div class="nav">
This is the common nav
</div>
<div class="content">
<div class="twocol container2">
<div class="container1">
<div class="col1">
twocolumn column 1
</div>
<div class="col2">
twocolumn column 2
</div>
</div>
</div>
<div class="threecol container3">
<div class="container2">
<div class="container1">
<div class="col1">
threecol column 1
</div>
<div class="col2">
threecol column 2
</div>
<div class="col3">
threecol column 3
</div>
</div>
</div>
</div>
</div>
<div class="footer">
This is the common footer
</div>
</div>
</body>
</html>
I agree with Daniel, inclusion tags are probably what you're after and I think you are misunderstanding them and {% extends %}.
If your content is static or in the context, you can use {% include %} blocks like
{% block content %}
{% include "columnlayout2.html" %}
{% include "columnlayout3.html" %}
{% endblock %}
so you could store the content you want in something like {{ two_columns }} and {{ three_columns }} and render
------------------------------------------------------------
columnlayout2.html
------------------------------------------------------------
<div class="twocol container2">
<div class="container1">
<div class="col1">
{{ two_columns[0] }}
</div>
<div class="col2">
{{ two_columns[1] }}
</div>
</div>
</div>
Or you can use inclusion tags inside page.html
EDIT
Moderator needs to render HTML with a different structure (not just content) on different pages, so you can do something like "nesting" inclusion tag calls.
{% block content %}
{% show_two_columns two_columns %}
{% show_three_columns three_columns %}
{% endblock %}
templatetag
#register.inclusion_tag("columns/two_columns.html")
def show_two_columns(columns):
return {'columns': columns}
two_columns.html
<div class="twocol container2">
<div class="container1">
<div class="col1">
{% render_column columns[0] %}
</div>
<div class="col2">
{% render_column columns[1] %}
</div>
</div>
</div>
and then you can do whatever logic you need to change what you want to show in the render_column inclusion tag and the template it uses. I wish I could say more but it's pretty specific to what the column content depends on and how different it is in each case.