Is there a possibility or workaround how to merge 2 twig templates? (NOT render!)
To give more context, let's assume I have base.twig:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
</body>
</html>
and a child content.twig:
{% extends "base.twig" %}
{% block content %}
<h1>Hello {{ username }}</h1>
{% endblock %}
Expected result:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<div id="content">
<h1>Hello {{ username }}</h1>
</div>
</body>
</html>
Related
I am building some twig modules that require specific javascript to work.
A javascript file is an asset that can be included as follows:
<script src="{{ asset('what/ever/hello.js') }}">
All cool so far, but knowing that:
Those modules may or may not be present on the final rendered page.
Those modules may appear more than once on the same page.
I don't want to include the javascript in all pages, only when at least one instance of the module that requires it is present.
If I add the script to the module twig file, and if the module is used multiple times, it will result in my page containing multiple calls to the same script.
How can I approach this case?
You can work with an extension to keep track of the scripts you want included,
<?php
class Project_Twig_Extension extends \Twig\Extension\AbstractExtension {
protected $scripts = [];
public function getFunctions() {
return [
new \Twig\TwigFunction('get_scripts', [ $this, 'getScripts']),
new \Twig\TwigFunction('add_script', [ $this, 'addScript']),
];
}
public function getScripts() {
return $this->scripts;
}
public function addScripts($script) {
if (!in_array($script, $this->getScripts()) $this->scripts[] = $script;
}
}
Just some mock-up modules
{% do add_script('modules/module_a.js') %}
<h1>Module A</h1>
{% do add_script('modules/module_b.js') %}
<h1>Module B</h1>
Just a simple base template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
{% block content %}
{% endblock %}
{% for script in get_scripts() %}
<script src="{{ asset(script) }}"></script>
{% endfor %}
</body>
</html>
Just a simple child template
{% extends "base.html" %}
{% block content %}
{% incude "modules/module_a.html" %}
{% incude "modules/module_b.html" %}
{% incude "modules/module_a.html" %}
{% incude "modules/module_b.html" %}
{% endblock %}
This would output something like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>Module A</h1>
<h1>Module B</h1>
<h1>Module A</h1>
<h1>Module B</h1>
<script src="js/modules/module_a.js"></script>
<script src="js/modules/module_b.js"></script>
</body>
</html>
I'm new to twig and I'm having some problems.
Here is my question:
I have 3 twig templates:
base.html.twig which I extend in home.html.twig and header / basic.html.twig included in home.html.twig
{#base.html.twig#}
<!DOCTYPE html>
<html class="vw-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index"/>
<meta name="keywords" content="{% block keywords %}{% endblock %}"/>
<meta name="description" content="{% block description %}{% endblock %}"/>
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/png" href="{{ asset('assets/images/icon.png') }}"/>
<link rel="stylesheet" href="{{ asset('assets/css/dist/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/base.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/footer/basic.css') }}">
{% block stylesheets %}{% endblock %}
<script src="{{ asset('assets/js/dist/fontawesome.min.js') }}" crossorigin="anonymous"></script>
</head>
<body class="vw-100">
{% block body %}{% endblock %}
{% include 'footer/basic.html.twig' %}
<script src="{{ asset('assets/js/dist/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/dist/popper.min.js') }}"></script>
<script src="{{ asset('assets/js/dist/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/js/base.js') }}"></script>
{% block javascripts %}{% endblock %}
</body>
</html>
{#home.twig.html#}
{% extends 'base.html.twig' %}
{% block keywords %}{% endblock %}
{% block description %}{% endblock %}
{% block title %}Accueil{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('assets/css/homePage.css') }}">
{% endblock %}
{% block body %}
{% include 'header/basic.html.twig' with {h1: 'Enterprise Name', text_link: 'Learn More', link: 'link', text: 'some text'}%}
{% endblock %}
{% block javascripts %}{% endblock %}
{#header/basic.html#}
<header class="vw-100">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column justify-content-center">
<main role="main" class="inner cover text-center">
<h1 class="cover-heading theme-text-color">{{ h1 }}</h1>
<p class="lead theme-text-color">{{ text }}</p>
<p class="lead">
{{ text_link }}
</p>
</main>
</div>
</header>
I need to add a link to the stylesheet block from the header/basic.html.twig template like this:
{#header/basic.html#}
{% block stylesheets %}
...{# home.twig.html content #}
<link rel="stylesheet" href="{{ asset('assets/css/header/basic.css') }}">
{% endblock %}
<header class="vw-100">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column justify-content-center">
<main role="main" class="inner cover text-center">
<h1 class="cover-heading theme-text-color">{{ h1 }}</h1>
<p class="lead theme-text-color">{{ text }}</p>
<p class="lead">
{{ text_link }}
</p>
</main>
</div>
</header>
I tried a lot of things, but I didn't succeed.
Is there a way to do this? Thanks
I am new to wagtail and I am not able to figure out why I am getting this error: Invalid block tag on line 140: 'wagtailuserbar'. Did you forget to register or load this tag?.
I am attaching the needful code.
--base.html--
{% load static from static %}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<meta charset="utf-8" />
<title>
{% block title %}
Title
{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
{% endblock %}
{% block title_suffix %}
{% with self.get_site.site_name as site_name %}
{% if site_name %}- {{ site_name }}{% endif %}
{% endwith %}
{% endblock %}
</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{# Global stylesheets #}
<link rel="stylesheet" type="text/css" href="{% static 'css/mysite_blog.css' %}">
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
{% block head %}
{% endblock head %}
<style> </style>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="{% block body_class %}{% endblock %}">
{% wagtailuserbar %}
{% block content %}{% endblock %}
{# Global javascript #}
<script type="text/javascript" src="{% static 'js/mysite_blog.js' %}"></script>
{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
<!-- Other Stuff -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
a similar error occurred for {% static %} tag but was fixed by the 1st line in the above code. Please Help me with a solution to this error.
You can load both tags in the same load statement like this:
{% load static wagtailuserbar %}
from static is not needed.
I've got the following structure in my flask project:
app
-app
-static
-templates
-layouts
footer.html
header.html
main.html
search.html
__init__.py
app.py
MANIFEST.in
setup.py
In app.py:
#app.route('/search')
def show_search_form():
return render_template('search.html')
search.html:
{% extends "layouts/main.html" %}
{% block body %}
Test
{% endblock %}
main.html
{% include 'header.html' %}
{% block content %}
{% endblock %}
{% include 'footer.html' %}
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App</title>
</head>
<body>
footer.html
</body>
</html>
As you can see, I'm extending main.html into search.html and using (in this case) 'Test' as content to be injected in the body block. But it doesn't work, I'm getting the following error:
jinja2.exceptions.TemplateNotFound: header.html
What's wrong with the code?
Since your footer.html and header.html files are under the layout directory, you need to reference them as such in the main templates:
main.html
{% include 'layouts/header.html' %}
{% block content %}
{% endblock %}
{% include 'layouts/footer.html' %}
I created the following simple template:
<!DOCTYPE html>
<html lang="en">
<head> .... </head>
<body>
<h1>Harvester: {{ harvester_name }} </h1>
<textarea rows="10" cols="50">
{{ log_text }}
</textarea>
</body>
</html>
Created in the path myProject/myApp/templates/myApp
Now I would like to use the admin template for my template.
So that I have the header similar to the one used in the change_form.
As seen in the image.
How can I do that?
Thanks in advance
Add this in your template, at top. Documentation
{% extends "admin/change_form.html" %}
{% block content %}
Your stuff here
{% endblock %}