I'm developing a Django webapp, I created the layout.html and extended to all the HTMLs. Now, i need to take a <main> block and put on another file, because the same block is used twice in the project. As far as I know, I can't make a {% load static %} inside an already extended file {% extends 'layouts/layout.html' %} .
I tried with the <div data-include="path/file.html"></div> and with the
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("content.html");
});
});
and also using <iframe> but nothing. I guess the problem is that I'm using a custom script, and it must necessarily be paired with the HTML block using it. Any other ideas? I can't stand repeating code snippets...
Related
Im trying to use templatetags, but when i write {% load static %} on top of html document and run, it takes this as a text, and does not load the static.
I set the static config in settings.py but stills not working
{% load static%}
<!DOCTYPE html>
<html>
...
</html>
when i open the file on browser or when i send the template via email, as expected in the proyect, the css works, but the images doesnt. I realized i'd use the static dir, but the line: {% load static %} is shown in the browser as text.
Follow the steps below,
In "settings.py" set STATIC_URL = '/static/'
In your template ensure you type {% load static %}, do note that there should be a space between the percentage symbol "%" and the word "static". From your code snippet above this seems to be the source of the problem.
Ensure all your static files are stored in a folder named static as such "/static//example.jpg." then in the html file image tag should be "/example.jpg" %}" alt="My image">.
Do note that the method stated above is only suitable during the development stage. You can read the docs here for more information
I am very new to html, jinja2, templates, and making websites in general, but my employer asked me to do this job, commissioned externally, so I am trying my best.
I am building a website in the CKAN framework, which uses Jinja2 for templating.
On some pages our customer asks to include a static .html file (provided by them). The file has to be rendered, i.e. not show the raw code.
The final page will have to look like this:
The "outer part" is handled by Jinja2 and follows a predefined layout and template equal for all pages. The "internal box" must instead render the custom .html file provided by the customer (different file for each page).
With the idea of fetching the correct name for the custom .html file in some way in the future, I am for now trying just to have an .html file appear.
I have already tried with adding a block to the template like
{% block static_html_desc %}
<script type="text/html", src="my_file.html">>/script>
{% endblock %}
but this produces nothing (i.e. there is just white space in the spot where this is supposed to render).
Then I have tried with
{% block static_html_desc %}
{# include 'my_file.html' %}
{% endblock %}
which sorta works, meaning that my_file.html gets rendered only if the file itself is inside the /templates/ folder, otherwise jinja crashes with "no template found" error.
Given that this file is not dynamic, it feels wrong to put it in the templates folder; there will be several such files, so it's also more logical to keep them in the public folder and have my jinja2 template pull from there.
As said, I am quit a beginner in this so any help and details are greatly appreciated with either Jinja2 or CKAN.
Found a good answer myself, posting here in case others are wondering the same.
The following is based on the excellent tutorial at W3School: https://www.w3schools.com/howto/howto_html_include.asp
I created a javascript file custom_include_html.js, and placed it in the /templates folder of my CKAN plugin. (I reckon it is not a template file, but it relates directly to templates and at current I am not bothered with changing the jinja2 loader path, so I am fine with it staying in that folder).
The content of the file is the following, copied from the W3School tutorial but posted here for your own reference:
function includeHTML() {
var x, i, elem, file, xhttp;
z = document.getElementByTagName("*");
for (i=0; i<z.length; i++) {
elem = z[i];
file = elem.getAttribute("custom-include-html");
if (file) {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readystate == 4) {
if (this.status == 200) {elem.innerHTML = this.responseText;}
if (this.status == 400) {elem.innerHTML = "Page not found, sorry."}
elem.removeAttribute("custom-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
};
Then, in the Jinja2 template defining the page I have to insert the my_file.html file into, I made a block as
{% block static_html_desc %}
<div custom-include-html="/my_file.html"></div>
{% endblock %}
Note that this file is placed in CKAN's public folder, exactly as I wanted in my question above.
At the bottom of the template, I call the javascript script as:
{% block custom_javascript %}
<script type="text/javascript">
{% include custom_include_html.js" %}
includeHTML();
</script>
{% endblock %}
The file my_file.html gets then rendered in the {% block static_html_desc %} block.
At this point, one only has to substitute the call to my_file.html with something not hardcoded, so that different pages load the corresponding *.html files. This is easly done with the templates helper functions.
Say I have a template layout saved in template.html. This template includes a banner, side navigation, content container, and footer. Can I use flask to break up these page elements in such a way that I can have files such as banner.html, sidenavigation.html, etc. and render these different files within template.html?
From: http://jinja.pocoo.org/docs/templates/#include
template.html
{% include 'banner.html' %}
{% include 'sidenavigation.html' %}
{% include 'content.html' %}
{% include 'footer.html' %}
By default, Flask uses Jinja2 as its template engine. See Jinja's Template Designer Documentation how it's done.
Before you start, you need to write these components separately to other html files as pure html. For example, these files shouldn't contain any jinja syntax. After that, according to the documentation, you can easily import them into your template.html file by calling {% include 'filename.html' %} code.
In my CSS, I have examples like this:
#defaultCountdown span.countdown_section {
color:#fff;
padding:7px 15px!important;
margin-bottom:2px;
font-weight:300;
background:url(../img/bg-white.png);
text-align:center
}
If you see the background tag, there's a url.
How do I serve this via staticfiles?
Thanks.
To answer your comment about using static in css or js files.... It could be done. Basically you would define a route and view just like for html pages.
But, this is strongly discouraged for a production level site. You will have a significant increase in page response time if you do this rather than serving these as static files.
To accomplish this, you simply pass content_type into your HttpResponse for your related view:
return HttpReaponse(my_dynamic_css, content_type="text/css")
css is a static file, as is your images and .js. So you use relative paths to reference them, unless you've got a specific need to use static tags for backgrounds, then you can move the style tag for background outside your css and into into your html:
<div class="generic" id="#defaultCountdown span.countdown_section" style="background: url('{% static 'img/bg-white.png' %}');></div>
If you need to use {% static 'url' %} in your CSS or JS, the easiest would be to define the CSS in a <style> block in your HTML template's <head> and the JS in a <script> block at the bottom of your template. Any CSS or JS that doesn't require the use of {% static 'url' %} can still go in separate .css and .js files.
I'm developing a web portal using
- Django 1.2
- Apache
- Mod WSGI
I've several HTML files which are being served by apache.
I want to render those static HTML pages under my base template in order to keep my header / footer and dynamic menus intact.
One way I could thought its using iframes. Another way is to do read HTML files and return string while rendering but in that case I'm loosing advantage of apache, so I want to know if there would be any better way of doing it, is there any existing solution provided by django stuff ?
I'm not sure if this is exactly what you're asking for, but you can insert an html file (or even another template) in a template with the ssi and include tags, depending on your needs:
{% ssi '/path/to/file.html' %}
{% include 'relative/path/to/template.html' %}
yes, it's the include tag
Loads a template and renders it with the current context. This is a way of "including" other templates within a template.
it's as simple as
{% include "templates/static_template_1.html" %}
or, if you create a variable in the view side:
{% include template_name_variable %}
it shares the context with the base template (the one including them)
Edit:
Perhaps you ment to load html-files outside the template-system. Then my way will not suffice.
An option is to extend your base template.
Your base template should not be aware of the sub templates as that would be logically wrong.
Example:
base_template.html:
<html>
<div id='header'></div>
{% block content %}
This text can be left out else it it will shown when nothing is loaded here
{% endblock %}
sub_template.html:
{% extends "base_template.html" %}
{% block content %}
<h1>This is my subpage</h1>
{% endblock %}
You can read more here:
https://docs.djangoproject.com/en/1.2/topics/templates/