Do I have to paste my ananlytics code into every page of my django app or can I just do it in one spot, the base, similar to disqus?
You can do it in the base page and that will be included in every actually generated page.
You can have, for example, a master_page.html in which you put the main wrapper HTML including your Google Analytics code. The main part of your master page would have:
<html>
<head>
<!-- Google Analytics code -->
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Then your content page will have something like:
{% extends "master_page.html" %}
{% block content %}
Your content for the page.
{% endblock %}
Related
I would like to embed a pptx that is uploaded into a folder in OneDrive within a iframe tag in a Django template. I have the urls stored in a model and saved into the SQLite database. In this sense, in the views.py file, I have the following code:
context = {
'selectedunit': selectedunit,
'url_to_be_inserted': MyModel.objects.filter(unit=selectedunit)
}
return render(request, 'web.html', context)
The code for web.html is very easy:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container col-lg-8">
<div class="center">
<iframe class="center" src={{ url_to_be_inserted.url }} width="100%" height="300%" frameborder="0"/>
</div>
</div>
{% endblock %}
The result is the snapshot below:
While, I would like to embed the ppt into the web site. If I directly insert the URL, instead of using the context variable, it works. That is to say:
<iframe class="center" src="https://..." width="100%" height="300%" frameborder="0"/>
In this case, the result is as follows (ppt embedded into the Web site):
The reason why doing in this sense is because, depending on the selectedunit variable, I would like to address a different pptx with a different URL and I would like to dynamically change the pointer (as you see above by filtering the model).
How could I solve it?
Many thanks in advance
I am building a project in Django which has 5 different applications inside it. Some applications are falling under same pattern and some are not. Can I create a UI components using bootstrap on the top of all these applications to reuse over the entire project. Any help would be appreciated.. Thanks in advance
Usually that is done by creating a base template and making other templates inherit from it like this:
base.html
<html>
<head>
<title>Title</title>
</head>
<body>
<navbar> # example navbar that will be visible in each template that will extend this one
<ul>
Home
Contact
Something else
</ul>
</navbar>
{% block content %} # here is where the content of child templates will be seated
{% endblock %}
</body>
</html>
then you will make any other template and extend it with base.html
your_other_template.html
{% extends 'base.html' %} # this line makes sure your child templates inherit the html of your main template
{% block content %} # here is where you will place the content of your other templates
<h1> This is the content of a child template </h1>
{% endblock %}
Paste your component in an empty html file and then use an include statement to load that file into you template html.
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#include
This way you can insert you components more dynamically throughout your project.
This is a strange bug. I have an html file that extends a base template called base.html. I noticed that a script tag right before the end body tag in the base template doesn't show up in the DOM in the Elements tab of the Chrome dev tools, and the tag is cut off completely along with the rest of the html file in the Sources tab. This happens in Chrome, Mozilla, and Safari, so it must be a problem on the Django side. And obviously the observable effects on the page that the script should create aren't happening either.
Here's the end of the rendered html in the Sources tab:
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/ba
Completely cut off. Here's the end of that base template:
{% block main %}{% endblock %}
<footer></footer>
<script src="{% static 'home/js/base.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
Now, here's where it gets funny. The trouble is at the end of the file, so I just added some newlines to see if there's any difference in the DOM is rendered:
{% block main %}{% endblock %}
<footer></footer>
<script src="{% static 'home/js/base.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
And the Sources tab showed a cut off later in the tag:
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/base.j
I won't paste it here, but I added about 35 newlines to the end of the file before I got what I wanted in the Sources. It seems that every newline cuts off the rendered html one character later.
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/base.js"></script>
</body>
</html>
And the effects from the script finally worked. This feels like a temporary solution to something deeper that needs to be fixed. Anybody have any clue what the hell is going on or where to look?
Edit: Here's the template (located in the work app) that extends base.html (located in the home app), called work.html:
{% extends 'home/base.html' %}
{% block css %}
<link rel="stylesheet" href="{% static 'work/css/work.css' %}">
{% endblock %}
{% block main %}
<section>
hello
</section>
{% endblock %}
And here is the view that renders it:
from django.shortcuts import render
def work(request):
return render(request, 'work/work.html', {})
Edit 2: some more unexpected results:
When I deleted the script (so that I can paste it in head as suggested in the comments), the end of the rendered html was this:
<section> what is going on </section>
And pasting right before the </head> tag resulted in:
<section> what is going on </section>
<
Same result above when I commented it out in head.
Commenting out the script when it's before the </body> results in this:
<section> what is going on </section>
<footer></footer>
<!-- <script src="/static/home/js/base.j
And replacing single quotes with double quotes resulted in the rendered html showing double quotes instead of single quotes as the only difference. :/
Then I deleted almost everything so that my code was this:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
And that rendered:
<!DOCTYPE html>
<html lang="en-US">
<head>
<scrip
I added back some tags:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
And the result:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://127.0.0.1:357
For some reason, the script tag generated by django-livereload-server remains. This is what the full script tag looks like:
<script src="http://127.0.0.1:35729/livereload.js"></script></head>
Mystery's over everybody. The problem is that you should not pip install django-livereload-server. I don't know what it does behind the scenes but some of my html disappear based on some weird algorithm.
So, to uninstall django-livereload-server, remove 'livereload', from your INSTALLED_APPS, remove 'livereload.middleware.LiveReloadScript', from your MIDDLEWARE, hit Control-C to get out of that livereload terminal process, Control-C in the window running the runserver process to apply the changes (because livereload latches onto runserver like a leech, so you have to restart), and enjoy expected output. And pip uninstall django-livereload-server. If anybody has any suggestions for a livereload type of app that works (where the browser reloads the page when you type something new in your html/js/css), let me know. For now I guess it's back to the old manually typed Command-R.
I have a query returning long/lat parameters of cities and would like to display a map in the template.
From Google's instructions, I cannot understand where to paste the javascript code.
I instead proceeded to do the following:
Created the map div in the html template (extended from base.html)
Pasted the script with API key in the javascript.html template
Added the javascript script in a map.js file in the static folder
Console shows: "initMap is not a function"
Can anyone help?
One good practise is to define a block at your base.html called footer just before closing the body element and load all js files/code in this content.
base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> </head>
<body>
{% block footercontent %}
{% endblock %}
</body>
</html>
yourtemplate.html
{% extends "base.html" %}
{% block footercontent %}
<script src="myscripts.js"></script>
{% endblock %}
So i looks like you probably copy the example script tag on the documentation, the error showing on the console means thers is no function named initMap. You see at hte end of the script tag src there is &callback=initMap where initMap is the name of the function to call when the google maps js files are ready to be use.
Maybe you din't import map.js of your static folder in your javascript.html template.
Pro tip: use v=3 argument to have the stable version of the google maps api, like so (more info):
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3
&key=YOUR_API_KEY&callback=initMap">
Is it possible to include a template (with include django template tag) within another template and "inject" some content to the page that includes (parent) through block tag, or something similar?
Let's say I have the following file structure within my project:
App/
(...)
templates/
base.html
index.html
_include1.html
_include2.html
_include3.html
_include4.html
Code for base.html:
<!DOCTYPE html>
<html>
<head lang="en">
(...)
</head>
<body>
<script type="application/javascript">
$(function () {
{% block extra_script %}
{% endblock %}
});
</script>
Code for index.html:
{% extends "base.html" %}
{% load static %}
(...)
<div class="row gutter">
<div>
{% include "_include1.html" with object=object%}
</div>
<div>
{% include "_include2.html" with object=object %}
</div>
<div>
{% include "_include3.html" with object=object %}
</div>
<div>
{% include "_include4.html" with object=object %}
</div>
</div>
And in each _include*.html I would like to call some specific JS function (for example), but I want to place it in the parents (index.html or base.html, doesn't matter in my case) extra_script block. I searched in the documentation, other questions and didn't find a way to do this with the include syntax.
I've done something similar but through extends tag. However I don't want to define a block in the index.html or base.html for each page that I need to include ({% bloc include_* %}.
So the solution that I have now (and works) is to define a script in each included page like this (_include1.html):
<div>
(...)
</div>
<script>
$(function () {
//Code that should be placed within parents script page (this is just an example)
var a = function (){
(...)
};
a();
});
</script>
However I think there's a better way to do this, by making use of django templates engine, and without having to define a block for each page that needs to be included. Also I would like to have all my js code in a single place (parents <script> tag) instead of being scattered all over the place (like it is with the presented solution).
Can anyone give some input or ideas towards this?
Thanks!
Try to use django-sekizai for that purpose.
With sekizai, you can define a JavaScript block just before the </body>:
{% render_block "js" %}
And then whenever you need to add JavaScript to that block, you write this:
{% addtoblock "js" %}
<script type="text/javascript">
// your JavaScript
</script>
{% endaddtoblock %}
If there are duplicates of the content in the {% addtoblock %} blocks, they will be used only once.