Im new to using Flask/Jinja but I think that I have my syntax correct yet my css file will not link/modify my app page.
my css file sits in the path:
program/src/static/css/main.css
In my base.html file I tried to link the main.css file using the following:
<link rel="stylesheet" href="{{ url_for('static, filename='css/main.css') }}"/>
I should note that Im utilizing bootstrap css (which is working) which is linked above the link to my file in the base.html.
Currently trying to use the css file to alter a linked page written using the jinja format
{% extends "base.html" %}
{% block content %}
{% endblock %}
yet when I run the page none of my CSS code that I write links to the app page when it runs.
thanks in advance!
If the snippet is your actual code, then you might want to close that string,
<link rel="stylesheet" href="{{ url_for('static, filename='css/main.css') }}"/>
^
Related
I know this is a duplicate question, but I was trying to add a favicon.ico file to my site on localhost:8000 made with Django. The favicon exists on templates\articles (in an app called articles), and I've tried everything on stackoverflow, youtube, and used realfavicongenerator.net, but nothing works. Do I have to define the Django URL/view for the ICO file, as localhost:8000/favicon.ico brings up error? Here's my (simplified) code by the way:
<title>Newsreed | Articles</title>
<link rel="shortcut icon" type = 'image/x-icon' href="favicon.ico">
What should I do, because I've been struggling with it for several days now and tere has been no solution on anything.
I like to use:
https://www.favicon-generator.org/
They let you upload an image to use and it will output a directory with all scaled versions of the image for all manner of devices your page could be viewed on including the html that you will need to copy and paste.
Fairly sure the syntax for the href should be: href="{% static 'imgs/favicon.ico' %}
Best way to have a favicon on every page on your site is to link it to the base.html with href="{% static 'articles/favicon.ico' %}. Mind that you need to put {% load static %} in the template too.
Code standard favicon links at the top of your template or base.html and make sure the icons are there in the directory/s :
{% load staticfiles %}
<head>
<link rel="shortcut icon" href="{% static "img/favicon.ico" %}">
<link rel="icon" href="{% static "img/animated_favicon1.gif" %}">
You can use favicon-generator.org to create new favicons.
I have some Python in Jupyter notebooks that creates pivot tables and some graphs from data. I now want to make PDF reports from this data and I'm looking at making HTML with Jinja2 and converting that to PDF.
I get that Jinja can have a base template and child templates that inherit from it. What I want is a base template that I can render that pulls HTML in from other files (so the base template doesn't get huge and I can debug smaller pieces).
What's the best way to achieve this?
Good evening,
In your case, what I would do is having a folder with your templates.
For example:
templates
|- base.html
|- my_template.html
|- another_template.html
Include
A solution is to use include:
For example in your base.html you would have:
<html>
<head>
</head>
<body>
{% include ['my_template.html', 'another_template.html'] %}
</body>
</html>
Here we include the results of rendering my_template.html and another_template.html in your base.html template.
You will have to give to your render function all the parameters needed for all the HTML templates you want to render.
Extends
With jinja2 you can also do what you want by using the extends capacity.
So let's say you have a template base.html of the type:
<html>
<head>
</head>
<body>
{% block core %}
{{ content }}
{% endblock %}
</body>
</html>
Here, we have a block named core.
You can then in another template extend the base template and replace the core block by something else, for example:
{% extends "base.html" %}
{% block core %}
<h1>Hello world</h1>
{% endblock %}
Unfortunately as you can see it means that if you want various HTML pieces you will have to do several extends.
You can have another template which is going to extend the previous template which extend the base one.
Manual
The last solution which is in my opinion not recommended, but for the sake of it I will expose it here:
Have a base.html of the kind:
<html>
<head>
</head>
<body>
{% for html in list_html_to_render %}
{{ html }}
{% endfor %}
</body>
</html>
Then we don't use Jinja2 anymore in this case, but we render each html contained in the list_html_to_render passed to the render function.
I hope it helps.
Have a lovely day,
My best regards.
I get the templates files, I divide them to static files and templates files.
As you know I can not correct open the html in browser now, because thier path all changed.
I can in the templates files to change every link or script and image path one by one, but its a trouble things, takes our away many time.
Is there a simple way to do that?
EDIT
I changed to this, but not works for me:
{% load static %}
<!--<link rel="stylesheet" href="../static/css/default.min.css?t=227" />-->
<link rel="stylesheet" href="{% static 'css/default.min.css?t=227' %}" />
in the browser debugger, it become this:
<link rel="stylesheet" href="/static/css/default.min.css%3Ft%3D227">
If I understand the question correctly, you need to use the {% static %} tag in the templates, like this:
{% load static %}
...
<img src="{% static 'images/favicon.png' %}">
For more information, check my detailed explanation.
I'm using Sphinx to document a python project. I'm using the canvas to visualize some results in the documentation. My documentation needs to support Firefox and IE. I need to include the excanvas.js library in the documentation, but only if the browser is IE. How can I conditionally include this library so the relative paths are correct?
Example....
Documentation folders
/sphinx
/source
working_test_page.rst
test_block.html
/nested
non_working_test_page.rst
test_block_copy.html
/_templates
layout.html
/_static
excanvas.js
...
Per the notes at Sphinx' documentation pages, the file layout.html was modified. This modification was to insert a conditional block of HTML in the template head which adds excanvas.js on if the page is viewed on IE.
{% extends "!layout.html" %}
{% block extrahead %}
<!--[if IE]>
<script type="text/javascript" src="_static/excanvas.js"></script>
<![endif]-->
{% endblock %}
The file working_test_page.rst and non_working_test_page.rst have the same contents. The contents follow. The only difference is the location of the files.
Script Test
==========
.. raw:: html
:file: test_block_1.html
The file test_block.html and test_block_copy.html have the same contents. The two files contain a some HTML which sets up a canvas and uses it.
When sphinx compiles the rst files into the HTML build directory, the following files structure results:
/sphinx
/build
working_test_page.html
/nested
non_working_test_page.html
/_static
excanvas.js
...
The file working_test_page.html has the correct path to excanvas.js and loads correctly. The file non_working_test_page.html has the wrong path to excanvas.js and does not load correctly.
How can excanvas.js be conditionally loaded so that the relative paths in the sphinx documentation are correct regardless of the location of the rst files?
The conditional link will be formatted properly if the helper function pathto(...) is used to modify the conditional HTML snipet. See documentation on pathto(file,1).
{% extends "!layout.html" %}
{% block extrahead %}
<!--[if IE]>
<script type="text/javascript" src="{{pathto("_static/excanvas.js", 1)}}"></script>
<![endif]-->
{% endblock %}
Background:
I have a css and a js that is used only by the Google maps template tag, that I include in my templates where-ever needed.
Inside template tag google_map:
...
...
return render_to_string('google_map.html', context)
Inside google_map.html I have the required css and the js :
<link rel="stylesheet" type="text/css" href="mystyle.css" />
My problem is :
I have a page with 3 maps, therefore 3 calls to the template tag. This implies the css and the js is included 3 times in the same page. [Should not happen]
Now, I can-not include these css and js in the header of the page, since all the pages are not having the maps so there, on all those pages it would be a burden.
What should I do, so that if a page has 3 or more maps, even then there is only a single include of the css & js and not repeated?
I'd recommend following the pattern introduced by Paul Irish for Markup-based unobtrusive comprehensive DOM-ready execution. There's a number of side benefits to the approach such as encapsulation, namespacing, etc., but the chief benefit for you would be conditional execution of JavaScript based on a id or class on <body>.
So in your base template change your <body> tag to something like the following:
<body class="{% block body_class %}{% endblock %}">
Then, for templates that need maps just do:
{% block body_class %}{% if block.super %}{{ block.super }} {% endif %}maps{% endblock %}
That looks a little complicated, but all it's doing is inheriting from the values any parent templates set for that block. The if block is used to conditionally include the space needed between multiple classes.
Finally, in your JavaScript you simply create a module for "maps" as the article describes and put all your map-specific JS there.
You might use a new django block in the <head> section of your base template you extend:
<head>
/* ... other css/js calls */
{% block googlemapassets %}{% endblock %}
</head>
Then in the view template (assuming content is you main content block):
{% block content %}
{% google_map %}
{% endblock %}
{% block googlemapassets %}
<link rel="stylesheet" type="text/css" href="mystyle.css" />
{% endblock %}