I've created a flask application and want to link Bootstrap and a custom css file.
What's currently happening is that bootstrap is being applied, but my custom styles in styles.css aren't showing. I know that my file references are correct, because the bootstrap and custom css work independent of one another. How can I get them both to apply at the same time such that I can override the bootstrap defaults in my css?
My template.html looks like this:
{% extends "bootstrap/template.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="/static/css/styles.css" >
{% endblock %}
{% block title %} -- TITLE -- {% endblock %}
{% block navbar %}
-- NAVBAR HTML --
{% endblock %}
{% block content %}
-- BODY TEXT HTML--
{% endblock %}
A content page looks like this:
{% extends "template.html" %}
{% block title %} -- TITLE -- {% endblock %}
<head>
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
{% endblock %}
</head>
{% block page_content %} PAGE CONTENT
{% endblock %}
Related
test.html
{% extends "main.html" %}
{% block content %}
<p>block test</p>
{% endblock %}
I add to main.html
{% block content %}{% endblock %}
main.html and test.html are in the same directory.
but in the main page literally {% block content %} {% endblock %} are printed like this ↓.
I don't know why. I've tried {% extends "./main.html" %} but also doesn't work.
As I am working with Symfony 4 and Twig I made a kind of structure to extend templates and include some parts.
I want a frontend and backend page for my project.
Structure:
I included the base/head.html.twig inside the base.html.twig:
The base/head.html.twig this template contains the following:
And now I would like to get a stylesheet specially for the backend:
And this is where the problem is. Because it won't get inherited by the base/head.html.twig.
I have searched the internet for it and tried several things. Maybe you know the answer?
You can use horizontal reuse for this I guess. The setup u'd use should be something like this,
head.twig
{% block head %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Title{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="foo.css" />
{% endblock %}
</head>
{% endblock %}
base.twig
{% use 'head.twig' %}
{% block content %} {% endblock %}
actual_template.twig
{% extends 'base.twig' %}
{% block title %}My title{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="bar.css" />
{% endblock %}
{% block content %}
{{ block('head') }} {# inject head.twig in content #}
{% endblock %}
demo
I've created a project and I'm attempting to load a static CSS for the styling of the webpage. However No matter what I do it does not appear to load. It gives me an internal 500 error. The docs are rather limiting on explaining how it works and how to setup it up. They just show a screeshot of the folder structure.
I tried using this but no luck, and I'm not entirely sure if i even need it, the docs don't really say.
{% include './static/css/custom.css'%}
Here is my setup.
myapp
+---main.py
+---static
| +---css
| | +---special.css
|
|---templates
| +---index.html
|
+---theme.yaml
However here is my index.html file
<!DOCTYPE html>
<html lang="en">
{% block head %}
<head>
{% block inner_head %}
<meta charset="utf-8">
<title>{% block title %}{{ title | e if title else "Bokeh Plot" }}{% endblock %}</title>
{% block preamble %}{% endblock %}
{% block resources %}
{% block js_resources %}
{{ bokeh_css | indent(8) if bokeh_css }}
{% endblock %}
{% block css_resources %}
{{ bokeh_js | indent(8) if bokeh_js }}
{% endblock %}
{% endblock %}
{% block postamble %}{% endblock %}
{% endblock %}
</head>
{% endblock %}
{% block body %}
<body>
<h1>MY MAP</h1>
{% block inner_body %}
{% block contents %}
{% for doc in docs %}
{{ embed(doc) if doc.elementid }}
{% for root in doc.roots %}
{{ embed(root) | indent(10) }}
{% endfor %}
{% endfor %}
{% endblock %}
{{ plot_div | indent(8) }}
{{ plot_script | indent(8) }}
{% endblock %}
</body>
{% endblock %}
</html>
You need to specify the full path from the application directory. So if the application folder is called myapp, the include statement should be:
{% include 'myapp/static/css/custom.css'%}
I am trying to use more different views in one template via different blocks or include method but I have got stuck. My aim is to implement my different views into one template. I tried to more solution but these haven't worked for me. I show these solution:
My views:
def dashboard_data(request):
# Here I collect data from my PostgreSQL database I push these into
#Objects and I send it to my test_a.html via render like below.
return render(request, 'my_project/test_a.html', send_data)
def chart_data(request):
#In these view my final goal is to collect data from database and create
#charts but for the simplicity I just use a list (a=[1,2,3,4]) and I
#push it to the test_b.html and I render it.
render(request, 'my_project/test_b.html', send_data))
My templates:
1, base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% block title %}<title>My project</title>{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include CSS files -->
{% load static %}
<!-- Include CSS files -->
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-table.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
</head>
<body>
{% block sidebar %}
{% endblock %}
{% block content%}
{% endblock %}
</body>
</html>
1, test_a.html
{% extends "monitor/base.html" %}
{%block content%}
{%for i in table%}
<p> {{i.record}}</p>
{%endfor%}
{%endblock}
2, test b.html
{%for i in a%}
<p> {{i}}</p>
{%endfor}
So my goal would be that the test_b.html's result could appear in the base.html.
My solutions:
A: I tried to put into a block the test_b.html and integrate in the base.html
1, base.html (test1):
{% block conent%}
{% endblock %}
{% block chart%}
{% endblock %}
1, test_b.html (test1):
{% extends "monitor/base.html" %}
{%block chart%}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
B: I tried to use {{ block.super }}
1, base.html (test1):
{% block conent%}
{% endblock %}
1, test_b.html (test1):
{% extends "monitor/base.html" %}
{%block content%}
{{ block.super }}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
C: Finally I used include method too but I didn't work for me as well. Here I tried to use simple html tags like (<p>Hello world</p>) int the test_b.html and worked. So If I do not use variables it works but I have to use my variables from my views.
1, test_a.html
{% extends "monitor/base.html" %}
{%block chart%}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
{% include "my_project/test_b.html" %}
2, test_b.html
{%for i in a%}
<p> {{i}}</p>
{% endfor %}
To include an HTML file from another file just use {% include 'htmlfilename.hml' %}
outside {% block your_block_name %}{% endblock %} if it's a base template.
You can learn more about it here.
<body>
{% include 'header.html' %}
{% block sidebar %}{% endblock %}
{% block content%}{% endblock %}
{% include 'footer.html' %}
</body>
If you want to use some functionality across several templates then use inclusion_tags.
As #alessioferri20 mentioned, you cannot render 2 views at the same time. Basically, one view corresponds to one HTTP request & response.
You can achieve what you want by using custom template tags:
https://docs.djangoproject.com/en/2.0/howto/custom-template-tags/
but I have to use my variables from my views.
For example, chart_data could be an inclusion tag (https://docs.djangoproject.com/en/2.0/howto/custom-template-tags/#inclusion-tags), here is some pseudo-code:
Let's say you want to show a chart for the age_stats from your view:
def your_view(request, ...):
age_stats = {...}
....
return render(request, "template...", {'age_stats': age_stats})
In your template:
{% chart age_stats %}
In your template tags:
#register.inclusion_tag('path-to/chart.html')
def chart(input_data):
# collect data from database & use the input_data coming from your view
data = ...
return {'data': data}
The {% include %} tag is how you insert other templates into blocks. These templates don't need to be registered in views.py or urls.py.
For example:
{% extends 'base.html' %} {% block home %} {% load static %}
<div>
<h1>Some Title</h1>
<p>Some text</p>
</div>
<div>
{% include 'some-other-template.html' %}
</div>
{% endblock %}
For more information: https://docs.djangoproject.com/en/4.1/ref/templates/builtins/
Using the sf2.6.4 and the Twig templating system, I have a weird behaviour with the tag 'use'.
With a simple base template defining a default navbar and header content :
{# base.html.twig #}
<html lang="fr">
<head></head>
<body>
{% block navbar %}<hr> nav bar foo bar<hr>{% endblock %}
<!-- a default header -->
{% block header %}
{% include 'AppBundle:TestingTwigUse:header.html.twig' %}
{% endblock %}
</body>
With the given default header.html.twig template :
{# header.html.twig #}
{% block header_container %}
{% block header_title %}<h1>Default title</h1>{% endblock %}
{% block header_content %}
<div>
This default text header, blablabla...
</div>
{% endblock %}
{% endblock %}
When I try to build an index template, inheriting the base one and overiding the header content using 'use' tag like following :
{# index.html.twig #}
{% extends "AppBundle:TestingTwigUse:base.html.twig" %}
{% block header %}
{% use 'AppBundle:TestingTwigUse:header.html.twig' %}
{% block header_container %}
{{ parent() }}
{% block header_content %}
***** child template specific content ****
{% endblock %}
{% endblock %}
{% endblock %}
I have the strange following result with header_content block twice :
***** child template specific content **** ***** child template specific content ****
any idea ?
I thinkg the problem is you have two header_content blocks - one in the index.twig.html, second in the parent() call. Second definition overrides first which leads to duplications after compilation.
If you want to override the default text - you should remove parent() call. If you want to update (append) the default text - you should refactor your blocks structure to avoid identical names.
UPD Try following index
{# index.html.twig #}
{% extends "AppBundle:TestingTwigUse:base.html.twig" %}
{% block header_content %}
***** child template specific content ****
{% endblock %}
UPD 2 Check this solution
I found a solution. Use the block() function to get the child's block
content and pass it to header.html.twig as a variable in the include
statement
Finaly two solutions :
With 'use', we can get the part we want to keep but loosing inheritance :
{% block header %}
{% use 'AppBundle:TestingTwigUse:header.html.twig' with header_title as parent_header_title %}
{% block header_title %}
{{ block('parent_header_title') }}
{% endblock %}
***** child template specific content ****
{% endblock %}
The one is 'embeb' that combines include AND extends behaviour :
{% block header %}
{% embed 'AppBundle:TestingTwigUse:header.html.twig' %}
{% block header_content %}
***** child template specific content ****
{% endblock %}
{% endembed %}
{% endblock %}