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'%}
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 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 %}
I have several templates:
parent.jinja2
{# Header #}
{% block content %}
{% block title_header %}
<h1>{{ the_title }}</h1>
{% endblock %}
{% block child_content %}
{% endblock %}
{% include 'extra.jinja2' %}
{% endblock %}
{# Footer #}
extra.jinja2
{% block extra %}
<p>The title was {{ the_title }}.</p>
{% endblock %}
child.jinja2
{% extends 'parent.jinja2' %}
{% set the_title = "Title of doom" %}
{% block child_content %}
<p>Some stuff.</p>
{% endblock %}
When I render child.jinja2, the value of the the_title in extra.jinja2 is empty. How can I access the value of the_title that is defined in child.jinja2?
The problem seems to go away if I remove the title_header block, so looks to be something to do with first reading the_title inside that block.
I've some trouble with Twig. I don't understand why one of my block is rendering two time in my page.
A-propos.html.twig
{% extends "::layout-v2.html.twig" %}
{% set contexte = "a-propos" %}
{% block content %}
//some stuff
{% block rightbar %}
{{"Je suis dans le block de la vue rightbar"}}
{{ parent() }}
{% endblock %}
//some stuff
{% endblock %}
layout-v2.html.twig
{% include '::header/header-v2.html.twig' %}
<body class="">
{% block topBar %}
{% endblock %}
{% if app.user %}
{% include '::layout-user-v2.html.twig' with {'view_content': block('content')} %}
{% else %}
{% include '::layout-public-v2.html.twig' with {'view_content': block('content')} %}
{% endif %}
{% block rightbar %}
<div class="col-sm-3">
{% if contexte is defined %}
{% include 'BtpGeneralBundle:Sidebars:sidebar_contexte.html.twig' %}
{% else %}
{% include 'BtpGeneralBundle:Sidebars:sidebar_default.html.twig' %}
{% endif %}
</div>
{% endblock %}
{% include '::footer/footer-js-v2.html.twig' %}
</body>
I don't understand why the view sidebar-context.html.twig is rendering first time on the right place and another time just before the include footer-js...
Thank
You could split {% block content %} in A-propos.html.twig on two parts, e.g. contetn1 before rightbar and contetn2 after.