I am currently trying to build a website with python django. At the moment I am making a dashboard for the website. On the dashboard I want to show three tiles for different menu options. Dashboard
Ignore the content this is just a placeholder for now. As you can see in every part of the dashboard the navbar is included. My code for the dashboard looks like following:
{% extends 'base.html' %}
{% block titel %}Dashboard{% endblock %}
{% block content%}
<div class="container-fluid">
<h1 class="fw-bold">Dashboard</h1>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body" >
{% include 'todolist/index.html' %}
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
{% include 'todolist/index.html' %}
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
{% include 'todolist/index.html' %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
The base for all the sites are in a extra file called base.html. In this file is also the navbar defined.
How can I prevent that the navbar will be in every part of the dashboard while still using the extends part?
You can put the navbar section in another template rather than having it in the base template. This way you can decide when to use it separetely than the base template.
Related
I am not sure whether I should use broker apı keys or trading apı keys. I tried both of them but none of them worked. I put two photos one of them is api.py and the other one is my home page. The code that is at below is in a template folder in home.html
{% block content %}
{% if user.is_authenticated %}
<div class="text-center" style="padding-top:100px">
<h3>Welcome <b>{{ user.get_username }}</b> to SINO</h3>
</div>
<div class="text-align:left">
<h3>You are connected with Alpaca :)</h3>
</div>
<div class="text-align:left">
<b>Account ID:</b> {{Alaccount.id}}
</div>
</div>
<div class="text-align:left">
<b>Account Number:</b> {{Alaccount.account_number}}
</div>
</div>
<div class="text-align:left">
<b>Equity:</b> {{Alaccount.equity}}
</div>
<div class="text-align:left">
<b>Number of shares:</b> {{alpaccount.position.qty}}
</div>
</div>
</div>
[enter image description here][1]{% else %}
I wanted to do something simmilar to this suing django. but somehow i it doesn't work. how do i fix it?
for statik in statistik{
print(statik*total/100)
}
Is there any documentation regarding what I'm trying to implement to my django app? Thank you
Here's the HTML :
{% if statistics %}
{% for statik in statistics|slice:":4" %}
<div class="mb-3">
<div class="small text-gray-500">{{ statik.name }}
<div class="small float-right"><b>{{ statik.voters }} of {{ total }} Voters</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-success" role="progressbar" style="width: {{ statik.voters * total/100 }}%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
{% endfor %}
{% else %} <p>END TABLE</p>
{% endif %}
It is recommended you do calculations of any sort in view and pass it in context.
If you still want to go this route there are no math template tags except add included so you should create custom template tags or use django-mathfilters
I've been trying to use the Django inline formset with the bootstrap-select plugin from here https://developer.snapappointments.com/bootstrap-select/ and every other thing works perfectly, I'm able to successfully call the plugin on another two selects that I have in my form and I'm using the inline formset to add new authors on my book. When i put the "selectpicker" class, it only works once, when the page is loaded, but when I press the button to add more authors, the select field is not loaded.
So I have a question... can I use the two together? If yes, how? If not, is there any workaround to be able to search in a selection field?
Bellow is a image to how my form looks when i press the big green "Add" button at the end of the form.
You can see that there is only two fields, one less than the first one.
If any code is needed, please let me know and i will add right away.
Thanks!
EDIT:
Here are my codes, as asked by Chris:
My template:
{% extends 'base.html' %}
{% load widget_tweaks %}
{% block content %}
{% load static %}
<form method="POST" class="form" action="">
{% csrf_token %}
[other fields]
...
<!-- HERE I HAVE MY TWO OTHER SELECT FIELDS WHICH WORK PERFECTLY -->
<div class="container">
<div class="col-sm-12">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label>Editora do Livro:</label>
{{ form.editora_cod_editora|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
</div>
<div class="col-sm-6">
<label>Categoria do Livro:</label>
{{form.categoria_cod_categoria|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
</div>
</div>
</div>
</div>
</div>
<!-- HERE START MY ONLINE FORM, AS SHOWS THE PRINT -->
<div class="container">
<div class="col-sm-12">
<hr>
<h4>Adicionar Autor</h4>
<hr>
<div class="form-group bg-light rounded ">
{{ autor_livro.management_form }}
{% for form in autor_livro.forms %}
<div class="{% cycle 'row1' 'row2' %} formset_row m-5 inline-form">
{{ form.autor_cod_autor|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
{{ form.ordinal_autorlivro|add_class:"form-control" }}
{{ form.autor_funcao|add_class:"form-control" }}
</div>
{% endfor %}
</div>
</div>
<div class="container">
<div class="col-sm-12">
<div class="form-group">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4">
<button type="submit" class="btn-outline-primary btn float-right">Salvar</button>
</div>
</div>
</div>
</div>
</div>
</form>
{% block scripts %}
<!-- HERE I HAVE MY SCRIPT THAT MAKES THE INLINE FORM WORK WITH THAT PLUGIN -->
<script src="{% static 'js/jquery.formset.js' %}"></script>
<script type="text/javascript">
$('.formset_row').formset({
addText: 'Adicionar Autor',
deleteText: 'Remover',
prefix: 'autorlivro_set'
});
</script>
{% endblock %}
{% endblock %}
The answer is the behaviour of the bootstrap-select plugin. You are activating it by using the class "selectpicker". After loading the page some javascript magic takes the elements with the class selectpicker and creates the widget you see. The "select" you now see is not your original <select> but an auxillary widget, your <select> is still there but hidden from your view.
Now when you add another form the javascript magic is not called again, so that you get a new form where your <select> is hidden somewhere from the user's eyes.
In order to get it rendered nicely again you need to run the required javascript after you have added a new form. django-dynamic-formset provides an option called added allowing you define a function which is called after the new form has been added. Form more details see the formset options here.
So define the function and call it after adding a form. In your case your script could look like this:
<script type="text/javascript">
var activate_select = function(row){
row.find('.selectpicker').selectpicker();
};
$('.formset_row').formset({
addText: 'Adicionar Autor',
deleteText: 'Remover',
prefix: 'autorlivro_set,
added: activate_select
});
</script>
I have a djangocms based website and now I would like to have an app which will help with a small blog section.
Now, I have successfully integrate djangocms-blog in my website, but when I am trying to see a post, the template (a custom template made by me) is not rendered and the post (made from blog admin) is just thrown on the page.
Can anybody help me out with this issue ? Would you like any additional info in order to help me out with this ?
My template looks like this:
{% extends "base.html" %}
{% load cms_tags %}
{% block title %}{% page_attribute "page_title" %}{% endblock title %}
{% block content %}
<div class="spacer"></div>
<div class="page-header page-header-blog-post-1 white">
<div class="page-header-container container">
<div class="page-header-content">
<h1 class="heading">BLOG</h1>
</div>
</div>
</div>
<div class="blog-container blog-single container">
<div class="row">
<div class="col-md-8 blog-content margin-bottom-70 clearfix">
{% placeholder banner_leaderboard_top %}
</div>
</div>
<div class="row">
<div class="col-md-8 blog-content margin-bottom-70 clearfix">
<article id="post-1" class="post-1 post format-standard">
<header class="entry-header">
<div class="post-thumbnail-area">
{% placeholder "post_header_image" or %}
<img src="/static/img/onepage-slide9.jpg" alt="image_blog"/>
{% endplaceholder %}
</div>
</header>
<div class="entry-content">
<div class="entry-title blog-info">
<h1 class="heading">{% placeholder "post_header_title" or %}POST_TITLE{% endplaceholder %}</h1>
</div>
{% placeholder "POST_BODY" or %}POST_BODY{% endplaceholder %}
</div>
<footer class="entry-footer">
<div class="entry-description">
<h6 class="post-date-classic">{% placeholder "post_date" or %}POST_DATE{% endplaceholder %}</h6>
</div>
</footer>
</article>
<div class="post-additional">
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url, 'popUpWindow', 'height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<ul class="post-share list-inline">
<li><a href="JavaScript:newPopup('https://www.facebook.com/sharer/sharer.php?u='+window.location.href)"><i
class="icon ion-social-facebook"></i></a></li>
<li><a href="JavaScript:newPopup('http://twitter.com/home/?status=Nice blog post - '+window.location.href);"><i
class="icon ion-social-twitter"></i></a></li>
<li><a href="JavaScript:newPopup('https://plus.google.com/share?url='+window.location.href); "><i
class="icon ion-social-googleplus"></i></a></li>
</ul>
<div class="post-navigation nav-links">
<ul class="post-controls list-inline">
<li>
{% placeholder "prev_post" or %}
<a class="post-prev" href="#"><i class="icon ion-ios7-arrow-thin-left"></i></a></li>
{% endplaceholder %}
<li>
{% placeholder "next_post" or %}
<a class="post-next" href="#"><i class="icon ion-ios7-arrow-thin-right"></i></a></li>
{% endplaceholder %}
</ul>
</div>
</div>
<div class="author-bio">
<div class="row">
<div class="author-avatar col-xs-4 col-sm-3 col-md-3 visible-desktop">
{% placeholder "author_img" or %}
<img src="/static/img/image-8.jpg" alt="image_blog"></div>
{% endplaceholder %}
<div class="author-details white col-md-9">
<h3>{% placeholder "author_name" or %}AUTHOR_NAME{% endplaceholder %}</h3>
<p>{% placeholder "author_body" or %}AUTHOR_BODY{% endplaceholder %}</p>
</div>
</div>
</div>
{% placeholder banner_leaderboard_bottom %}
</div>
<div class="col-md-4">
<div class="sidebar">
<aside id="recent-posts-2" class="widget widget_recent_entries">
<div class="widget-title">
<h5 class="heading">RECENT POSTS</h5>
<div class="fancy-line-small"></div>
</div>
{% placeholder "post_recent" or %}
<ul>
<li>Recent blog post</li>
</ul>
{% endplaceholder %}
</aside>
{% placeholder banner_square_right %}
</div>
</div>
</div>
</div>
{% endblock %}
Some image with administration of djangocms-blog:
So, I'd like the Title from Blog admin to be applied on my template instead of <h1 class="heading">BLOG</h1> and so on for date , category and so on
If you want to override a template used by an app that you've installed you simply need to mimic the same template path in your template directory.
The CMS blog templates can be found here.
So to override the CMS blog templates you should decide which template needs to be overridden, in this case it sounds like post_detail.html because you're concerned with how a post displays.
So in your project you need to create something like; myproj/templates/djangocms_blog/post_detail.html
Then the system will load that one instead of the post_detail.html from the site-packages folder.
I am beginner of Django and Template language...
Here is my code:
base.html
{% block news%}
<div class="row">
<div class="span6">
<div class="news-content clearfix">
<div class="news-title">Манай хамт олны тухай</div>
<div class="text clearfix>
<img src="{{STATIC_URL}}img/image1.jpg">
# here is some text
</div>
<div class="pull-right">00
<a class="btn btn-small" href="#">Дэлгэрэнгүй</a>
</div>
</div>
</div>
<div class="span6">
<div class="news-content clearfix">
<div class="news-title">#title</div>
<div class="text clearfix">
<img src="{{STATIC_URL}}img/image2.jpg">
# text-2
</div>
<div class="pull-right">
<a class="btn btn-small" href="#">Дэлгэрэнгүй</a>
{% endblock %}
news_list.html
{% extends "base.hmtl"%}
{% block news %}
{% for news in news_list %}
######## here i want to display last 2 news at row #########
{% endfor %}
{% endblock %}
You are getting it all wrong.
The base.html must contain all the code that is to be reused over your website.For example the files like CSS and javascript are included in the base.html
Inside the base.html you are to include a block that is to hold the code that varies from page to page.You can use multiple blocks as well,like header,body, and footer.
When a template is rendered,the requested template "imports" the base.html using {% extends "base.html" %}.After the import,the block defined in the base.html is replace by the block in the requested template.
As per your question,the code you have written in the base.html that defines how to display your news is to come under the news_list.html,under the for loop.
I assume that the news_list is a QuerySet ie a result of a database query and contains the attributes title,content etc
{% extends "base.html" %}
{% block news %}
{% for news in news_list %}
<div class="row">
<div class="span6">
<div class="news-content clearfix">
<div class="news-title">{{ news.title }}</div>
<div class="text clearfix>
<img src="{{STATIC_URL}}img/image1.jpg">
</div>
<div class="pull-right">00
<a class="btn btn-small" href="#">{{ whatever }}</a>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
And your base.html
<html>
CSS,JS here if any
<body>
{% block news %}
{% endblock %}
</body>
</html>